javascript - Google Maps API v3 geocode, not loading all markers always -
javascript - Google Maps API v3 geocode, not loading all markers always -
my problem when switch beetwen select list. markers disappear, not always, should not disappear. why?
maybe here somewhere problem because used (i think so) closures.
(var = 0; < locations.length; i++) { if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];} if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];} if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];} if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];} if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];} geokoder.geocode ( { 'address': locations[i][0]+','+locations[i][1]}, (function(i) { homecoming function(results, status) { if (status == google.maps.geocoderstatus.ok) { marker[i] = new google.maps.marker({ icon: markericon, position: results[0].geometry.location, map: map, title: locations[i][0], desc: description, tel: telephone, email: email, web: web }); //środkuje mapę map.setcenter(results[0].geometry.location); link = ''; bindinfowindow(marker[i], map, locations[i][0], locations[i][1], telephone, email, web, link); } }})(i) ); } here fiddle: http://jsfiddle.net/zq7bojd5/3/
edit: markers 3, 11, 12, 13, 14, 15 not found geolocation @ computer. maybe thought add together country search request.
edit2: geocoder limited 10 results. thread points out: should store coordinates somewhere; can't utilize geocoder many locations how geocode 20 addresses without receiving over_query_limit response?.
you'l have work, think require.
look @ function getvisiblelocations, see if values in switch right
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> #map { height: 400px; width: 400px; } .gm-style-iw { overflow: hidden; /* google maps bug; first time open infowindow, size short, produces window scroll bar */ } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> <script> //obiekt geokodowania var geokoder; //ikonka markera var image = 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|ffff00'; //obiekt mapy var map; //tablica markerów var markers = []; var visiblelocations = []; locations = [ ['stargard szczecinski', 'uslugowa 1a', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['choszczno', 'kwiatowa 7', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['nowogard', '3 maja 6a', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['myslibórz', 'lipowa 18', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['pyrzyce', 'narutowicza 6', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['chojna', 'jagiellonska 15', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['walcz', 'bydgoska 75', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['bartoszyce','ketrzynska 37b', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['braniewo','królewiecka 61', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['goldap','gumbinska 1', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['ketrzyn','mazowiecka 17', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['lidzbark warminski','olsztynska 6', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['lubawa','fijewo 69', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['mragowo','olsztynska 13', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['nidzica','dzialdowska 14a', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ['szczytno','polna 1', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image], ]; // need search these locations once. let's search @ start. // re-create (a pointer to) marker in locations, locations[i][9] . // makes easy find marker belongs address function searchallmarkerpositions() { (var = 0; < locations.length; i++) { if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];} if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];} if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];} if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];} if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];} geokoder.geocode({ 'address': locations[i][0]+','+locations[i][1]}, (function(i) { homecoming function(results, status) { if (status == google.maps.geocoderstatus.ok) { markers[i] = new google.maps.marker({ icon: markericon, position: results[0].geometry.location, // map: map, title: locations[i][0], desc: description, tel: telephone, email: email, web: web }); // search default markers var visiblelocations = getvisiblelocations(null); if (visiblelocations.indexof(i) > -1) { markers[i].setmap(map); } else { markers[i].setmap(null); } // re-create (a pointer to) marker in locations locations[i][9] = markers[i]; // let's center map first marker if (i==0) { map.setcenter(markers[i].getposition()); } // bind infowindow bindinfowindow(markers[i], map, locations[i][0], locations[i][1], locations[i][2], locations[i][3], ''); // // srodkuje mape // map.setcenter(results[0].geometry.location); } }})(i) ); } } // load map - search markers 1 time (store them in var markers) - read <select> , create right markers visible function init() { geokoder = new google.maps.geocoder(); var mapoptions = { center: new google.maps.latlng(50.259808, 19.02602), zoom: 5, zoomcontrol: true, zoomcontroloptions: { style: google.maps.zoomcontrolstyle.small, }, disabledoubleclickzoom: true, maptypecontrol: false, scalecontrol: false, scrollwheel: true, pancontrol: false, streetviewcontrol: false, draggable : true, overviewmapcontrol: true, overviewmapcontroloptions: { opened: false, }, maptypeid: google.maps.maptypeid.roadmap, } map = new google.maps.map( document.getelementbyid('map'), mapoptions ); searchallmarkerpositions(); // handle of select // lokalizacje w zaleznosci od wybranego regionu $("#sklepy").change(function () { var val = $(this).val(); var visiblelocations = getvisiblelocations(val); updatevisiblemarkers(visiblelocations); }); } // pokazuje chmurke z opisem function bindinfowindow(marker, map, title, desc, telephone, email, web, link) { var infowindowvisible = (function () { var currentlyvisible = false; homecoming function (visible) { if (visible !== undefined) { currentlyvisible = visible; } homecoming currentlyvisible; }; }()); iw = new google.maps.infowindow(); google.maps.event.addlistener(marker, 'click', function() { if (infowindowvisible()) { iw.close(); infowindowvisible(false); } else { // znikanie innych chmurek iw.close(); var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h3>sklep grene</h3><h4>"+title+"</h4><p>"+desc+"<p></div>"; iw = new google.maps.infowindow({content:html}); iw.open(map,marker); infowindowvisible(true); } }); google.maps.event.addlistener(iw, 'closeclick', function () { infowindowvisible(false); }); } // reads visible markers. leave parameter null default. function getvisiblelocations(val) { switch (val) { default: var visiblelocations = [0, 1, 2, 3, 4, 5, 6]; // indexes of locations break; case "warminsko-mazurskie": var visiblelocations = [7, 8, 9, 10, 11, 12, 13, 14, 15]; break; case "zachodniopomorskie": var visiblelocations = [1, 4, 5, 6, 3, 2, 0]; // looks de default, different order. correct? break; } homecoming visiblelocations; } function updatevisiblemarkers(visiblelocations) { clearallmarkers(); (var i=0; i<markers.length; i++) { if (typeof markers[i] == 'undefined') { continue; } if (visiblelocations.indexof(i) > -1) { markers[i].setmap(map); } } } function clearallmarkers() { (var i=0; i<markers.length; i++) { if (typeof markers[i] == 'undefined') { continue; } markers[i].setmap(null); } } google.maps.event.adddomlistener(window, 'load', init); </script> </head> <body> <div class="wyszukiwarka"> <form> <label for="sklepy" class="accessibility">wybierz region</label> <select name="sklepy" id="sklepy" class="no-margin"> <option value="">-- wybierz part --</option> <option value="warminsko-mazurskie">warminsko-mazurskie</option> <option value="zachodniopomorskie">zachodniopomorskie</option> </select> <div id="map"></div> </form> </div> </body> </html> javascript jquery api maps geocoding
Comments
Post a Comment