🔧 Manipulating the map in JavaScript

How to update from Smart Map to Google Maps

Follow the instructions below to learn how to update to the new Google Maps plugin...

In Smart Map, you were relegated to JavaScript in order to accomplish things which could not otherwise be done in Twig. In the new Google Maps plugin, JavaScript is treated as an equal partner alongside Twig (and PHP).

• JavaScript
• Twig
• PHP

const map = googleMaps.getMap(mapId);

Maps

When creating a map, it's possible to manually specify the ID of each map. But if you don't specify an ID, one will be assigned to the map automatically.

For automatically generated IDs, the naming pattern has changed between versions:

// OLD: Automatically incremented from 1
'smartmap-mapcanvas-{int}'

// NEW: Randomly generated string of six lowercase letters
'map-{random}'

We've also changed how you access an existing map:

// OLD
const map = smartMap.map['my-map'];

// NEW
const map = googleMaps.getMap('my-map');

Overall, the new map object is much more powerful and flexible. Once you have a map object in hand, it's easy to chain other configuration commands.

Markers

You can add location markers when initially creating the map, or later using the markers method.

• JavaScript
• Twig
• PHP

map.markers(locations, options);

In JavaScript, you can also access the raw Google Marker (opens new window) object:

const marker = map.getMarker(markerId);

Info Windows

You can easily create info windows using Twig or PHP.

In JavaScript, you can also access the raw Google Info Window (opens new window) object:

const infoWindow = map.getInfoWindow(markerId);

For more information, see the guide on Opening Info Windows...

Additional Functions

For a complete list of what is now possible in JavaScript, read up on the following concepts:

• Map Management
• Universal Methods
• Additional JavaScript Methods

New Documentation

See the complete new Dynamic Maps documentation.