Блог

Я загружаю маркеры из файла JSON (расположенного здесь):

  map.data.loadGeoJson('https://api.myjson.com/bins/tz9ze'); 
  

Чего я пытаюсь достичь:

1. загрузите name из узла json properties и отобразите его в виде заголовка.
2. загружайте icon с узла json properties и отображайте его в виде значка маркера.

Как я могу этого добиться?

Используйте функцию стиля (из документации):

Правила декларативного стиля
Если вы хотите обновить стиль большого количества наложений, таких как маркеры или полилинии, вам обычно приходится перебирать каждое наложение на вашей карте и устанавливать его стиль индивидуально. С помощью уровня данных вы можете устанавливать правила декларативно, и они будут применяться ко всему вашему набору данных. Когда либо данные, либо правила обновляются, стиль будет автоматически применен к каждой функции. Вы можете использовать свойства объекта для настройки его стиля.

Вот так:

 map.data.setStyle(function(feature) {
  return {
    icon: feature.getProperty("icon"),
    title: feature.getProperty("name")
  }
});
  

доказательство концепции скрипки

Данные в формате JSON:

 //JSON file content:
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [35.29182, 32.917633]
    },
    "properties": {
      "name": "Adrian",
      "icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [35.0611, 33.2815]
    },
    "properties": {
      "name": "Chase",
      "icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [34.8621, 33.0613]
    },
    "properties": {
      "name": "Lincoln",
      "icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [35.1551, 33.2527]
    },
    "properties": {
      "name": "Jayden",
      "icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [34.9047, 33.0816]
    },
    "properties": {
      "name": "Cameron",
      "icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
    }
  }]
};
  

фрагмент кода:

 var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 33.2815,
      lng: 35.0611
    }
  });

  // Load GeoJSON.
  map.data.loadGeoJson('https://api.myjson.com/bins/tz9ze');

  map.data.setStyle(function(feature) {
    return {
      icon: feature.getProperty("icon"),
      title: feature.getProperty("name")
    }
  });
}  

 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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=initMap">
</script>