Pop-Up Info Windows on Click (Google Map)

Anvil Q&A
1

Hi all,

I’m still novice programmer but I heard about Anvil on the Talk Python podcast and have been really enjoying my time with it.

One issue I’m having is getting InfoWindows to pop-up when clicking a Google map icon. My goal is to have all the icons load in with no InfoWindows and then have the window pop-up above the icon when a user clicks on the icon.

Right now I have only one Form (MainPage) and a Module (MarkingModule). I’m using a database of longitude & latitude coordinates to place icons on the map using a simple for loop. In the for loop I’m assigning an event handler for a “click” on the icon. The issue comes when defining the marker_click function. If I pass arguments to the marker_click function they all fire off “automatically” and if I don’t I’m getting an error.

I resorted to just using the lat/lng coordinates of each point on click to search my data table and pop-up an alert with the information I want, but this is what I would like to do long term.

I’m open to any and all suggestions and I will answer any questions.

RELEVANT CODE:

MainPage

    class MainPage (MainPageTemplate):
      def __init__(self, **properties):
        # You must call self.init_components() before doing anything else in this function
        self.init_components(**properties)  
        # Any code you write here will run when the form opens.
      
      def autolocate_btn_click (self, **event_args):
        # This method is called when the button is clicked
        self.main_map.clear()
        MarkingModule.auto_mark_self(self.main_map)
        MarkingModule.mark_all(self.main_map)

      def locationsubmit_btn_click (self, **event_args):
        # This method is called when the button is clicked
        self.main_map.clear()
        MarkingModule.manual_mark_self(self.main_map, self.location_txt.text)
        MarkingModule.mark_all(self.main_map)

MARKING MODULE

    def mark_all(main_map):
      for row in app_tables.mastertable.search(Gender="G"):
        girl_marker = GoogleMap.Marker(
                          animation=GoogleMap.Animation.DROP,
                          position=GoogleMap.LatLng(row['Latitude'],row['Longitude']),
                          icon="http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Bubble-Pink-icon.png",
                          title=row['Name']
                                      )
        
        main_map.add_component(girl_marker)
        girl_marker.set_event_handler("click", marker_click)
2

Hi Nick,
welcome to the forum.

Please could you share your project, and I’ll try and help (though being the weekend it might be patchy).

If you publish your app and copy the link under “allow someone to copy my app” I can then see exactly what you see.

cheers,

3

Hi Nick,

Welcome to the forum! Glad you enjoyed the podcast :slight_smile:

Looks like you’re already almost there! Your only remaining challenge is to have the marker_click function know which row from app_tables.mastertable just got clicked on, right?

The good news is that the click handler gets the sender as an argument - that is, the component that got clicked on (in this case, the marker). And you can add extra information to a component by setting a attribute on it. It’s Anvil convention to call this attribute tag. So in your case, you could do something like:

girl_marker.tag = row

… and then later …

def marker_click(sender, **event_args):
  row = sender.tag
  #...do something with the row now, eg:
  info_window = GoogleMap.InfoWindow(content = Label(text=row['name']))
  # ...and so on...

Here’s a simple example I’ve made - it defines a marker on the equator, and pops up a custom form when you click it:

https://anvil.works/ide#clone:LQP3FZGVK7ZBXG5X=2QB2IEUPGBI3APRJP7ZM4XMK

*PS: Want to make these nice pretty Python code blocks with syntax highlighting? Just type this to make a Python code block:

    ```python
     def my_python_source_code_here():
       pass
    ```

I’ve edited your post to add code blocks, so it’s easier to read.

2 Likes
4

Thank you so much! That totally cleared it up.

I ended up moving the related code back into the Form (out of the Module) so I could reference the Form map (using self.main_map) because I was having trouble referencing the map for GoogleMap.InfoWindow.open when the marker_click function was in the Module. I’m know it’s just my inexperience tho :slight_smile:

1 Like
5

Old post, but extremely helpful. Thank you!