marker Icon Google Maps With Javascript

Customizing Google Maps: Custom Markers

Overview

This lesson teaches you to:

• Customize map markers.
• Customize marker icons for different markers.

Description

Custom icons display a different image in place of the default Google map marker pin. In this lesson, you'll replace the default marker image with one that represents the map feature it's placed on.

Try it out

Customize a map marker

Specify the icon option on MarkerOptions to change the marker’s icon. The icon option can be either a string (the URL to the marker icon), or an Icon object.

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: iconBase + 'schools_maps.png'
});

Customize marker icons for different markers

We can also change the marker icon, depending on the type of feature the marker's being added to. Each point of interest in the list of campus features has a type attribute. We'll use this to change the icon accordingly.

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
  parking: {
    icon: iconBase + 'parking_lot_maps.png'
  },
  library: {
    icon: iconBase + 'library_maps.png'
  },
  info: {
    icon: iconBase + 'info-i_maps.png'
  }
};
function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map
  });
}