javascript - Google maps Geojson infowindow - Stack Overflow

admin管理员组

文章数量:1277405

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);
  });
}

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);
  });
}

• javascript
• json
• api
• maps
• geojson

Share Improve this question Follow edited May 6, 2021 at 4:37 Jason Aller 3,6522828 gold badges4141 silver badges3939 bronze badges asked Jan 7, 2018 at 14:39 ThomasThomas 9511 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

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/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/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./maps/api/js"></script>

本文标签： javascriptGoogle maps Geojson infowindowStack Overflow