«
»
GoogleGoogle GmailWEBWEB - PHP

Создание нескольких карт Google на странице

Хотите отобразить несколько карт Google на одной странице? Тогда этот пост для вас.

Несколько карт Google

Для того, чтобы сгенерировать карту, во-первых, вам нужен элемент HTML, где вы можете отобразить карту. Вы должны указать размер, т.е. высоту и ширину элемента.

Для отображения нескольких карт вам понадобится несколько контейнеров для карты. Просто не забудьте указать высоту и ширину контейнера. Вот пример HTML.

HTML

<html> <head> <meta charset="UTF-8"> <title>Adding Multiple Maps in a Page</title> <style> #block-wrp { width:784px; display:flex; display:-webkit-flex; } #block-wrp .block-item { height:400px; width:48%; position:relative; } #block-wrp .block-item .map-item { height:90% } #block-wrp .block-item span.city-name { text-align:center; color:#000; text-transform:uppercase; font-weight:700; background:#a2ccff; height:10%;line-height:2em } </style> </head> <body> <div id="block-wrp"> <div class="block-item"> <div id="mapCanvas1" class="map-item"> </div> <span class="city-name">Label 1</span> </div> <div class="block-item"> <div id="mapCanvas2" class="map-item"> </div> <span class="city-name">Label 2</span> </div> </div> </body> </html>

В приведенном выше фрагменте есть 2 заполнителя: mapCanvas1 и mapCanvas1 .

Теперь, когда у вас есть структура HTML, пришло время заняться некоторыми вещами JavaScript.

JavaScript

Чтобы использовать JavaScript API Карт Google, вам нужен ключ API Google. Если у вас его нет, обратитесь к разделу Добавление нескольких пользовательских маркеров с легендой на Google Map .

Вы можете включить API карт на свою страницу, просто добавив следующую строку.

<script async defer src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY&callback=drawMap"></script>

где YOUR_API_KEY – ключ API Google, а drawMap – функция обратного вызова, которая вызывается после загрузки этого API. Вы можете переименовать его, как вам нравится.

Следующий скрипт генерирует 2 разные карты одного и того же местоположения (Сидней).

<script type="text/javascript"> var map1, map2; function drawMap() { var mapCenter = new google.maps.LatLng(-33.865143, 151.209900); // Sydney var mapOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, center: mapCenter, fullscreenControl: false } // Generate First Map map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions); // Generate Second Map map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions); } </script>

Если вы хотите отображать разные местоположения, вам просто нужно изменить свойство центра для параметров карты при создании нового объекта карт Google.

Вот полный код для отображения нескольких карт разных мест.

Создание нескольких карт Google (полный код)

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Generating Multiple Maps in a Page</title> <style> #block-wrp { width: 784px; display: flex; display: -webkit-flex; justify-content: space-around; flex-wrap: wrap; } #block-wrp .block-item { height: 400px; width: 48%; position: relative; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column } #block-wrp .block-item .map-item { height: 90% } #block-wrp .block-item span.city-name { text-align: center; color: #000; text-transform: uppercase; font-weight: bold; background: #a2ccff; height: 10%; line-height: 2em; } </style> </head> <body> <div id="block-wrp"> <div class="block-item"> <div id="mapCanvas1" class="map-item"> </div> <span class="city-name">London</span> </div> <div class="block-item"> <div id="mapCanvas2" class="map-item"> </div> <span class="city-name">Amsterdam</span> </div> </div> <script type="text/javascript"> var map1, map2; function drawMap() { var mapOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, fullscreenControl: false } mapOptions.center = new google.maps.LatLng(51.509865, -0.118092); // London map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions); mapOptions.center = new google.maps.LatLng(52.370216, 4.895168); // Amsterdam map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions); } </script> <script async defer src="http://maps.google.com/maps/api/js?key=AIzaSyCvDN-LuS_9_VFkR71Sc56P6y4cwWKvEpU&callback=drawMap"></script> </body> </html>

Таким образом, вы можете показать несколько карт Google на странице.

Спасибо за чтение этой статьи.

Источник записи: https://thedebuggers.com

Связанные записи
WEBПолезные сайты

50 бесплатных сайтов для ваших проектов графического дизайна в 2020 году | Бесплатные Графика, Фото и Видео стоки, Шрифты, Макеты и не только

JoomlaWEBWordPressПлагиныПолезные сайты

Обзор уникального конструктора страниц Nicepage 2020 (WordPress, Joomla, HTML и не только)

CSSWEBПримеры

Мистический inline-flex и что он делает - Stas Bagretsov - Medium

FacebookGoogleWordPressПлагиныСоциальные сети

Вход в WordPress через социальные сети: как настроить вход через Facebook и Google