Thursday, November 18, 2010

Google map cluster with JSON

Google map cluster with JSON

When will cluster not work!.

I have identified that , if php script or any other server side script output in json and save it in file; and then use that file into google map cluster , then it will not work.

So don't use php or any other server side script which output in json in to system file, instead of json use direct values.

For ex:

// Get data from database and store it in $data variable.
// encode it in json
$json = json_encode($data);
// write it into "demo.json" file.
fwrite($fh, $json);

// use that file in map

$('#map_canvas').gmap().bind('init', function() {
    $.getJSON( 'http://localhost:90/testmapclustermarker/json/demo.json', function(data) {
 //put here marker cluster code, you can see cluster will not show/work.

    } );
    });

// == instead of above code use this below code ==

<div id="map_canvas" class="map" style="height:600px;"></div>
    <script type="text/javascript">
        //first use map api as:
        $('#map_canvas').gmap().bind('init', function(evt, map) {

// start here your server side programming tag:   
// connect to database and iterate it. don't store it in file system and don't convert it in json format.
// while not end database
// end here your server side programming tag:   

var marker_img="http://localhost:90/test/img/test.png";
$('#map_canvas').gmap('addMarker', {
                'position': new google.maps.LatLng(<?php echo (float)$row['lat'];?>,<?php echo (float)$row['log'];?>),
                'icon':new google.maps.MarkerImage(marker_img,new google.maps.Size(32,37)),
                'bounds': true,
                animation: google.maps.Animation.DROP,
            }).click(function() {                                    // marker.content
                $('#map_canvas').gmap('openInfoWindow', { 'content': "test"}, this);
            } );

// end loop database.
// set cluster here
var mcOptions = {gridSize: 50, maxZoom: 9, minimumClusterSize: 15, title: 'test'};
$('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers'), mcOptions));
</script>




No comments:

Post a Comment