Creating custom marker and Info Window with Google Maps API v3

Recently, we had to implement custom marker placement on Google Maps. We decided to give Google Maps API v3 a shot since this is what the future is. There are however a couple of changes that every one moving from API v2 should know about the new version of API V3. No API Key Required There is no need of API key to use Google Maps API v3. Therefore, no need to apply for API keys and obviously URI to API becomes shorter. You just need to add reference script (given below) to your page.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
In referencing script, you just have to specify whether your device has sensor for determining your current locaation (like GPS) or not. If you don’t have sensor, use ‘sensor=false’ and if you have sensor then use ‘sensor=true’. Change in global variable naming Before API v3, the global variables were using letter capital ‘G’ to distinguish themselves from local variables (eg. GLatLng), but in v3 and later, you refer them as object of google.maps (e.g. google.maps.LatLng). Creating a Map with Google Maps API v3 For map initialization, we need to call constructor of Map class. It takes 2 arguments one is reference of HTML element to insert map (I’m taking it as <div id=”map_canvas”></div>) and other is options having set of properties. Create object of LatLng by passing coordinates to specify center of the map.
var myLatlng = new google.maps.LatLng(95.1, 16.0);
//Create an object variable containing set of properties, to pass to the map
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

// Intializing map by calling constructor
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
There are lots of options for properties to pass to the map but only these three are mandatory: zoom: It is a number to set initial zoom level of the map center: It sets center of the map by taking coordinates of type google.maps.LatLng mapTypeId: It specifies initial type of map. It is an identifier of google.maps.MapTypeId class. Dont forget to explore other interesting options that you can pass on to the map. Dropping markers and event handling for the map: You can drop markers on map by passing objects of Map and LatLng to the constructor of class Marker. Also, these markers can have an info window that can contain user defined messages and you can handle events for appearing disappering of info window. In this example, I will drop a marker at an address ‘london’. The google.maps.Geocoder class will help us gecode the address.
// Initializing variable with location name</pre>
var address = 'london';

// Creating new object of class Geocoder
var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

// Get latlng for the given location name
var latlang = results[0].geometry.location;

// Set given location as center of the map
map.setCenter(latlang);

// Place marker
var marker = new google.maps.Marker({
map: map,
position: latlang
});
Adding Info Window and showing it on the Mouseover action The above code will place the marker at the place london. Now I will add an info window and attach a listener to open the info window at the mouseover action.
// Create info window. In content you can pass simple text or html code.
var infowindow = new google.maps.InfoWindow({
content: "<div>Hello! World</div>",
maxWidth: 10
});

// Add listner for marker. You can add listner for any object. It is just an example in which I am specifying that infowindow will be open on marker mouseover
google.maps.event.addListener(marker, "mouseover", function() {
infowindow.open(map, marker);
});
});
Now when you will mouse over on marker, you will get an popup info window showing content “Hello! World”. Enjoy the new robust Google maps API V3. References 1. Google API Documentation: https://developers.google.com/maps/documentation/javascript/reference
  • http://twitter.com/Vinni_F Vinni F.

    Thank you, it was useful. 

  • Susan

    thank you so much!!! very very helpful this was!!

  • sujith

    thank u

  • Josan

    Pretty much all you need to start your own google maps app!

  • etechpulse

    I found this plugin / utility library for the google maps API v3, called InfoBubble. It does a great job at making it easy to have highly customized Info Window.

    Thanks