jquery - Maps API & MarkerClusterer -
i'm trying markerclusterer work data i've taken out of sql database. it's showing map not pins. if console.log
markers var, end whole bunch of lines of object organized indices vi value.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script src="jqueryui/js/jquery-1.9.0.js" type="text/javascript"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=aizasyc3hdl1qhs4gq_hew-k60benthuzlt5_8s&sensor=false"> </script> <script type="text/javascript"> var script = '<script type="text/javascript" src="markerclusterer'; if (document.location.search.indexof('compiled') !== -1) { script += '_compiled'; } script += '.js"><' + '/script>'; document.write(script); </script> <script type="text/javascript"> var markers = []; $.getjson('getlatlon.php',{ajax:'false'},function(jsondata){ $(jsondata).each(function(){ var latlng = new google.maps.latlng(this.lat,this.lon); var marker = new google.maps.marker({'position': latlng}); markers.push(marker); }); }); function initialize() { var mapoptions = { center: new google.maps.latlng(41.611143, -86.722719), zoom: 4, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map-canvas"), mapoptions); var markercluster = new markerclusterer(map, markers); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"/> </body> </html>
getlatlon returns this, though many more rows.
[ { "zip": "h8r 3w4", "lat": -73.65, "lon": 45.43 }, { "zip": "h8r 3w4", "lat": -73.65, "lon": 45.43 } ]
you need put markers markerclusterer after have been loaded in ajax callback.
$.getjson('getlatlon.php',{ajax:'false'},function(jsondata){ $(jsondata).each(function(){ var latlng = new google.maps.latlng(this.lat,this.lon); var marker = new google.maps.marker({'position': latlng}); markers.push(marker); }); var markercluster = new markerclusterer(map, markers); });
you may want markerclusterer in global (or @ least larger) scope, should @ least show markers.
Comments
Post a Comment