//**************************************
// Name: Google map cluster with JSON
// Description: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.
// By: Amit Kumar Gaur
//
//This code is copyrighted and has// limited warranties.Please see http://www.Planet-Source-Code.com/vb/scripts/ShowCode.asp?txtCodeId=3011&lngWId=8//for details.//**************************************
// 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>
Get full code here:
http://amitkgaur.blogspot.in/2010/10/google-map-cluster-with-json.html
|
