Моя цель состояла в том, чтобы разработать карту Google с барами и ресторанами в Цюрихе на основе слоя общественного транспорта и нескольких маркеров с информационными окнами. Во-первых, я начал совершенно неправильно. Я сделал таблицу со всеми необходимыми данными и загрузил ее на «Google MyMap». Ну, это работало действительно хорошо, НО не было выбираемых слоев общественного транспорта… Поэтому я решил создать карту с помощью Google Maps Javascript API.

Прежде чем приступить к техническим вопросам, создайте электронную таблицу со всей информацией, которую вы хотите включить в свою карту.

API геокодирования Google

Во-первых, вы должны знать, что Google Maps не дает вам координат, когда вы делаете экспорт из Google MyMaps.
Есть полезные страницы, на которых вы можете узнать долготу и широту ваших маркеров. Хороший пример: https://www.mapcoordinates.net/ru
Но если у вас большое количество маркеров, это очень трудоемко. Для этих случаев у Google есть API под названием Google Geo Coding API:

https://maps.googleapis.com/maps/api/geocode/json?address= Enter the address here &key=YOUR_API_KEY
For example: 
https://maps.googleapis.com/maps/api/geocode/json?address=Schützengasse+16,+8001+Zürich,+Simplon&key=YOUR_API_KEY

Для меня самым быстрым способом создания URL-адреса был возвышенный текст. Сначала введите все свои адреса внутри. Найдите (Ctrl. + f) после пробелов и замените его на +

Следующим шагом будет ввод «&key=YOUR_API_KEY» в конце URL-адреса. Не забудьте заменить YOUR_API_KEY своим реальным ключом.
Чтобы найти все концы строки, просто введите команду регулярного выражения «\n» в поле поиска.

Последний шаг — ввести https://maps.googleapis.com/maps/api/geocode/json?address= в начале URL-адреса с тем же регулярным выражением, которое вы использовали ранее. Сохраните сценарий в формате .txt или .csv.

Прочтите Google Geo Coding API на Python / Json

Введите следующий фрагмент кода Python. Код перебирает все сгенерированные URL-адреса и дает вам все координаты.

'''Open the file with the URLs'''
f = open('file_with_GoogleGeo.txt', 'r')
urls = f.readlines()
for url in urls:
    if url.endswith('\n'): url = url[:-1]
    r = requests.get(url).json()
    json = r["results"][0]["geometry"]["location"]
    print(json)

Это будет выглядеть так:

{u'lat': 47.3750276, u'lng': 8.4841795}
{u'lat': 47.3737326, u'lng': 8.5431057}
{u'lat': 47.3740803, u'lng': 8.5201814}
{u'lat': 47.360376, u'lng': 8.567203}
{u'lat': 47.3841043, u'lng': 8.4964657}
{u'lat': 47.3760201, u'lng': 8.4878141}
{u'lat': 47.3773715, u'lng': 8.527775}
{u'lat': 47.404148, u'lng': 8.557179999999999}
{u'lat': 47.4068396, u'lng': 8.5482176}
{u'lat': 47.4109287, u'lng': 8.5443506}
{u'lat': 47.3592892, u'lng': 8.5162265}
{u'lat': 47.360285, u'lng': 8.5521581}
{u'lat': 47.3785365, u'lng': 8.5092159}
{u'lat': 47.3756548, u'lng': 8.5245129}
{u'lat': 47.392065, u'lng': 8.518806}
{u'lat': 47.403568, u'lng': 8.546996}

Скопируйте координаты в возвышенный текст и извлеките лишние пробелы →{u’ , ‘ и }. И последнее, но не менее важное: введите координаты в свою электронную таблицу.
Теперь вы готовы написать код Google Javascript API Map.

Карта Google Javascript API — Глава

Сначала нам нужно разработать голову и CSS для карты Google. Как будет выглядеть карта, зависит только от вас. Обратите внимание, что это всего лишь пример кода CSS, ссылку на полный код можно найти в конце этой статьи. Я включил пояснения кода в сам код.

<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <script async custom-element="amp-iframe"
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <title>Zürich</title>
  <style>
   
   #mapCanavas {
    height: 100%;
   }
   /*CSS settings for the body of the map*/
   html, body {
    height: 100%;
    margin: 0;
    padding: 0;
   }
   /*CSS settings for info window*/
   h2 {
    margin-top: 10px;
    margin-bottom: 5px;
   }
td.left {
    width: 25%;
    font-size: xx-small;
   }
