How to: Use a custom map from Google with its custom ID in Brick Maps Element as custom map style

How To
1

Hello,
I have a question for Bricks Google Maps element.

How do I get a custom map from Google Maps shown in Bricks Maps Element?
In Google Dev https://console.cloud.google.com/google/maps-apis/studio/maps
I can make a custom map and get its ID.

Then Google provides me with this example JSON(?) code:

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

( I have to change the lat / lng and MAP_ID of course… )

from here Google Maps Platform  |  Google Developers
so I can put my custom style in.

I tried to use the code in settings custom map style, to no avail.

How can I get my custom map? :slight_smile:

It is quite important to use this ID, as I can change the showings of competitors of customer. :wink:

2

Anyone an idea? Will it change with Bricks 1.8? As there is talk about the Google Fonts API change, maybe someone looking into maps api also? @timmse :slight_smile:

3

Hey,
No, there are no changes planned with the google maps.

If it’s just about the styling: You can create a custom map style with snazzy maps and add the JSON array to your map using a filter:

Best regards,
timmse

1 Like
4

Thank you for answering. Though it is not the one I was hoping for. :slight_smile:

5

This seems to be broken, i have tried using this: Filter: bricks/builder/map_styles – Bricks Academy in a code snippet and didn’t work. On the Map i have tried uploading the json code in the custom map and the map disappears. All the other preset maps do work correctly.