GoogleGoogle GmailWEBWEB - PHP

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

Создание нескольких карт 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

Похожие сообщения
GoogleWordPressПлагины

Лучшие плагины WordPress для интеграции сервисов Google на ваш сайт

GoogleWordPress - АдминкаПлагиныУчебники

Как добавить формы Google в WordPress

JavaScriptWEBПолезные сайты

Изучаем основы Vue с Vue 3

GoogleWordPressНовости и сообщество

WordPress может рассматривать Google FloC как проблему безопасности