Google map V3 Set Center to specific Marker

Question

I am using Google Map V3 to display a list of markers pulled from a DB, using MYsql and PHP. MY markers are set on the map using the full address (from DB, including postcode) as I don't have the Long,Lat info All is working fine, MY loop looks as follow

while...
Addmarker(map,'MY ADdress','Title');
end while;

Now I would like to set the map to a specific marker contained in the loop that will match a previously entered postcode. How can I set the map to center to this marker and open the infowindow?

score 66 · Answer 1 · answered May 27 '11 at 10:09

66

Once you have markers on the map, you can retrieve the Lat/Long coordinates through the API and use this to set the map's center. You'll first just need to determine which marker you wish to center on - I'll leave that up to you.

// "marker" refers to the Marker object you wish to center on

var latLng = marker.getPosition(); // returns LatLng object
map.setCenter(latLng); // setCenter takes a LatLng object

Info windows are separate objects which are typically bound to a marker, so to open the info window you might do something like this (however it will depend on your code):

var infoWindow = marker.infoWindow; // retrieve the InfoWindow object
infoWindow.open(map); // Trigger the "open()" method

Hope this helps.

answered May 27 '11 at 10:09

6twenty

822
5
11

thx, please don't leave that to me, as I am not that confident with google map. How do I target a specific marker? – salocin May 27 '11 at 10:12
In the "Addmarker" function in your while...end loop you should be building Marker objects using the Google Maps API. You may need to assign each marker (or just the marker(s) you wish to work with) to an array so that you can access them. If you need more help building Markers and adding them to a map, I would suggest you close this question and create a new one which is more specific to the help you require. – 6twenty May 27 '11 at 13:54
You may also wish to read over this [tutorial](http://code.google.com/apis/maps/documentation/javascript/tutorial.html) or browse these [examples](http://code.google.com/apis/maps/documentation/javascript/examples/index.html) – 6twenty May 27 '11 at 13:56

score 42 · Answer 2 · answered Apr 19 '13 at 16:02

To build upon @6twenty's answer...I prefer panTo(LatLng) over setCenter(LatLng) as panTo animates for smoother transition to center "if the change is less than both the width and height of the map". https://developers.google.com/maps/documentation/javascript/reference#Map

The below uses Google Maps API v3.

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(latitude, longitude),
    title: markerTitle,
    map: map,
});
google.maps.event.addListener(marker, 'click', function () {
    map.panTo(marker.getPosition());
    //map.setCenter(marker.getPosition()); // sets center without animation
});

Thanks, this worked for me. There is another function `panBy`, this will help you to change the center of the map by the given distance in pixels. :) — Sumit Tawal, Jul 19 '17 at 13:55

score 20 · Answer 3 · answered Dec 17 '15 at 09:20

20

This should do the trick!

google.maps.event.trigger(map, "resize");
map.panTo(marker.getPosition());
map.setZoom(14);

You will need to have your maps global

answered Dec 17 '15 at 09:20

Alex

272
2
10

score 2 · Answer 4 · answered Feb 12 '14 at 08:45

may be this will help:

map.setCenter(window.markersArray[2].getPosition());

all the markers info are in markersArray array and it is global. So you can access it from anywhere using window.variablename. Each marker has a unique id and you can put that id in the key of array. so you create marker like this:

window.markersArray[2] = new google.maps.Marker({
            position: new google.maps.LatLng(23.81927, 90.362349),          
            map: map,
            title: 'your info '  
        });

Hope this will help.

score 1 · Answer 5 · edited Jun 26 '14 at 11:12

geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

score 1 · Answer 6 · answered Aug 01 '18 at 13:13

If you want to center map onto a marker and you have the cordinate, something like click on a list item and the map should center on that coordinate then the following code will work:

In HTML:

<ul class="locationList" ng-repeat="LocationDetail in coordinateArray| orderBy:'LocationName'">
   <li>
      <div ng-click="focusMarker(LocationDetail)">
          <strong><div ng-bind="locationDetail.LocationName"></div></strong>
          <div ng-bind="locationDetail.AddressLine"></div>
          <div ng-bind="locationDetail.State"></div>
          <div ng-bind="locationDetail.City"></div>
      <div>
   </li>
</ul>

In Controller:

$scope.focusMarker = function (coords) {
    map.setCenter(new google.maps.LatLng(coords.Latitude, coords.Longitude));
    map.setZoom(14);
}

Location Object:

{
    "Name": "Taj Mahal",
    "AddressLine": "Tajganj",
    "City": "Agra",
    "State": "Uttar Pradesh",
    "PhoneNumber": "1234 12344",
    "Latitude": "27.173891",
    "Longitude": "78.042068"
}

Could you provide a non-Angular solution, please? – Bruno Mazza Aug 13 '18 at 14:30 — Bruno Mazza, Aug 13 '18 at 14:30

Google map V3 Set Center to specific Marker

6 Answers6

Linked