Question

I currently have a googlemap canvas with a sidebar with links that when clicked, take the user to the latlong location with a marker and infowindow. When the map is loaded, this is centered but when they click the links the map doesnt pan to the center with the marker in the middle.

I have tried added a map.setCenter within my marker function but this makes the map and markers disappear with no errors in my console. Can anyone guide me to a snippet of code or tutorial which could help? Here is my example code:

<script type="text/javascript"> 
var side_bar_html = ""; 

var gmarkers = []; 
var map = null;

function initialize() {
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(46.18363372751015,12.4530029296875),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP

  }

  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

  google.maps.event.addListener(map, 'click', function() {
  infowindow.close();
});


  var point = new google.maps.LatLng(46.18363372751015,12.4530029296875);
  var marker = createMarker(point,"example 1","location 1 info")

  var point = new google.maps.LatLng(39.31517545076218, 35.25238037109375);
  var marker = createMarker(point,"example 2","location 2 info")

  document.getElementById("marker_list").innerHTML = side_bar_html;
}


var infowindow = new google.maps.InfoWindow({ 
    size: new google.maps.Size(150,50),
});

function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}

function createMarker(latlng, name, html) {

    var contentString = html;

    var marker = new google.maps.Marker({
        position:latlng,
        map: map
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    gmarkers.push(marker);

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';

}
</script> 

Answer 1

If you want the map to center on the marker when it is clicked, you need to write code to do that. By default it pans so the InfoWindow is visible. Change this:

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

To something like:

function myclick(i) {
  map.setCenter(gmarkers[i].getPosition());
  google.maps.event.trigger(gmarkers[i], "click");
}