Question

I know markerClusterer able to handling large amounts markers on google map.
By referring this example code as below shown

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript" src="../src/data.json"></script>
    <script type="text/javascript">
      var script = '<script type="text/javascript" src="../src/markerclusterer';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>

    <script type="text/javascript">
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

First question, why this example infowindow cannot work?

Second if I have such array like this:

[-6.358851,106.889359] => Array
        (
            [0] => stdClass Object
                (
                    [name] => C
                )

        )

    [-6.154060,106.854080] => Array
        (
            [0] => stdClass Object
                (                        
                    [name] => A
                )

            [1] => stdClass Object
                (
                    [name] => B
                )

        )

Can I do like those have the same lat and lon, stack the information within one infowindow? I know it could be. I just wondering how to do it. And how does the json data format to get the right output on map?

Hope anyone here can help me. Thanks in advance.

Answer 1

First question; what infowindow? Your code has no infowindow in it. What you need to do is inside your loop, create an infowindow variable for each marker, set its content, and create an event listener for that marker.

<script type="text/javascript">
    var map;

    function initialize() {
        var homeLatlng = new google.maps.LatLng(51.476706,0); // London
        var homeLat = 51.476706;
        var homeLng = 0;

        var myOptions = {
            zoom: 5,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        for (var i = 0; i < 100; i++) {
            var latLng = new google.maps.LatLng(homeLat, homeLng+i);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });

            setContent(marker, i);
        }
    }

    function setContent(marker, i) {
        var infowindow =  new google.maps.InfoWindow({
            content: 'clicked marker ' + (i+1)
        });

        google.maps.event.addListener(marker, 'click', function(event) {
           infowindow.open(map, marker);
        });
    }


    google.maps.event.addDomListener(window, 'load', initialize);
</script>