CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3maps
Dan Temple
Dan Temple

Reputation: 1182

Google Map API v3 - Centre Map on Markers

I've recently started using Google Maps API v3.

I need to plot some locations (maybe 3 or 4) and at the same time, centre the map on these points - as opposed to manually having to set the long and lat for the map to centre on...

Can someone share some tips, or point me in the right direction?

Thanks in advance! Dan 

function initialize() {
      var latlng = new google.maps.LatLng(51.50816, 0.02712);
      var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var firstmap = new google.maps.Map(document.getElementById("map"),myOptions);
      //EVENT MARKER
      var point = new google.maps.LatLng(51.50816, 0.02712);
      var marker = new google.maps.Marker({
        position:point,
        map:firstmap,
        title: 'ExCel London',
        draggable:false,
        icon:'images/event.png'
      })
      var contentstring = '<div>Hello World</div>'
      var infoWindow = new google.maps.InfoWindow({
        content:contentstring
      });
      //HOTEL 1 MARKER
      var point = new google.maps.LatLng(51.503146, -0.113259);
      var marker = new google.maps.Marker({
        position:point,
        map:firstmap,
        title: 'Waterloo Hotel',
        draggable:false,
        icon:'images/flag.png'
      })
      var contentstring = '<div>Hello World</div>';
      var infoWindow = new google.maps.InfoWindow({
          content:contentstring
      });
      google.maps.event.addListener(marker,'click',function(){
          infoWindow.open(firstmap,marker);
      })
    };

Upvotes: 2

Views: 4175

Answers (1)

lfergon
lfergon

Reputation: 973

You need to save your marker on an array, and then use the function center: 

function autoCenter(){
    var limits = new google.maps.LatLngBounds();
    $.each(arrayMarkers, function (index, marker){
        limits.extend(marker.position);
    });
    map.fitBounds(limits);
}

Upvotes: 9

Related Questions