Issue with Google Maps Marker Integration

Anvil Q&A
1

I have an issue with a google maps click event trying to create a marker, and I’m not sure if it’s something that I’ve not done or whether it’s a bug.

I have a click event for my google map that registers the location of the click in a variable.
This then creates a marker with the position of that variable, which is the stored click location.

The variable is storing the location alright, as it’s printing to console (Which I’ve added to bug test)
It’s giving me an error when trying to place the marker, though.
The code I’m using is:
map.add_component(marker)
and it’s giving me the error:
AttributeError: ‘<native JS>’ object has no attribute ‘add_component’ at [Location in Code]

any ideas? Or am I missing something blazingly obvious?

2

Hi @bob-makki and welcome to the Forum!

Here’s how I’d write the click handler for adding a marker to a GoogleMap component:

def map_1_click(self, lat_lng, pixel, **event_args):
    """This method is called when the user clicks on the map."""
    marker = GoogleMap.Marker(
      animation=GoogleMap.Animation.DROP,
      position=lat_lng
    )
    self.map_1.add_component(marker)

where self.map_1 refers to a GoogleMap component that I added in Design view.

Where are you getting your map object from?

3

Hi, Thanks for the reply.

I am using the build in map object, but forgot to reference it as self before trying to add the marker, such a trivial mistake, haha

Thank you again for your reply and formatting.