Pergunta

I'm trying to get markerclusterer to work with some data I've taken out of an SQL database. It's currently showing the map but not the pins. If I console.log the markers var, I end up with a whole bunch of lines of an object organized by indices with VI as the 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 with many more rows.

        [
        {
            "zip": "H8R 3W4",
            "lat": -73.65,
            "lon": 45.43
        },
        {
            "zip": "H8R 3W4",
            "lat": -73.65,
            "lon": 45.43
        }
            ]
Foi útil?

Solução

You need to put the markers into the MarkerClusterer after they have been loaded in the 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 he markerClusterer in the global (or at least a larger) scope, but this should at least show the markers.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top