Разработайте приложение Google Maps на основе Google Javascript API с несколькими маркерами и общедоступным…

Моя цель состояла в том, чтобы разработать карту 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
Я надеюсь, что этот учебник был полезен для некоторых из вас. Не стесняйтесь задавать мне любые дополнительные вопросы.

смотрите также:

Новые материалы

Как проанализировать работу вашего классификатора?

Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter

Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js

Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!

Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

ИИ в аэрокосмической отрасли

Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Data Visualization Neural Networks Startup Tutorial Statistics Productivity Reactjs Learning