Check out my HTML:
{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<style>
/* Customize the dimensions of the div element that houses the map */
#map {
height: 700px; /* Keep the height at 400 pixels */
width: 100%; /* Adjust the width to fill the whole page */
}
</style>
<!-- Define where the map will show up-->
<div id="map"></div>
<script>
// Initialize and display the map
function initMap() {
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: {'lat': 42.6803769, 'lng': -89.03211}});
{% for Listing in posts %}
new google.maps.Marker({position: {'lat': {{ Listing.lat }}, 'lng': {{ Listing.lng }}}, map: map});
{% endfor %}
}
</script>
<!-- Get the API from the given URL
* The async attribute lets the browser render the page while the API loads
* The key parameter has your unique API key (not required here)
* The callback parameter runs the initMap() function
-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=***&callback=initMap">
</script>
{% endblock %}
I want this line to take me to:
new google.maps.Marker({position: {'lat': {{ Listing.lat }}, 'lng': {{ Listing.lng }}}, map: map});
redirects to /preview/{{ Listing.pk }} when you click on it.
How do I make the marker clickable? I've seen examples online but they look different from mine. Maybe it's because I have a mix of Google Maps code and Django template elements. Can I enclose my marker inside an tag with my URL in "href="?]