Markers is one of the core features in Google Maps and an effective way of displaying places on a map. In this article I will show you how to add a basic marker to a map and also how to add some interactivity to it.
Adding a marker
A marker is a type of overlay, just as it’s siblings polyline and polygon. To add a basic marker to a Google Map all you have to do is to define it with a coordinate of type GLatLng using the GMarker constructor.
// Init the map
var map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(59.5, 14.0), 6);
// Create a marker
var marker = new GMarker(new GLatLng(59.0, 13.80))
// Add the marker to the map
map.addOverlay(marker);This code will create a map and add a basic marker to it.
Making it draggable
To make the marker draggable is really easy. the GMarker constructor takes options in the form of an object literal as it’s second parameter. You simply add {draggable: true} after the coordinates.
var marker = new GMarker(new GLatLng(59.0, 13.80), {draggable: true});Voila, the marker is now draggable. This is excellent for applications where you want the user to define places on a map.
Adding a Tooltip
Adding a tooltip is done the same way as making the marker draggable. It’s done using another option called title. It will create the same kind of tooltip that adding the attribute title to HTML-elements does.
var marker = new GMarker(new GLatLng(59.0, 13.80), {
draggable: true,
title: 'Drag me'
});This code will produce a standard tooltip when putting the cursor over the marker.
There are a lot of other options you can add to a marker. For a full list check out the documentation.
Adding an Info Window
An InfoWindow is a great way to show more information about a location. It’s done by adding a click event to the marker with the help of the GEvent class. When the click event is triggered, the InfoWindow is opened using the method GMarker2.openInfoWindow().
// Adding a click event to the marker
GEvent.addListener(marker, "click", function() {
marker.openInfoWindow('My InfoWindow');
});The result is a standard GInfoWindow which open up when you click the marker. You can close it by either clicking the closing X in the upper right corner or by clicking somewhere in the map.
GMarker.openInfoWindow is the most basic variant of InfoWindows in the API and can only contain plain text. Other types can contain HTML and have tabs. For a full description of the other options available check out the Documentation.
Preventing InfoWindow offset
When using a combination of drag and drop and infowindow a weird thing can happen. It’s that the InfoWindow stay in the same place while the marker is moved.
To prevent this we have to make sure to close the InfoWindow when initiating the drag and drop operation. This is done by listening to the event with GEvent.addListener and close the window with GMap2.closeInfoWindow().
// Close InfoWindow at dragstart
GEvent.addListener(marker, 'dragstart', function() {
map.closeInfoWindow();
});Live example
I’ve put together a live example which contains all the techniques described in this article.
Conclusion
Markers is an effective way of displaying places on a map. It has a simple yet powerful set of methods to create interactivity. The techniques described here are just a few of all the things you can do, but I think they’ll provide a good starting point.
My Google Maps book
If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com
July 27, 2009 at 7:17 am
Thanks.. 🙂
December 13, 2009 at 6:41 pm
Thanks. I managed to get your code working straight away as opposed to struggling with the examples etc. on the Google site!
January 1, 2010 at 8:33 am
simple and easy to understand
thanks
February 14, 2010 at 7:22 am
Thanks for a great post! Very informative and easy to follow.
February 24, 2010 at 3:48 pm
Hi Gabriel
Thank you for this simple tutorial.
Is there a way to display a sticker on the map with a link? For example I want to display country or region names that when clicked go to a different url.
Paul
February 24, 2010 at 5:12 pm
Paul: You could probably just use a regular marker but replace the marker icon with your sticker. Then in the click event, instead of opening an infoWindow, redirect the browser to the desired url.
To change the icon use the
setIcon()method of the marker.marker.setImage('path/to/your/image.png');And to redirect to a different url, add the following event listener:
GEvent.addListener(marker, 'click', function() { window.location.href = 'your/url/'; });April 10, 2010 at 11:26 pm
hello.. Gabriel
I have almost the same question like Paul, I want to add tag html to the map.. What is it possible? and how to do it..?
🙂
April 28, 2010 at 7:00 am
Hey..
I am not being able to use the MarkerManger Class. Do I need to import anything?
Help me plz……..
June 7, 2010 at 2:43 pm
Anyone know how to make a marker appear in the position you click in?
This was easy in v2!
I can only seem to make it appear in the position I set
var latlng = new google.maps.LatLng(41.012379,28.975926);
google.maps.event.addListener(map, ‘click’, function() {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: ‘Event’,
draggable: true
});
});
June 7, 2010 at 2:55 pm
Allan: This article is about v2 of the API but it’s really easy to do in v3 as well.
Note! The bit below is about the Google Maps API v3 and does not apply to v2 that is described in this article.
The click event on the map returns a MouseEvent object which has a latLng property. So by passing a variable in the callback function you can use that to set the clicked position.
google.maps.event.addListener(map, 'click', function(e) { var marker = new google.maps.Marker({ position: e.latLng, map: map, title: 'Event', draggable: true }); });August 10, 2011 at 2:05 pm
Please help! I don’t know what I have done – but when I call up Google Maps no basic markers appear. I need then reinstated. Can you tell me how?
February 13, 2012 at 1:13 am
Great post. Here’s a geocoding feature that will make your applications smarter and more interactive. Instead of displaying plain text, any address-centric data can be displayed on your site with a live map from Yahoo! or Google. Users will get more accurate information and be engaged in the process http://www.caspio.com/extend/platform-extensions/map-mashup.aspx
July 19, 2012 at 2:32 pm
Hi Everyone i integrated googlemaps draggable marker but i need to limit the dragging of the marker to a restricted area how can i do that!??
October 21, 2012 at 9:09 pm
hiya,
thanks for the article!
Can you tell me what will work best on the following problem; I made a map containing about 300 markers (custom icons) and colored fields , marking specific area’s. The list of markers is too long for the sidecolumn and due to that Google map chops the list AND AT THE SAME TIME the maps into portions, so not everything is shown at the same time.
It is essential to show everything on the map at the same time and I am breaking my head over this. Can you advice me?
Thank you so much!