Customize the google maps marker

Tutorial

To specify an icon, set the marker's icon property to the URL of an image. The Google Maps API will size the icon automatically.


$.post('http://maps.google.com/maps/api/geocode/json?address='+address,function(data){
var lat = data['results'][0]['geometry']['location']['lat'];
var lon = data['results'][0]['geometry']['location']['lng'];

var map;
function initialize(lat, lon) {

var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(lat, lon)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = '../../img/maps.png';
var myLatlng = new google.maps.LatLng(lat, lon);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
title: address
});
}

google.maps.event.addDomListener(window, 'load', initialize(lat,lon));
});

The result :


If you get some problems, contact me at [email protected]