SUBHOD LEARNT

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. <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.google

I have found that many Google map in Website used the default map.This default Google map goes beyond the poles while dragging up and down. I have found the code that doesn't exceed the pole while dragging. Just paste the following code inside you intialize() function of the Google map: google.maps.event.addListener(map, 'center_changed', function() {checkBounds(); }); var allowedBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-66.85200239592201, -179.66565397011107), new google.maps.LatLng(66.903255924231566, 179.57922246681517)); function checkBounds() {           if(allowedBounds.contains(map.getCenter())) {             return;           }           var mapCenter = map.getCenter();           var X = mapCenter.lng();           var Y = mapCenter.lat();           var AmaxX = allowedBounds.getNorthEast().lng();           var AmaxY = allowedBounds.getNorthEast().lat();           var AminX = allowedBounds.getSouthWest().lng();           var AminY = allowedBo

As I said in previous article. This is the code for Google map API with Infobox style using associative array. <script type="text/javascript"> var map; var markers = []; var data = [ {id:"1",name:"Sujan Bhochhibhoya",address:"KATHMANDU, NEPAL"}, {id:"3",name:"David Beckham",address:"LONDON, UNITED KINGDOM"}, {id:"4",name:"KOBE BRYANT",address:"Los Angeles, California, United States"}]; function initialize() { var latlng = new google.maps.LatLng(0, 0); var myOptions = { zoom: 2, minZoom:2, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, }, center: latlng, }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); geocoder = new google.maps.Geocoder(); data.forEach(function(mapData,idx

I have seen many queries about the google map problems like, -Display Multiple Markers in Array - Google Maps API -Multiple markers not showing in Google Maps with Javascript API v3? - etc... I have completed the google api with array of the location. I have tried this and is good. here is the code: <script type="text/javascript"> var map; var markers = []; var data = [ {id:"1",name:"Sujan Bhochhibhoya",address:"KATHMANDU, NEPAL"}, {id:"3",name:"David Beckham",address:"LONDON, UNITED KINGDOM"}, {id:"4",name:"KOBE BRYAN",address:"Los Angeles, California, United States"}]; function initialize(){ var latlng = new google.maps.LatLng(0, 0); var myOptions = { zoom: 2, minZoom:2, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, }, center: latlng }; map = new google.maps.Map(document.getElementById("map_canv