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 DOWNLOADTo add a marker on a map we have to make use of google.maps.Marker constructor and set specific marker options.
// 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.
...
// 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 exampleFree icons to use in Google Maps: http://mapicons.nicolasmollet.com
CURIOSITYThe 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.
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.
Nice tutorials. Can you please share how can i able to save the markers in mysql database in php.
ReplyDeletethanks..
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