How to Add a Custom Icon to a Google Map
In Google Maps, you can use markers to point out a location on a map. By default, Google Maps will use a red marker
icon with a curved top and a pointed bottom, as shown in the following image:
There may be times when you want to use a custom icon instead of this default one. Here's how to do that.
- Start with the following basic Google Map with a default icon. Make sure to replace
YOUR_API_KEY
in thescript
tag with your API key that you got from https://developers.google.com/maps. - Locate an image that you want to use as the custom icon an assign it to a variable. The size of the image doesnt matter, because Google will automatically scale the image to the correct size. However, simple images with transparent backgrounds and images that are around the right size will look best when used as markers.
- Set the
icon
property of the marker's options object to the name of the image variable. - Open your web page in a browser to see the results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Basic Map</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
function initMap() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(37.5, -122),
mapTypeId: 'roadmap'
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var goldenGatePosition = {lat: 37.8199,lng: -122.4783};
var marker = new google.maps.Marker({
position: goldenGatePosition,
map: map,
title: 'Golden Gate Bridge'
});
}
</script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
position: goldenGatePosition,
map: map,
title: 'Golden Gate Bridge',
icon: image
});
You can find detailed documentation for markers at developers.google.com/maps/documentation/javascript/markers.