Download the PHP package goldfinch/google-maps without Composer

🦅 Google Maps for Silverstripe

The module helps to create and manage Google Maps 🌏 in your Silverstripe project. It comes with comprehensive settings that you can use to your advantage. Whether you need to create simple or complex maps 🗺️, markers 📍 and more.

Install

1. Install module

2. Create Google Cloud API key with the required libraries

There are two API Libraries that need to be enabled for the proper work of this module.

• Maps JavaScript API for maps integration
• Maps Static API for maps thumbnails and previews

3. Add Google Cloud API key to your .env

4. Implement JavaScript front-end component

via Silverstripe Requirements PHP

via template require

via ES6 module

Available Taz commands

If you haven't used Taz🌪️ before, taz file must be presented in your root project folder cp vendor/goldfinch/taz/taz taz

Create map segment

Create InfoWindow template

Create MapBlock extension

Create Config extension

Create MapsAdmin extension

Create MapSegment extension

Create full Yaml config (further config amends are required, you might want to remove what you don't need)

Publish all available templates

Runs a bundle of all available vendor:google-maps:* commands

How to create a new map

Each Google Map is built on what is called Map Segment.

1. Create a map segment

Use Taz🌪️ to generate new Map Segment. It will quickly lead you through the setup and take care of it for you.

2. Create map record in CMS

Go to /admin/maps and add new map. In the Type we need to select our map segment that has been created the step before (should be selected by default). You can go ahead, add markers and check out the Settings tab if you want.

3. Custom Info Window template (optional)

This module comes with various settings for Maps and Markers. You can also add Info Window for markers and easily customize it for your needs. All you need to do is create your custom InfoWindow template by using Taz

Once it's been created, you can go to any marker record you added to your map and select your custom template in Info Window Template dropdown.

Usage

Across templates

Using GoogleMaps global provider.

Render map segment template by type

Render map frame only by type

Render map segment template by ID

Render map frame only by ID

Using elemental block

If you prefer using silverstripe/silverstripe-elemental, you can take a look at Map block that already comes with this module.

Sidenotes

Google Maps iframes might have a blue border that you want to get rid of.

As of February 21st, 2024, Marker is deprecated. Please use AdvancedMarkerElement instead.

Events

• Map events
• Marker events
• AdvancedMarkerElement events
• Info Window events

Available JavaScript callback events

Previews

Admin

Map segment

Map segment settings

Map's markers

Marker item

Marker settings

License

The MIT License (MIT)