Google Maps API will not display GeoJSON data - google-maps-api-3

Question

I'm trying for the first time to extract data from a GeoJSON file and display it in Google Maps. I just want to place a simple Google Maps marker at the coordinates in the geojson. Tried reading what I could on the net on the GM API and geojson but I feel like I'm missing something very simple.
Here is the main map code:
<script>
var map;
function initMap()
{
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(32.061146,34.799387),
mapTypeId: 'hybrid'
});
}
map.data.loadGeoJson('toilets.geojson');
map.data.setMap(map);
</script>
Here is the toilets.geojson file:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
34.799339175224304,
32.061136963943106
]
}
}]
}
Just want a regular marker to appear at those coordinates

Answer 1

One issue is the map variable is out of scope when you are loading the GeoJSON. That code needs to be inside the initMap function.
<script>
var map;
function initMap()
{
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(32.061146,34.799387),
mapTypeId: 'hybrid'
});
map.data.loadGeoJson('toilets.geojson');
map.data.setMap(map);
}
</script>
proof of concept fiddle (local JSON data
proof of concept fiddle (external JSON file)
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(32.061146, 34.799387),
mapTypeId: 'hybrid'
});
map.data.addGeoJson(geoJsonData);
map.data.setMap(map);
}
var geoJsonData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
34.799339175224304,
32.061136963943106
]
}
}]
};
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>