CODEWITHSUNDEEP
javascriptjsonapimapsgeojson
Thomas
Thomas

Reputation: 95

Google maps Geojson infowindow

I am trying to build a website which displays certain meteor strikes throughout the last 200 years in Europe. I got the markers down but I'm having a hard time figuring out how to make them pop-up an info window with the rest of the information that is attached (mass, id, location etc.) can anyone help me out here?

  var map;
  function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 45, lng: -1}
  });

  map.data.loadGeoJson(
      'Meteorite.geojson');
  }
  function information(results) {
  map.data.addGeoJson(results);
  map.data.addListener('click', function(e) {
    infowindow.setPosition(e.latLng);
    infowindow.setContent(e.feature.getProperty("id"));
    infowindow.open(map);
  });
}

Upvotes: 6

Views: 3785

Answers (1)

beaver
beaver

Reputation: 17647

Here is an example using map.data.addGeoJson (loading geojson from a local variable), but identical is with map.data.loadGeoJson. On click over a feature infoWindow shows the properties associated:

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

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 8,
    center: {lat: 45.062, lng: 7.67},
    mapTypeId: 'terrain'
  });

  // Load GeoJSON.
  map.data.addGeoJson({
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "title": "Mount Viso",
          "type": "Point",
          "coordinates": [7.090301513671875,44.66743203082226]
        },
        "properties": {
          "name": "Mount Viso",
          "description": "the highest mountain of the Cottian Alps",
          "link": "https://en.wikipedia.org/wiki/Monte_Viso"
        }
      }, {
        "type": "Feature",
        "geometry": {
       	  "title": "Gran Paradiso",
          "type": "Point",
          "coordinates": [7.266082763671875,45.51837616409498]
        },
        "properties": {
          "name": "Gran Paradiso",
          "description": "a mountain in the Graian Alps in Italy",
          "link": "https://en.wikipedia.org/wiki/Gran_Paradiso"
        }
      }]
    });
    
    map.data.addListener('click', function(event) {
     var feat = event.feature;
     var html = "<b>"+feat.getProperty('name')+"</b><br>"+feat.getProperty('description');
     html += "<br><a class='normal_link' target='_blank' href='"+feat.getProperty('link')+"'>link</a>";
     infowindow.setContent(html);
     infowindow.setPosition(event.latLng);
     infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
     infowindow.open(map);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
    height: 100%;
    margin: 0;
    padding: 0;
}
<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

Upvotes: 13

Related Questions