0

I've got a google maps for EE map with multiple pins working. I've also set it to add a class to a div further down the page when clicking a pin.

However what I need is to remove that class when closing the infobox. Unfortunately I am unable to figure out how to target the close button as the inspector doesn't appear to work over the map. I've tried toggleClass but that only works when you click the pin again, not close the infobox.

My current working code is here, the jquery is at the bottom in the exp:gmap:event tag pair - I've added a second event tag pair targetting the closeclick event, but it's not working.

          {exp:channel:entries channel="branches" disable="member_data|pagination|categories|category_fields" limit="300"}

           {!--{branch_location id="map"}--}

           {exp:gmap:marker 
            id="map" 
            latitude="{branch_latitude}" 
            longitude="{branch_longitude}"
            icon="/images/map-pin.png"
            offsetY="-40"
            offsetX="0"
            geocode="false"
            infobox="true" 
            clustering="true"
            class="ui-infobox-dark"
            closeBoxMargin="5px"
          }
              <div class="ui-infobox-content entry{entry_id}">
                <h4>{title}</h4>
                {branch_address} <br>
                {branch_city} {branch_province} <br>
                {branch_postcode} <br>
                Work Phone: {branch_phone} <br>
                Toll Free: {branch_toll_free} <br>
                Fax Number: {branch_fax}
              </div>
            {/exp:gmap:marker}

            {!--
            // add active class to branch card to highlight it.
            --}
            {exp:gmap:event id="map"}
              $('.block article.entry{entry_id}').addClass('active');
            {/exp:gmap:event}

{exp:gmap:event id="map" event="closeclick"}
    $('.block article.entry{entry_id}').removeClass('active');
{/exp:gmap:event} 

          {/exp:channel:entries}
  • did you get this to work please? Could you post a solution if so? Thanks – Laurence Cope Jul 8 '15 at 14:00
  • @LaurenceCope posted answer below. Hope it helps – CreateSean Jul 8 '15 at 18:57
0

Forgot about this Question until Laurance commented. Here is my working code:

     {exp:gmap:marker 
  id="map" 
  latitude="{branch_latitude}" 
  longitude="{branch_longitude}"
  duplicate_markers="false"
  icon="/images/map-pin.png"
  geocode="false" 
  clustering="true"
  latitude="{branch_latitude}" 
  longitude="{branch_longitude}"
  limit="100"
  entry_id="{entry_id}"

  infobox="true"
  offsetY="-40"
  offsetX="0"
  class="entry-{entry_id} ui-infobox-dark"
  closeBoxMargin="5px"
}
  <div class="ui-infobox-content">
    <h4>{title}</h4>
    {branch_address} <br>
    {branch_city} {branch_province} <br>
    {branch_postcode} <br>
    Work Phone: {branch_phone} <br>
    Toll Free: {branch_toll_free} <br>
    Fax Number: {branch_fax}
  </div>
{/exp:gmap:marker}

{!--
// add active class to branch card to highlight it.
--}
{exp:gmap:event id="map"}
 $('.branch-block article.entry{entry_id}').addClass('active'); 


 $( ".ui-infobox-dark img" ).click(function() { 
    $('.branch-block article').removeClass('active'); 

    console.log('was clicked');

  }); 

 {/exp:gmap:event} 

{exp:gmap:event id="map" event="closeclick"}
   $('.branch-block article.entry{entry_id}').removeClass('active');
{/exp:gmap:event}


{!--
  http://devot-ee.com/add-ons/support/google-maps/viewthread/14346#47060
--}
<script>
  for(var x in map_markers) {
   var marker = map_markers[x];
   var id = marker.entry_id;

   // If this console.log doesn't return an entry_id, you need to
   // pass the entry_id using a parameter to your exp:gmap:marker tag.
   console.log('entry_id:', id);

   if(marker.window) {
    google.maps.event.addListener(marker.window, 'closeclick', function() {
     // $('.branch-block article.entry'+id).removeClass('active');
     $('.branch-block article').removeClass('active');
     console.log('this was clicked');
    });
   }
  } 
</script>
| improve this answer | |
  • great thanks, so targeting the close image direct then, obvious really! But I couldn't find it in the inspector like you mention. thanks a lot. – Laurence Cope Jul 9 '15 at 9:55
  • I got help from ObjectiveHTML.... glad it helped you out. – CreateSean Jul 9 '15 at 13:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.