In usability we trust

UX and all things web

Basic operations with markers in Google Maps

Google MapsMarkers 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.

marker

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.

Watch the live example.

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

14 Comments

  1. Thanks. I managed to get your code working straight away as opposed to struggling with the examples etc. on the Google site!

  2. simple and easy to understand
    thanks

  3. Thanks for a great post! Very informative and easy to follow.

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

  5. 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/';
    });
    
  6. 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..?

    :)

  7. Hey..

    I am not being able to use the MarkerManger Class. Do I need to import anything?
    Help me plz……..

  8. 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
    });
    });

  9. 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
      });
    });
    
  10. 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?

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

  12. Shashi Chakilam

    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!??

  13. Expertisecentrum Voor cultuure

    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!

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>