Make Infowindow behave like modal window (Google Maps API v3)

Question

Is there a way to make the Google Maps InfoWindow behave more like a modal window? Here are my goals:

• Take up all or most of width and height of screen
• Don't move the map automatically when the Marker is clicked

If anyone could point me in the right direction to accomplish these goals, it would be greatly appreciated. Thank you!

Google Maps API v3

Answer 1

By the sounds of it you will have to make a custom modal instead of using an info window.

I suggest you take a look at using Bootstrap to achieve this. In the documentation they explain with examples very nicely how to use the modal. It is also styled very nicely.

Although if you want it to take up most of the screen space it might be necessary to build your modal completely custom.

You can then just Hide()/Show() your custom modal on a click event.

Answer 2

It's actually pretty simple. Ignore the map info boxes and simply put an extra div in your html fixed positioned at 0,0 that has a width and height of 100%.

Hide it in your css and then with your marker 'click' event function, show the div and insert your content into it.

Full screen done.