CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Bradley Newman
Bradley Newman

Reputation: 41

Google Maps: How to display infowindows when you click on markers

I'm new to the Google Maps API and think I'm missing something basic. I'm loading locations from a JSON file and creating markers on a map. I'd like to be able to click on markers and have the infowindow be displayed. Right now, when I click on a marker nothing is displayed.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
<title>ListingCharts3</title>
<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;
    var infowindow;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'),
        {
            zoom: 4,
            center: new google.maps.LatLng(41, -96),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        map.data.loadGeoJson('https://DATA_FILE_URL.json');
    }

    // Loop through the results array and place a marker for each set of coordinates.
    window.eqfeed_callback = function (results) {
        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]);
            var marker = new google.maps.Marker
            ({
                position: latLng,
                map: map,
                title: results.features[i].address
            });

            //var content = results.features[i].address;
            var content = "foo";

            var infowindow = new google.maps.InfoWindow()

            google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
                return function () {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                };
            })(marker, content, infowindow));
        }
    }
</script>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
</body>
</html>

Upvotes: 1

Views: 2508

Answers (2)

Bradley Newman
Bradley Newman

Reputation: 41

A friend helped me solve it, this code works:

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: new google.maps.LatLng(41, -96),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

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

  map.data.loadGeoJson('https://JSON_FILE_URL.json', null, function (features) {

  map.data.addListener('click', function(event) {
  console.log(event);
      var myHTML =  event.feature.getProperty("address") + ", " + 
                                event.feature.getProperty("state") + ", " +
                    event.feature.getProperty("zipcode");
      infowindow.setContent("<div style='width:auto; text-align: center;'>" + myHTML + "</div>");
      infowindow.setPosition(event.feature.getGeometry().get());
      infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
      infowindow.open(map);
  });
 });
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">

Upvotes: 1

xomena
xomena

Reputation: 32100

I can see that you load GeoJSON data and use the data layer of Google Maps JavaScript API. I wonder why don't you use events for data layer, something like:

map.data.addListener('click', function(event) {
    if (event.feature.getGeometry().getType() === 'Point') {
        //Here your stuff for info window
        var content = "foo";
        var infowindow = new google.maps.InfoWindow();
        infowindow.setContent(content);
        infowindow.setPosition(event.feature.getGeometry().get());
        infowindow.open(map);
    }
}

Upvotes: 0

Related Questions