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