kori reine

When upgrading markers to AdvancedMarkerElement, I found that the Google documentation was not comprehensive, so I'd like to offer guidance here.

AdvancedMarkerElement class reference

Google Migration Guide

Template updates


  <map-marker
    #markerElem="mapMarker"
    [options]="marker.options"
    [position]="marker.position"
  ></map-marker>

Current:


  <map-advanced-marker
    #markerElem="mapMarker"
    [options]="marker.options"
    [position]="marker.position"
  ></map-advanced-marker>

Marker Object

Optional: Custom markers


  const div = document.createElement('div');
  const image = document.createElement('img');
  image.src = 'https://some-image-souce';
  // if you want to set a height:
  image.style.height = '50px';
  div.appendChild(image);

  // if you want the map marker to have text
  const markerText = document.createElement('div');
  markerText.innerHTML = 'Some text';
  // optionally add a class
  markerText.className = 'some-class-name'; // class must be in app's global scss/css file
  markerText.style.color = '#000';
  div.appendChild(markerText);

Then, proceed with creating the new marker object:


  const markerElement = new google.maps.marker.AdvancedMarkerElement({
    position: { lat: -34.397, lng: 150.644 }, // google.maps.LatLng object
    zIndex: 1,
    content: div, // this is the custom marker from above
    map: this.map.googleMap // or whatever you call your GoogleMap variable
  });

Removing a marker from the map

Previously: marker.setMap(null) - Now: Now: marker.map = null

Map Options

The google map options (google.maps.MapOptions) must now contain a map ID (string).


  this.map.googleMap.setOptions({
    styles: [
      {
        featureType: 'poi',
        stylers: [{ visibility: 'on' }] // or 'off'
      }
    ]
  });

Current:


  const styledMap = new google.maps.StyledMapType([
    {
      featureType: 'poi',
      stylers: [{ visibility: 'on' }] // or 'off'
    }
  ]);
  this.map.googleMap.mapTypes.set('styled_map', styledMap);
  this.map.googleMap.setMapTypeid('styled_map');

Marker Options

google.maps.MarkerOptions no longer has draggable:false - this should be called as gmpDraggable: false