Perform the following steps:

1. As we already have the app created, we will now need the template for the location detail:

{# templates/locations/location_detail.html #}
{% extends "base.html" %}
{% load static %}

{% block content %}
    <h2 class="map-title">{{ location.title }}</h2>
    <p>{{ location.description }}</p>
    <div id="map"
         data-lat="{{ location.latitude|stringformat:"f" }}"
         data-lng="{{ location.longitude|stringformat:"f" }}"
         data-address="{{ location.address }}"></div>
{% endblock %}

{% block js %}
    <script src="{% static 'site/js/location_detail.js' %}"></script>
    <script async defer
            src="https://maps-api-ssl.google.com/maps/api/js?key={{ MAPS_API_KEY }}&callback=Location.init"></script>
{% endblock %}

2. Besides the template, we need the JavaScript file that will read out the HTML5 data attributes and use them accordingly, as follows:

// static/site/js/location_detail.js
(function(window) {
    "use strict";

    function Location() {
        this.case = document.getElementById("map");
        if (this.case) {
            this.getCoordinates();
            this.getAddress();
            this.getMap();
            this.getMarker();
            this.getInfoWindow();
        }
    }

    Location.prototype.getCoordinates = function() {
        this.coords = {
            lat: parseFloat(this.case.getAttribute("data-lat")),
            lng: parseFloat(this.case.getAttribute("data-lng"))
        };
    };

    Location.prototype.getAddress = function() {
        this.address = this.case.getAttribute("data-address");
    };

    Location.prototype.getMap = function() {
        this.map = new google.maps.Map(this.case, {
            zoom: 15,
            center: this.coords
        });
    };

    Location.prototype.getMarker = function() {
        this.marker = new google.maps.Marker({
            position: this.coords,
            map: this.map
        });
    };

    Location.prototype.getInfoWindow = function() {
        var self = this;
        var wrap = this.case.parentNode;
        var title = wrap.querySelector(".map-title").textContent;

        this.infoWindow = new google.maps.InfoWindow({
            content: "<h3>"+title+"</h3><p>"+this.address+"</p>"
        });

        this.marker.addListener("click", function() {
            self.infoWindow.open(self.map, self.marker);
        });
    };

    var instance;
    Location.init = function() {
        // called by Google Maps service automatically once loaded
        // but is designed so that Location is a singleton
        if (!instance) {
            instance = new Location();
        }
    };

    // expose in the global namespace
    window.Location = Location;
}(window));

3. For the map to be displayed nicely, we need to set some CSS, as shown in the following code:

/* static/site/css/style.css */
#map {
    border: 1px solid #000;
    box-sizing: padding-box;
    height: 0;
    padding-bottom: calc(9 / 16 * 100%); /* 16:9 aspect ratio */
    width: 100%;
}

@media screen and (max-width: 480px) {
    #map {
        display: none; /* hide on mobile devices (esp. portrait) */
    }
}

4. If one is not already set up, add a detail view in views.py, as shown here:

# location/views.py
from django.conf import settings
from django.views.generic import DetailView

from .models import Location


class LocationDetail(DetailView):
    model = Location

    def get_context_data(self, **kwargs):
        context = super().get_context_data()
        context["MAPS_API_KEY"] = settings.MAPS_API_KEY
        return context

5. The MAPS_API_KEY should be passed into your application from an environment variable, rather than having it stored directly in the code under version control. This also gives you the flexibility to have separate keys for different environments. The resulting code in the settings might be as follows:

# settings.py
MAPS_API_KEY = os.environ.get("MAPS_API_KEY")

6. Add an associated URL rule using the slug field we added earlier:

# locations/urls.py
from django.urls import path

from .views import LocationDetail


urlpatterns = [
    path('<slug:slug>/', LocationDetail.as_view(),
         name='location-detail'),
]

7. Finally, make sure your locations app URLs are referenced in the project urls.py, like so:

# myproject/urls.py
urlpatterns = [
    # ...
    path('locations/', include('locations.urls')),
]