0

I'm currently trying to create hyperlinks to posts that are currently displayed on a google map. The map shows each post based on its latitude and longitude. The code below links to the title of each post, but the issue with that is the title will often times be uppercase or have spaces. Here's what I have:

`

    <div class="court-listing" id="map-canvas"></div>

    <script>
        function initialize() {
            var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: {lat: 40.674, lng: -73.945},
      zoom: 12,
      styles: [
        {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{color: '#263c3f'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#6b9a76'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#38414e'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{color: '#212a37'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{color: '#9ca5b3'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#746855'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#1f2835'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{color: '#f3d19c'}]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{color: '#2f3948'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{color: '#17263c'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#515c6d'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#17263c'}]
        }
      ]
    });
            var bounds = new google.maps.LatLngBounds();
            function addMarker(lat, lng, title) {
                var location = new google.maps.LatLng(lat, lng);
                var marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    title: title
                });
            var infowindow = new google.maps.InfoWindow({
      content: '<a href="' + marker.getTitle() + '">' + marker.getTitle() + '</a>'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
    });
                bounds.extend(location);
            }
             {% for obj in object_list %}
                 addMarker({{ obj.location.latitude }}, {{ obj.location.longitude }}, "{{ obj.title }}");

            {% endfor %}

            map.fitBounds(bounds);

        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script> `

This is what I've defined in my model to link to each post:

{{ obj.get_absolute_url }}

Is there an easy way I can include this within the infoWindow? I'm assuming it needs to somehow fit within the marker array, but I haven't been able to successfully add it.

Apologies in advance, I'm a Django newbie...this seemed to be much more straightforward in Rails.

Any tips would be amazing.

pjh_1222
  • 1
  • 4
  • i think you can add custom data to marker as key:value, maybe this answer will help you https://stackoverflow.com/questions/11378450/google-map-api-v3-how-to-add-custom-data-to-markers/11378539 – Taha Azzabi Jan 20 '18 at 00:40
  • Thank you @TahaAzzabi, this was helpful. I actually just created a for loop and was able to pull the URL from there. – pjh_1222 Jan 20 '18 at 05:23
  • greate, could you upvote my comment , thank you – Taha Azzabi Jan 20 '18 at 13:37
  • hey @TahaAzzabi I need to build up enough credit before I can upvote your comment. Hopefully soon. – pjh_1222 Jan 22 '18 at 17:51

0 Answers0