Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
  });
}
like image 543
Thomas Avatar asked Jan 07 '18 14:01

Thomas


People also ask

How do I add GeoJSON to Google Maps?

You can load and display a GeoJSON file by calling the loadGeoJSON() method of the data object.

What is Google map infowindow?

An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map. Info windows appear as a Dialog to screen readers.

How do I get rid of infowindow in Google Maps?

After constructing an InfoWindow, you must call open to display it on the map. The user can click the close button on the InfoWindow to remove it from the map, or the developer can call close() for the same effect.

How do I edit infowindow on Google Maps?

To customize the info window in Classic: Click Visualize > Map. Click the "Configure info window" link above the map and select the template to use.


1 Answers

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>
like image 139
beaver Avatar answered Oct 13 '22 08:10

beaver