Adding GeoJSON Data to Google Maps API Hosted Locally
Question
I'm trying to get my geojson data onto a google map. I've been trying various methods within the documentation to get my points to load: https://developers.google.com/maps/documentation/javascript/reference/data#Data.toGeoJson with no success so far. Basically the map is loading fine, but the points aren't loading at all, so I must be doing something wrong with the importing of the points. Especially because when I add points using their drag and drop interface, it seems to load fine.
The mapping code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Makes the sample page fill the window*/
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
background-color: #fff;
border: 1px solid #999;
left: 25%;
padding: 5px;
position: absolute;
top: 10px;
z-index: 5;
}
</style>
</head>
<body>
<div id="floating-panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.742043, lng: -104.991531},
zoom: 10
});
}
var dataPoints = new google.maps.toGeoJson('map.json');
google.maps.addGeoJson(dataPoints);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY_GOES_HERE&callback=initMap"
async defer></script>
</body>
</html>
Then the geoJSON data:
https://api.myjson.com/bins/k45by
It's in a link to save space, but I will use that GeoJSON data in a local file and run it on a local web server using python's http.server.
1 answers
solution1
0 ACCPTED 2020-02-04 02:27:39
Use the loadGeoJson method to get data from a domain or local file. It will use a XMLHTTPRequest to fetch your data and do all the steps to get your data ready for usage.
Every map has a map.data object, which acts as a data layer for arbitrary geospatial data, including GeoJSON. You can load and display a GeoJSON file by calling the loadGeoJSON() method of the data object. The below example shows how to add a map and load external GeoJSON data.
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.742043, lng: -104.991531},
zoom: 10
});
map.data.loadGeoJson('https://api.myjson.com/bins/k45by');
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.