Google Map Pan to center when clicking a link

Question

I am trying to achieve the following objective with Google Map.

Objective: When a user click on a link, Google Map will pan to the center of the location.

Current: User click on Marker, Google Map will pan to the center of the location.

I think I am almost there just missing certain function to get it to work.

This is my current js file:

<script type="text/javascript">
jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap',
        disableDefaultUI: true
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);

    // Multiple Markers
    var markers = [
        ['The Great Pyramid of Giza', 29.979123, 31.134266 ],
        ['Hanging Gardens of Babylon', 32.543609, 44.424070],
        ['Statue of Zeus at Olympia', 38.099822, 21.583331],
        ['Temple of Artemis at Ephesus', 37.949929, 27.364802],
        ['Mausoleum at Halicarnassus', 37.038038, 27.424385],
        ['Colossus of Rhodes', 36.450964, 28.226221],
        ['Lighthouse of Alexandria', 31.213883, 29.885638]
    ];

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                map.panTo(marker.getPosition());
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(6);
        google.maps.event.removeListener(boundsListener);
    });
}
</script>

This is my current HTML:

<ul class="nav nav-pills">
    <li class="contact-link active"><a data-toggle="pill" data-wonder="The Great Pyramid of Giza" href="#pyramid"><strong>The Great Pyramid of Giza</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Hanging Gardens of Babylon" href="#garden"><strong>Hanging Gardens of Babylon</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Statue of Zeus at Olympia" href="#statue"><strong>Statue of Zeus at Olympia</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Temple of Artemis at Ephesus" href="#temple"><strong>Temple of Artemis at Ephesus</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Mausoleum at Halicarnassus" href="#mausoleum"><strong>Mausoleum at Halicarnassus</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Colossus of Rhodes" href="#collosus"><strong>Colossus of Rhodes</strong></a></li>
    <li class="contact-link"><a data-toggle="pill" data-wonder="Lighthouse of Alexandria" href="#lighthouse"><strong>Lighthouse of Alexandria</strong></a></li>
</ul>
<div class="tab-content">
    <div id="pyramid" class="tab-pane fade in active">
        <p>The Great Pyramid of Giza<br>info:...</p>
    </div>
    <div id="garden" class="tab-pane fade">
        <p>Hanging Gardens of Babylon<br>info:...</p>
    </div>
    <div id="statue" class="tab-pane fade">
        <p>Statue of Zeus at Olympia<br>info:...</p>
    </div>
    <div id="temple" class="tab-pane fade">
        <p>Temple of Artemis at Ephesus<br>info:...</p>
    </div>
    <div id="mausoleum" class="tab-pane fade">
        <p>Mausoleum at Halicarnassus<br>info:...</p>
    </div>
    <div id="collosus" class="tab-pane fade">
        <p>Colossus of Rhodes<br>info:...</p>
    </div>
    <div id="lighthouse" class="tab-pane fade">
        <p>Lighthouse of Alexandria<br>info:...</p>
    </div>
</div>
<div id="googleMap" class="mapping" style="height:656px;"></div>

Answer 1

You need to create an array of google.maps.Marker objects to trigger the click on:

// Loop through our array of markers & place each one on the map  
for (i = 0; i < markers.length; i++) {
  var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
  bounds.extend(position);
  marker = new google.maps.Marker({
    position: position,
    map: map,
    title: markers[i][0]
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      map.panTo(marker.getPosition());
    }
  })(marker, i));
  gmarkers.push(marker);
  // Automatically center the map fitting all markers on the screen
  map.fitBounds(bounds);
}

Then one option would be to iterate through that list looking for the marker with the title that matches the data in the clicked element:

$(".contact-link a").on("click", function(e) {
  e.preventDefault();
  var curWonder = $(this).attr("data-wonder");

  for (var i = 0; i < gmarkers.length; i++) {
    if (gmarkers[i].getTitle() == curWonder) {
      google.maps.event.trigger(gmarkers[i], 'click');
      break;
    } 
  } 
});

proof of concept fiddle

Answer 2

You could change your loop to

var wonderlinks = $('[data-wonder]'); // added this line
// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0]
    });
    // added the following block
    wonderlinks.filter(function(){
        return $(this).data('wonder') === markers[i][0];
    }).on('click', (function(marker){
        return function(){
            map.panTo(marker.getPosition());
      }
    })(marker));

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            map.panTo(marker.getPosition());
        }
    })(marker, i));

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
}

Updated demo at https://jsfiddle.net/5cqc9u5y/1/

Answer 3

$(".contact-link a").on("click", function(e){
  e.preventDefault();
  var curWonder = $(this).attr("data-wonder");

  for( var i = 0; i < markers.length; i++ )
  {
    var curMarker = markers[i];
    if( curMarker[0] == curWonder )
    {
      //curMarker.trigger("click");
      new google.maps.event.trigger( curMarker, 'click' );
      break;
    }//if
  }//for()
})