Add a marker with Google Maps JavaScript API v3 In this article I will explain how to add a marker and using a custom icon replacing the standard marker of Google Maps.

Add a marker with Google Maps JavaScript API v3

by September 24, 2013

Markers are simple icons that point the position of a particular location on a map.
We have already seen how to embed a map on a webpage. In this tutorial I will explain how to add a marker and how to use a custom icon, replacing the standard image from Google Maps.

You may be interested in Quick and simple sharing a location with Google Maps

Before you start this tutorial view a demonstration of the map or download the necessary code.

DEMO DOWNLOAD

To add a marker on a map we have to make use of google.maps.Marker constructor and set specific marker options.

JavaScript /map.jsen.marnoto.com
 // map center coordinates
 var barraBeach = new google.maps.LatLng(40.640416,-8.749541);

 // marker coordinates
 var lighthouseAveiro = new google.maps.LatLng(40.642851,-8.747596);

 function initialize() {
   var mapOptions = {
      center: barraBeach, // map center coordinates
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.SATELLITE
   };
   var map = new google.maps.Map(document.getElementById("map-canvas"),
 mapOptions);
   
   // marker options
   var marker = new google.maps.Marker({
      position: lighthouseAveiro, // marker coordinates
      map: map,
      title:"Lighthouse of Aveiro"
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

To add a simple marker on the map requires adding a new variable to the initialize() function, which is designated by marker.The variable marker makes a call to the google.maps.Marker constructor and sets custom properties values: position, map e title.

  • position - values of latitude and longitude of the marker. The global variable lighthouseAveiro defines latitude and longitude coordinates for this marker. Those values have to be passed through the google.maps.LatLng() constructor. This class creates a LatLng object representing a geographic point.
  • map - in this case the marker is added to the existing single map defined by the variable map.
  • title - The title of the marker is visible when the mouse cursor is placed over the marker.

Changing the image of a Google Maps marker with API v3

The previous example adds a marker on the map with the standard image from Google Maps but there is an option that allows you to use custom images.
The icon option allows you to set a URL to the intended image.

JavaScript /map.jsen.marnoto.com
 ...

 // variable that sets the URL to the new image
   var myImage = 'images/lighthouse.png';
 
 // variável que define as opções do marcador
   var marker = new google.maps.Marker({
      position: lighthouseAveiro,
      map: map,
      title:"Lighthouse of Aveiro",
      icon: myImage // set new image
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

The API automatically resizes the image to use as a marker. However it is advisable to use images with a width of 20px and height of 32px. To use the standard Google Maps icon just remove the option icon: myImage.

View example

Free icons to use in Google Maps: http://mapicons.nicolasmollet.com

CURIOSITY
The Lighthouse of Aveiro is located at Barra beach, county of Ílhavo, with 62m high, is the tallest lighthouse in Portugal and the second highest in the Iberian Peninsula.


Download the necessary files for this example

All are welcome to share doubts and comments. Use the comment box so that all can share the info and the knowledge.


Miguel Marnoto

My expertise in the Google Maps JavaScript API v3 is a consequence of my enthusiasm about maps and recognition of the importance that Google Maps service has on people lives.

2 comments to ''Add a marker with Google Maps JavaScript API v3"

COMMENT
  1. Nice tutorials. Can you please share how can i able to save the markers in mysql database in php.
    thanks..

    ReplyDelete
    Replies
    1. Excellent tutorial, it helped me a lot. Now I would like that instead of an initial position, I can geolocate the user. How could I add that?

      Delete

Note: Only a member of this blog may post a comment.