When you are dealing with addresses on Google Maps there are times when you have multiple addresses for a same location. For example if you live in a building with 200+ apartments, building address remains the same but you also add apartment number to your address to precisely locate you.
Here are couple of address examples
1/991 Buleen Road
2/991 Buleen Road
From the example above its clear that 991 buleen road is building address, 1 and 2 are apartment numbers.
I would just use InfoWindow to go with MarkerCluster to show details of multiple points.
Lets check out the code below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>MarkerClusterer and Info windows</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script type="text/javascript" src="<a href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer_packed.js">http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer_packed.js</a>"></script> <script> function initialize() { var markers = []; var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var mapOptions = { zoom: 13, center: myLatlng }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var contentString = function(markers) { var showInInfoWindow = ""; for(i=0;i<markers.length;i++) { // you can add IDs, click handlers etc etc here. showInInfoWindow +="<div>" showInInfoWindow +=markers[i].title showInInfoWindow +="</div>" } return '<div class="info-content">' + '<h1>Title</h1>' + '<div id="bodyContent">' + showInInfoWindow + '</div>' + '</div>'; } var infowindow = function(contentString) { return new google.maps.InfoWindow({ content: contentString }); } var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'First Marker' }); var marker2 = new google.maps.Marker({ position: myLatlng, map: map, title: 'Second Marker' }); // there is better way of doing things, Below is done to show you in detail whats going on markers.push(marker); markers.push(marker2); // now we have 2 markers with different title and same position // lets now create our markerClusterer instance with markers array var markerCluster = new MarkerClusterer(map, markers,{<strong>zoomOnClick:false</strong>,maxZoom:15}); // lets initialize our infoWindow, remember, below approach is one of several ways var iw = infowindow(contentString(markers)); // now add a click listerner for markerCluster google.maps.event.addListener(markerCluster, 'click', function(evt) { if(map.getZoom() < 15) { map.setZoom(map.getZoom()+1); } else { // remember that we are passing a marker to our info window open method, it doesn't matter which one you pass, only thing // of interest to infoWindow is position property iw.open(map,marker); } }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html> |
And that’s pretty much it.
Here is a working example of above code
Two things to remember while doing above code
- You have to instantiate MarkerClustere
1zoomOnClick:false - While creating Markers, you can add any custom property to your marker, or hell of an amount of data, so when you create your info window, you have that data available.
Also you can have a look at another way of handling it
https://github.com/jawj/OverlappingMarkerSpiderfier
I hope this helps or at least gives you a pointer what you should be doing for multiple markers for same location.
Cheers,
Hi thanks, but another change multiple location map with find particular address location of marker visibilty, another address marker dont show please provide code
Hi and thank You so much for sharing! It was very helpfull!
I just wounder how do I do when I want to show a picture in my infowindow. I have to flats on the same address and I want link to their description from my infowindow but I want want to show the picture of the first ine only. Is it possible?
Hi! Great and exactly what I was looking for! Thx:) I wounder how to do if I have pictures in My info windows? I do not want to show 2 pictures or more if I have 2 or more places on the same address. Any idea?
Best for you and thank you for sharing!