td.right {
    width: 75%;
    vertical-align: top;
    padding-left: 25px;
   }
   img.resize {
   width:150px;
   height:150px;
.gm-style-iw, .gm-style-iw div {
min-height: 200px;
min-width: 300px;
background-color: #FFF;
}
</style>
 </head>

Google Maps Javascript API — основная часть

Теперь первый блок кода для Body/JS.

<body>
  <div id="mapCanavas"></div>
  <script>
function initMap() {
// Display a map on the web page
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
      mapTypeId: 'roadmap',
      
    };
map = new google.maps.Map(document.getElementById('mapCanavas'), mapOptions);
     map.setTilt(50);
// Sets own markers    
var icons = {
 bar: {
  icon: {url:'picture/bar.png',
  scaledSize: new google.maps.Size(50, 50)
   }
 },
 restaurant: {
  icon: {url:'picture/meal.png',
  scaledSize: new google.maps.Size(60, 60)
   }
  }
;

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

// Multiple markers location, latitude, longitude and ID for the markers
     var markers = [
    [ '01 Bar', 47.3737326, 8.5431057,'bar'],
    [ 'Montblack', 47.3737178, 8.521879, 'bar'],
    [ 'The Bite', 47.3773715, 8.527775, 'restaurant'],
    [ 'Simplon', 47.3766413, 8.5391136, 'restaurant'],
    [ 'Roots', 47.3762949, 8.5385372, 'restaurant'],
    ];
    
//InfoWindow content
var infoWindowContent = [
    
['<div class="info_content">' +
'<h2>01 Bar</h2>'+
 '<table><tr><td class="left"> <img class="resize" src="Bilder/01-bar.jpg"><br>Quelle: Tripadvisor</td><td class = "right"><b>Haltestelle:</b>Rudolf-Brun-Brücke <br><br><b>Adresse:</b>  Limmatquai 86, 8001 Zürich<br><br><a href= "https://01bar.ch/" target="_blank" rel="noopener">Homepage</a></td></tr></table>'+ '</div>'],
['<div class="info_content">' +
'<h2>Montblack</h2>'+
 '<table><tr><td class="left"> <img class="resize" src="Bilder/montblack.jpg"><br>Quelle: montblack-bar.ch</td><td class = "right"><b>Haltestelle:</b> Kalkbreite<br><br><b>Adresse:</b> Kalkbreitestrasse 10, 8003 Zürich<br><br><a href="https://www.montblack-bar.ch/" target="_blank" rel="noopener">Homepage</a></td></tr></table>'+ '</div>'],
['<div class="info_content">' +
'<h2>The Bite</h2>'+
 '<table><tr><td class="left"> <img class="resize" src="Bilder/the-bite-terrace.jpg"><br>Quelle: Tripadvisor</td><td class = "right"><b>Haltestelle:</b> Kanonengasse<br><br><b>Adresse:</b> Brauerstrasse 15, 8004 Zürich<br><br><a href="https://www.thebite.ch/" target="_blank" rel="noopener">Homepage</a></td></tr></table>'+ '</div>'],
['<div class="info_content">' +
'<h2>Simplon</h2>'+
 '<table><tr><td class="left"> <img class="resize" src="Bilder/simplon.jpg"><br>Quelle: Tripadvisor</td><td class = "right"><b>Haltestelle:</b> Bahnhofstrasse / HB<br><br><b>Adresse:</b> Schützengasse 16, 8001 Zürich<br><br><a href="https://www.simplonbar.ch/" target="_blank" rel="noopener">Homepage</a></td></tr></table>'+ '</div>'],
['<div class="info_content">' +
'<h2>Roots</h2>'+
 '<table><tr><td class="left"> <img class="resize" src="Bilder/roots.jpg"><br>Quelle: Tripadvisor</td><td class = "right"><b>Haltestelle:</b> Löwenplatz<br><br><b>Adresse:</b> Lintheschergasse 15, 8001 Zürich<br><br><a href="https://rootsandfriends.com/" target="_blank" rel="noopener">Homepage</a></td></tr></table>'+ '</div>'],
<table><tr><td class="left"> <img class="resize" src="Bilder/mesa.jpg"><br>Quelle: Tripadvisor</td><td class = "right"><b>Haltestelle:</b> Sonneggstrasse<br><br><b>Adresse:</b> Weinbergstrasse 75, 8006 Zürich<br><br><a href="https://mesa-restaurant.ch/" target="_blank" rel="noopener">Homepage</a></td></tr></table>'+ '</div>'],
];

Последняя часть блока кода предназначена для установки маркеров, информационных окон, уровня масштабирования и так далее.

// Add multiple markers to map and sets size
  var infoWindow = new google.maps.InfoWindow({
      maxWidth: 450 
        });
  
  // Place each marker on the map 
  for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      icon: icons[markers[i][3]].icon,
      title: markers[i][0]
    });
   // Place the InfoWindow to the markers and 
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infoWindow.setContent(infoWindowContent[i][0]);
        infoWindow.open(map, marker);
      }
    })(marker, i));
// Center the map to fit all markers on the screen
    map.fitBounds(bounds);
    map.panToBounds(bounds);
  }
//Set Zoom level 
  var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(14);
    google.maps.event.removeListener(boundsListener);
  });
//Place the transit Layer
  var transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(map);
  
}
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=ADD_YOUR_API">
  </script>
 </body>
</html>

И это все! Карта выглядит как картинка под текстом. Как упоминалось ранее, я удалил некоторые маркеры для увеличения длины кода.

Весь код можно найти на GitHube: https://github.com/ChGiez/googlemapsapi/edit/master/GoogleMapJSAPI.html
Я надеюсь, что этот учебник был полезен для некоторых из вас. Не стесняйтесь задавать мне любые дополнительные вопросы.