-1

I am attempting to display information stored from a local GeoJSON file on a Google Map, when a user clicks the marker. The information should then be displayed, as an info window. I am using the code, below to display the marker and text that is hard-coded into the html body, itself. How do I go about parsing the JSON file to display contents from it, dynamiclly?

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>Info windows</title>
    <style type="text/css">/* 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>

      // This example displays a marker at the center of Australia.
      // When the user clicks the marker, an info window opens.

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

        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Hartford City</h1>'+
            '<div id="bodyContent">'+
            '<p><b>Display Weather Data Here!</p>'+
            '</div>'+
            '</div>';

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

        var marker = new google.maps.Marker({
          position: hc,
          map: map,
          title: 'Hartford City'
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
    </script><script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCz672JUYjod6zzfxnBg_rzBNsBfbbjpJc&callback=initMap">
    </script></body>
</html>

Thank you!

user5834454
  • 147
  • 2
  • 3
  • 12
  • possible duplicate of [Creating Infowindows on features loaded via loadGeoJson()](https://stackoverflow.com/questions/23814197/creating-infowindows-on-features-loaded-via-loadgeojson) – geocodezip Feb 12 '18 at 21:04
  • possible duplicate of [GeoJSON Point name & description not displayed when using Google Map API V3](https://stackoverflow.com/questions/24050593/geojson-point-name-description-not-displayed-when-using-google-map-api-v3) – geocodezip Feb 12 '18 at 21:05
  • What does your GeoJSON code look like? – geocodezip Feb 12 '18 at 21:07

1 Answers1

0

Here is a JSBin with a simple solution. Say you have the following GeoJSON for your marker:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "info-window-header": "Hartford City",
        "info-window-content": "Display Weather Data Here!"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -85.37029266357422,
          40.45138852013111
        ]
      }
    }
  ]
}

In your JavaScript source code, you would retrieve the JSON. In the example solution, this is simulated by the following:

var rawData = '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"info-window-header":"Hartford City","info-window-content":"Display Weather Data Here!"},"geometry":{"type":"Point","coordinates":[-85.37029266357422,40.45138852013111]}}]}';

Then you would parse the JSON:

var data = JSON.parse(rawData);

After that, you access the necessary values from the data and concatenate them to the info window content string:

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">' + data.features[0].properties['info-window-header'] + '</h1>'+
    '<div id="bodyContent">'+
    '<p><b>'+ data.features[0].properties['info-window-content'] + '</p>'+
    '</div>'+
    '</div>';
Iavor
  • 1,997
  • 16
  • 27
  • Thank you for providing me with this - it works great! Except, I can't find where to reference the path to the JSON file, itself. I apologize for the confusion. – user5834454 Feb 12 '18 at 22:21
  • Check out [this StackOverflow post](https://stackoverflow.com/questions/7346563/loading-local-json-file) or [this page](https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript#the-correct-method-create-a-new-xmlhttprequest-1) on how to load a local JSON file. You can also try using the more modern [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). [Here](https://stackoverflow.com/a/42272155/44811690) is a simple example of it. Is this what you were asking about? – Iavor Feb 12 '18 at 22:48