Modal loading Single or Multiple Google Maps

In this tutorial we’ll create a Contact Page with a Modal loading Single or Multiple Google Maps.This tutorial is a follow-up of 2 previous tutorials about Google Maps:

  1. Tutorial how to add a Google Map to a Contact Page
  2. Tutorial how to customize a Google Map

Contact Page with a Modal loading a Single Google Map

We start by creating a Contact Page with a Modal that will load a Google Map.
Demo - Contact Page with Modal loading a Single Map

You might be inclined to think that displaying a Google Map in a Modal is like showing remote content in a Modal. But as you will see in the code below that is not the case. We need the markup for a ‘normal’ Modal to display the map. The map is only rendered when we load it inside the Modal and doesn’t exist before that moment as a kind of remote content.

When you scroll the code above you might feel a bit intimidated by the length of it. But you’ll soon discover that most of it will be familiar and that we only need to focus on a few aspects of it. It seemed easier to me if I provided the complete markup for the contact page.

We can skip the first part (with the form and the address) because they will probably not require an explanation. For this tutorial I’ll also assume that you are familiar with how to create a simple Bootstrap Modal (visit the tutorial how to create a Bootstrap modal if you’re not yet familiar with them).

The Modal

The aspects of the Modal I do want to draw your attention to are:

  • The trigger (line 65)

    The link inside the address will display a small image that serves as the trigger for the modal.

  • The containing div (line 80)

    Inside the modal-body you’ll find the containing div for the map.

  • New Modal size(s)

    With Bootstrap version 3.1 new optional sizes for modals were introduced. With .modal-lg placed with .modal-dialog (line 73) the large sized modal is used for the map.

Opening the Map into the Modal

Almost all of the script will be familiar to you if you followed the previous 2 tutorials about Google Maps.

New is the part at the end (lines 142-145) where we use jQuery to render the Map inside the Modal. We first create a jQuery object that holds the entire modal. We then attach an anonymous function that will fire when the modal is shown.

Because the modal is still ‘hidden’ when the map is rendered (in lines 110-111) we need to trigger a display of the map when the div (with the ID ‘map-container’ in the modal body) is re-sized/opened (see line 143). Without this line of script the map would only occupy part of the modal body and the modal body would be filled with a grey background. A modal is a so-called dynamic element. It only exists when the script invokes it. And Google Maps will only display correctly inside dynamic elements when you trigger the ‘resize’ function (after invoking the dynamic element).

The last part of the anonymous function instructs the map to center around the location we defined earlier (in line 97).

Contact Page with a Modal loading Multiple Google Maps

Our next step is to write a script where the Google Map loaded in the Modal depends on the link that the user clicks on.
Demo - Contact Page with Modal loading Multiple Maps

The first part of the page looks the same as before. We start to see a difference in lines 56 where we find 2 addresses instead of only one. Notice that each of these two addresses contains a trigger (line 65 and line 80) and that they are linked to the same modal (with the ID ‘mapmodals’).

So we need a script which makes it possible to render a different map inside the Modal dependent on the trigger that is fired. The script above does exactly that and is based on an example I found created by Jennifer Tesolin. Below I explain how this script works:

Two triggers for one Modal

Each of these triggers contains a data-id attribute which we will refer to later on (in the script). The value for that data-id is different for each of the triggers.

Two conditions to decide which map will be displayed

At the start of the script we see that when we create the function (‘map-init’) we declare several variables (var_lati, etc.). The reason for this is that we need to able to fill those variables with different values (one set of values for our first map, a second set of values for our second map).

Directly below that you see that when we create the variable ‘var_location’ we do not provide the values for the location but instead use the variables ‘var_lati’ and ‘var-long’.

Now jump to line 153 (the lines in between contain approximately the same script lines as for our modal with one map). What we see in lines 153 till 172 is a statement that says: use the first set of values (lines 154-161) if the first condition (line 153) is true or (=else if) use the second set of values (lines 163-172) if the second condition (line 162) is true.

The two conditions require further explanation:

In line 151 we create a variable ‘var_mapTitle’. The value of this variable depends on the (modal-)trigger the user clicks on. If the user clicks on the trigger/link for the first address (in Venice) the value becomes “Peggy Guggenheim Collection – Venice”. This is the value of the data-id for that trigger (see line 65). Likewise if the user clicks on the second (modal-)trigger then the value becomes “Solomon R. Guggenheim Museum – New York”.

The script then compares the value stored inside ‘var_mapTitle’ with the string in our first condition (line 53). If the value for ‘var_mapTitle’ is exactly the same as that of the data-id in the first trigger (“Peggy Guggenheim Collection – Venice”) then the values in lines 54-61 is stored in the variables ‘var_lati’, etc. If the first condition is not met then a comparison is made with the second condition (line 162).

One function to bind it all

In line 150 we first create a jQuery object that holds all the elements in the document. With .on method we bind this object to a select group of click events (with .openmodal we limit the selection of click events to the two triggers because those are the only links that contain a class ‘.openmodal’ (see lines 65 and 80)). When a user clicks on one of those 2 triggers the anonymous function is executed.

A large part of what this anonymous function does has just been explained: it assigns a value to ‘var_mapTitle’ when a user clicks on one of the triggers and then checks if that value meets one of two conditions.

Final steps in script

The final two steps of the script are:

  • The modal header either displays “Peggy Guggenheim Collection – Venice” or “Solomon R. Guggenheim Museum – New York”. To achieve this we first look for an element inside the modal header that has the ID ‘title-id’. jQuery then selects that element (a h4 heading) and instructs it to fill that HTML element with the value stored inside ‘var_mapTitle’.
  • In the second step (line 175) jQuery selects the entire modal and then instructs the modal to show itself.

Modals with Maps and Infobox(es)

As a final step in this tutorial I integrated the Infobox we created in the previous tutorial into the Modals with Maps. You should be able to do this yourself after doing these tutorials. But if you run into problems and want to check how I did this you can find the markup for each in the accordion below:

Demo - Modal loading Multiple Maps with Infoboxes


Dennis - August 18, 2016 Reply

Thank you very much for sharing this. Works perfectly!

Agnaldo - November 19, 2014 Reply

Nice work, I liked it.

Flavio - November 8, 2014 Reply

Nice! works fine! Thanks a lot!

Dragan - October 17, 2014 Reply

Thank you so much! I’m trying to accomplish this for hours!

Add your comment

Related Posts