Google map V3 Set Center to specific Marker
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 l开发者_开发技巧oop 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?
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.
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
});
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
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.
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);
}
});
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"
}
精彩评论