Google map API using MarkerClusterer and Geocoder
This is the Tutorial or code which helps to make Google map using Marker Clusterer and Geocoder for programmer.
Many Website uses Google map with lots of marker with it but it doesn't look nice and perfect.
To display nice Google map in your website, you need to add Marker Clusterer. Marker Clusterer merges the collection of marker in one images with number in the marker.
This is the code:
First of all, We need Style of the body. Copy following code for the style.
Secondly, You need to copy the following javascript code to access Google map. Here I have called google map API and also called google map utility library and lastly jQuery.
initialize() function only initializes the google map view with center in "LeighLab"
Then you need to pass this map into the <div> inside the body section
Lastly the final output of the code is as above. Now use this code and solve the problem of Google map.
Many Website uses Google map with lots of marker with it but it doesn't look nice and perfect.
To display nice Google map in your website, you need to add Marker Clusterer. Marker Clusterer merges the collection of marker in one images with number in the marker.
This is the code:
First of all, We need Style of the body. Copy following code for the style.
<style type="text/css">
html{ height: 100%;}
body{ height: 100%; margin: 0; padding: 0}
#map-canvas{ height: 100%}
</style>Secondly, You need to copy the following javascript code to access Google map. Here I have called google map API and also called google map utility library and lastly jQuery.
initialize() function only initializes the google map view with center in "LeighLab"
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function initialize() {
var LeighLab = new google.maps.LatLng(15,0);
var mapOptions = {
center: LeighLab,
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var data = [{"user_address":"JAWALAKHEL, NEPAL","no_of_address":"13"},{"user_address":"Kathmandu,Nepal","no_of_address":"28"},{"user_address":"KIRTIPUR, NEPAL","no_of_address":"29"},{"user_address":"WASHINGTON, UNITED STATES","no_of_address":"17"}];
var markers=[];
var markerCluster = new MarkerClusterer(map, markers);<!--markerClustershould be always above the geocoder--> geocoder = new google.maps.Geocoder(); data.forEach(function(mapData,idx) { geocoder.geocode({'address': mapData.user_address}, function(results, status){ if (status == google.maps.GeocoderStatus.OK) { position=results[0].geometry.location; var marker = new google.maps.Marker({ map: map, position: position, title:mapData.no_of_address }); <!-- below code alway lies inside the loop--> markers.push(marker); markerCluster.addMarker(marker); } }); }); } google.maps.event.addDomListener(window, 'load', initialize); </script>
Then you need to pass this map into the <div> inside the body section
<body>
<div id="map-canvas"/>
</body>
 |
| Fig: Output Google Map |
Comments
Post a Comment