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

User · Answer

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"
}

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[google-maps] Google map V3 Set Center to specific Marker

Examples related to google-maps

Examples related to google-maps-api-3