TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

849

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

Comments are closed.

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее