API Карт Google не будет отображать данные GeoJSON - PullRequest
Новая
       22

API Карт Google не будет отображать данные GeoJSON

0 голосов
/ 07 мая 2019

Я впервые пытаюсь извлечь данные из файла GeoJSON и отобразить его в Google Maps. Я просто хочу разместить простой маркер Google Maps по координатам в геойсоне. Пробовал читать что я мог в сети на GM API и geojson, но я чувствую, что упускаю что-то очень простое.

Вот код основной карты : 

<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>

Вот файл toilets.geojson : 

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
          "coordinates": [
            34.799339175224304,
            32.061136963943106
          ]
      }
    }]
}

Просто хочу, чтобы в этих координатах появлялся обычный маркер

1 Ответ

0 голосов
/ 07 мая 2019

Одной из проблем является то, что переменная map выходит из области видимости при загрузке GeoJSON. Этот код должен быть внутри функции initMap. 

<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>

screenshot of resulting map

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>
...