Google Maps Map ID with custom map style

Anvil Q&A
1

Hi There,

I am connecting with my Google Maps API key to serve maps in Anvil.
However I have created a custom map style in my Google developers console and connected a map id
to that style.

Is there a way for me to point to a custom map id I have created on Google to my Anvil map ?

Regards
Johan Ferguson

1 Like
2

Reviving this question, looking todo the same myself.

3

For anyone curious on how to get this working:

self.gmap = google.maps.Map(anvil.js.get_dom_node(self.gmap_container), 
                                {'zoom': 7,
                                 'center': { 'lat': 51, 'lng': 0.12 }, 
                                 'minZoom': 2,
                                 'disableDefaultUI': True,
                                 'draggable': True,
                                 'clickableIcons': False,
                                 'gestureHandling': 'greedy',
                                 'styles': None})

self.gmap_container is just a spacer, if you want the map to cover the entire page set the height parameter to 100vh and the spacing_above and spacing_below parameters to none. (You need to set the same spacing parameter to none on the parent form, otherwise you will notice a thin line at the top and bottom of the page)

You can pass a mapID (using the google cloud map styling) instead of styles.
But pasting in JSON styles is much quicker for testing various looks for your map. There are a bunch of styles here: https://snazzymaps.com/ just copy paste the JSON code into the styles value.

1 Like