Google Maps Multiple markers with the exact same location Not working -
i want check see if of existing markers match latlng of new marker , if merge info window/tooltip text.
this tried do:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title></title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script> <script type="text/javascript"> var map; var mc;//marker clusterer var mcoptions = {gridsize: 10, maxzoom: 8}; var infowindow = new google.maps.infowindow();//global infowindow var geocoder = new google.maps.geocoder(); //geocoder var address = new array("42.3334,-89.1572", "39.2058,-76.7531", "39.7751,-86.1322", "40.4894,-78.3499", "42.0203,-87.9059", "36.2673,-86.2912", "33.6115,-84.3745", "44.9793,-93.273", "40.1461,-76.0738", "32.2911,-90.1927", "32.9315,-96.6158", "36.0553,-79.8317", "41.8397,-88.0887", "47.8029,-103.267", "34.106,-83.589", "41.5907,-87.3199", "43.0905,-74.3554", "40.3438,-74.4289", "40.8651,-96.8231", "40.8651,-96.8231", "41.759,-88.1524", "38.2512,-86.8675", "41.8119,-87.6873", "41.3651,-89.0866", "25.7791,-80.1978", "41.6404,-88.0696", "41.7684,-88.1366", "39.7299,-86.4234", "41.5234,-81.5996", "41.6233,-88.0225", "41.0171,-80.8029", "40.2899,-82.9811", "41.8119,-87.6873", "32.3445,-99.8021", "41.8119,-87.6873", "29.8131,-95.3098", "35.1693,-89.9904", "33.6115,-84.3745", "47.7374,-103.298", "46.3502,-94.1", "41.9907,-88.4298", "35.3716,-80.5621", "38.189,-85.6768", "41.8119,-87.6873", "32.7714,-97.2915"); var content = new array("unitno1", "unitno2", "unitno3", "unitno4", "unitno5", "unitno6", "unitno7", "unitno8", "unitno9", "unitno10", "unitno11", "unitno12", "unitno13", "unitno14", "unitno15", "unitno16", "unitno17", "unitno18", "unitno19", "unitno20", "unitno21", "unitno22", "unitno23", "unitno24", "unitno25", "unitno26", "unitno27", "unitno28", "unitno29", "unitno30", "unitno31", "unitno32", "unitno33", "unitno34", "unitno35", "unitno36", "unitno37", "unitno38", "unitno39", "unitno40", "unitno41", "unitno42", "unitno43", "unitno44", "unitno45"); //min , max limits multiplier, random numbers //keep range pretty small, markers kept close var min = .999999; var max = 1.000001; function createmarker(latlng,text) { var marker = new google.maps.marker({ position: latlng, map: map }); ///get array of markers in cluster var allmarkers = mc.getmarkers(); //check see if of existing markers match latlng of new marker if (allmarkers.length != 0) { (i=0; < allmarkers.length; i++) { var existingmarker = allmarkers[i]; var pos = existingmarker.getposition(); if (latlng.equals(pos)) { text = text + " & " + content[i]; } } } // add: mc.addmarker(marker); //?? google.maps.event.addlistener(marker, 'click', function() { infowindow.close(); infowindow.setcontent(text); infowindow.open(map,marker); }); return marker; } function initialize(){ var options = { zoom: 4, center: new google.maps.latlng(39.8282,-98.5795), maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map'), options); var gmarkers = []; (i=0; i<address.length; i++) { var ptstr = address[i]; var coords = ptstr.split(","); var latlng = new google.maps.latlng(parsefloat(coords[0]),parsefloat(coords[1])) gmarkers.push(createmarker(latlng,content[i])); } //marker cluster mc = new markerclusterer(map, gmarkers, mcoptions); (i=0; i<address.length; i++) { geocodeaddress(address[i],i); } } </script> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } </style> </head> <body onload="initialize();"> <div id="map"></div> </body> </html> i tired take working example found here http://www.geocodezip.com/so_overquerylimitb.html , add following code it:
///get array of markers in cluster var allmarkers = mc.getmarkers(); //check see if of existing markers match latlng of new marker if (allmarkers.length != 0) { (i=0; < allmarkers.length; i++) { var existingmarker = allmarkers[i]; var pos = existingmarker.getposition(); if (latlng.equals(pos)) { text = text + " & " + content[i]; } } } so final result when click on marker has same latlng display 1 info window merged text 1 found here http://maps.caseypthomas.org/ex/markerclustererplus/excoincidentmarkers_sharedinfowindow_wgeocoding.html see shows number 4 displays 3 markers that's because 1 on right side merged 1 behind , when click on it shows text both. use geocodezip's example , work on top of since have cords , don't need google go them me. thank reading long question if noting else..
and thank 1mill x on if can me find solution.
thanks again!!!
you need :
- create marker clusterer first.
add markers markerclusterer (and format code easier read...).
function createmarker(latlng,text) { var marker = new google.maps.marker({ position: latlng, map: map }); ///get array of markers in cluster var allmarkers = mc.getmarkers(); //check see if of existing markers match latlng of new marker if (allmarkers.length != 0) { (i=0; < allmarkers.length; i++) { var existingmarker = allmarkers[i]; var pos = existingmarker.getposition(); if (latlng.equals(pos)) { text = text + " & " + content[i]; } } } google.maps.event.addlistener(marker, 'click', function() { infowindow.close(); infowindow.setcontent(text); infowindow.open(map,marker); }); mc.addmarker(marker); return marker; }
Comments
Post a Comment