Load content string to infoWindow after click on marker

Question

I am making a google maps Application using huge database of image links. I am talking about thousands of records from a database. Now what I need is to load the image into the infoWindow after clicking on marker. Because considering the amount of markers and loading each single image takes a lot of time and make my application unusable, let's have this updated code from google documentation as example:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 2,
            center: {lat: -33.865427, lng: 151.196123},
            mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');

        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);

    }
    var marker;

    function eqfeed_callback(results) {
        var heatmapData = [];
        for (var i = 0; i < results.features.length; i++) {
            var coords = results.features[i].geometry.coordinates;
            var latLng = new google.maps.LatLng(coords[1], coords[0]);
            heatmapData.push(latLng);

            if(i%2==0){
                var contentString =
                    '<div class="photo">' +
                    '<IMG BORDER="0" ALIGN="Left" width="150px" height="100px" SRC="https://f4.bcbits.com/img/0008736837_10.jpg">'   +
                    '</div>';
            }
            else{
                var contentString =
                    '<div class="photo">' +
                    '<IMG BORDER="0" ALIGN="Left" width="150px" height="100px" SRC="https://www.drupal.org/files/ship-hires.jpeg">'   +
                    '</div>';
            }


            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            marker = new google.maps.Marker({
                map: map,
                position: latLng
            });

            addListener(marker,map,infowindow);
        }
        var heatmap = new google.maps.visualization.HeatmapLayer({
            data: heatmapData,
            dissipating: false,
            map: map
        });

        function addListener(marker,map,infowindow) {
            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
        }

    }
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAq3U7rLNpim50Qk_zbq9mur8VFLAeqy-4&libraries=visualization&callback=initMap">
</script>
</body>
</html>

So is there a way to load image after click on marker?

Answer 1

Removing the content from the InfoWindow constructor and setting the content in the click event listener function will address your issue.

change:

var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

to:

var infowindow = new google.maps.InfoWindow();

Then set the content in the marker click event listener.

Load content string to infoWindow after click on marker

Question

1 answers

solution1
3 ACCPTED 2017-04-17 14:09:46

Load content string to infoWindow after click on marker

Question

1 answers

solution1 3 ACCPTED 2017-04-17 14:09:46

solution1
3 ACCPTED 2017-04-17 14:09:46