If you open your location detail view in a browser at a URL such as http://localhost:8000/locations/eiffel-tower, you will see something similar to the following:
Clicking on the map pin will open an info window showing the title and the address of the location:
Since scrolling within maps on mobile devices can be problematic due to scroll-within-scroll issues, we have opted to hide the map on small screens (less than or equal to 480 px width), so when we resize the screen down, the map eventually becomes invisible, as in the following:
Let's take a look at the code. In the template, we have the location title and description, followed by a <div> element with the map ID, as well as the data-lat (latitude), data-lng (longitude), and data-address custom attributes. These make up the content block elements. Two <script> tags are added to the js block that comes at the end of the <body>—one being the location_detail.js described next, and the other is the Google Maps API script, to which we have passed our Maps API key, and the name of the callback to invoke when the API loads. In the LocationDetail view, we added our MAPS_API_KEY from settings as extra context, so that it could be used here.
In the JavaScript, we create a Location class using a prototype function. This function has a static init() method, which is given as the callback to the Maps API. When init() is called, the constructor is invoked to create a new singleton Location instance. In the constructor function, a series of steps are taken to set up the map and its features, as in:
- First, the map case (container) is found by its ID. Only if that element is found do we continue.
- Next, we find the geographic coordinates using the data-lat and data-lng attributes, storing those in a dictionary as the location's coords. This object is in the form understood by the Maps API, and will be used later.
- The data-address is read next and stored directly as the address property of the location.
- From here, we start building things out, beginning with the map. To ensure that the location will be visible, we set the center using the coords pulled from data attributes earlier.
- A marker makes the location obvious on the map, positioned using the same coords.
- Finally, we build up an info window, which is a type of pop-up bubble that can be displayed directly on the map using the API. In addition to the address retrieved earlier, we look for the location title based on the .map-title class it was given in the template. This is added as an <h3> heading to the window, followed by the address as a second <p> paragraph. To allow the window to be displayed, we add a click event listener to the marker that will open the window.