<div class="embed-container">
{exp:gmap:init id="map" scrollwheel="false"  style="width:1200px;height:460px"}

{exp:gmap:center id="map" address="{branch_address} {branch_city}"}
</div>

{exp:gmap:marker id="map" latitude="{branch_latitude}" longitude="{branch_longitude}" zoom="13"}

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

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

  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"}
  $('.block article.entry{entry_id}').addClass('active');

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

{/exp:gmap:event}

{/exp:channel:entries}