<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>











var addr = "My Address"; var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': addr }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { // you have your collection of matching results with you here. } else { // alert(status); } });

var myOptions = { zoom: 16, center: results[0].geometry.location, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

for(var i=0; i<results.length; i++ ) { var marker = new google.maps.Marker({ map: map, position: results[i].geometry.location }); }

var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'mouseover', (function(marker) { return function() { var content = address; infowindow.setContent(content); infowindow.open(map, marker); } })(marker));

//Initialize bounds var bounds = new google.maps.LatLngBounds(); for(var i=0; i<results.length; i++ ) { var marker = new google.maps.Marker({ map: map, position: results[i].geometry.location }); // Below line of code will tell the map how much it need to scale. bounds.extend(marker.position); map.fitBounds(bounds); }

First of all I am writing this article to deal with this very specific problem since I saw a lot people looking to get this achieved. I won't be describing the Google Maps API in detail because for this you can go through the Google Maps API official documentation.So here we are going to talk about a very common problem that many face while integrating google maps with their web application on client side.You will learn how to place mlutiple addresses on google map and scale it so that each of the address fit in the given amount of space with a perfect zoom.Although I suppose google has a good documentation but still it takes time to assemble it to the perfection. I would like to share my experience here. May be this helps a few of you who have been looking for it.Before starting I would just like to confirm that google maps Javascript API v3 is to be included to execute the code I am about to mention.Here is the piece of line that you need to include.This is only for personal use. Please refer to Loading the Google Maps JavaScript API for Business-specific instructions Basically you need to append the API key for business usage.Google Maps API has a very basic and most used feature that takes latitude and longitude as input and places it on the map and renders it. You might be wondering that how would I get the latitude and longitude. So Google do have a solution for that too. Its Geo-Location API.This API takes the address and will return you the list of locations(lat,long,etc).Communication is done over HTTPS using POST. Both request and response are formatted as JSON, and the content type of both is application/json.These couple lines will do the job for you.So in "" we have a array of locations that matches with the given address string.Now we need to locate the location as a marker on the google maps.First we need to initialize the Google Maps.You have many more options available that you can refer to google maps API documentation. Currently we have just defined the type of map, the location where it need to center the map and the default zoom.Once the map is initialized we can place multiple markers that we need to place on map. Here is an example.Above lines of code will place all the locations on the map.Now to associate the custom address string with the markers you can use info windows. You can add an mouseover or a click or any other event on markers that shows up the info window with your own custom address string.Below lines of code will do the work perfectly.You can modify the event as per convenience. I have used mousover in above piece of code.Now the bigger question comes into picture that how will you scale the map is perfectly zoom and centered with all the markers placed.Well, when you are dealing with google maps its not a tough task. Here is how you are able to achieve this."bounds" maintains the list of locations for which it need to scale the map.Here is JSFiddle link where you can execute above code In this example whatever you add to to the input box gets added as a marker in the map and the map automatically gets scaled accordinglyI hope you find it very easy and this helps you playing with google maps.