Google Maps Javascript API: Multiple Markers at One Location Because of "Sub Stores"
I'm building a site that uses this api to look for some specific stores. One of them is Target. The problem is my searches usually return 2 to 3 markers at the locations showing "Target", "Target Optics" and "Target Pharmacy". Does anyone know of a good way to have it show only the main "Target" marker?
Just as a reference here's my code:
<script type="text/javascript">
var geocoder;
var map;
var service;
var infowindow;
var markers = new Array();
function initialize() {
var latlng = new google.maps.LatLng(<?=$lat ?>, <?=$long ?>);
infowindow = new google.maps.InfoWindow();
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var request = {
location: latlng,
radius: '22000',
types: ['store'],
name: 'Target'
};
service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place=results[i];
var marker = new google.maps.Marker({
map: map,
position: results[i].geometry.location
});
markers[i] = marker;
markers[i].reference = place.reference;
}
//alert(markers.length);
}
for(j=0;j<markers.length;j+开发者_开发技巧+){
google.maps.event.addListener(markers[j],'click',function(){
var me = this;
var request={reference:this.reference};
service.getDetails(request,function(newplace,status){
var myContent = "<h3>" + newplace.name + "</h3>" + newplace.formatted_address;
infowindow.setContent(myContent);
infowindow.open(map,me);
});
});
}
}
I am guessng you would hv to take a look at map clustering to get the job done. Here are some links that will help you achieve this:
http://www.appelsiini.net/2008/11/introduction-to-marker-clustering-with-google-maps or
http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/
Both are client side clustering examples though and I am guessing you would need server side clustering to group them together and give them the right name. You could probably right an algo to do the same.
精彩评论