Урок за API на Google Maps JavaScript: Добавете персонализирана карта към уебсайта си

Google Maps ни помага всеки ден да се ориентираме по пътищата и да намираме места по начин, който не беше въображаем само преди няколко десетилетия. Това е не само полезно за намиране на начин, но също така виждаме много примери за карти, използвани за визуализация на данни, като например как наскоро много уебсайтове използват карти за визуализиране на разпространението на COVID-19 по целия свят. Днес нека научим как можем да използваме JavaScript API на Google Maps за създаване на персонализирани карти за нашите уебсайтове и приложения.


Може би се чудите защо трябва да копаем в JavaScript Maps API за създаване на карти, когато можем да използваме Статична карта вместо това или използвайте някой от наличните приставки за WordPress, за да го направите без излишни кодировки.

Разбира се, и двете са отлични възможности, когато искате да покажете местоположение на бизнеса си на уебсайта си. Но JavaScript API API на Google Maps ви предлага повече контрол за моментите, когато искате да създадете персонализирана карта с по-голяма сложност, отколкото може да предложи предварително изградена приставка.

Урок за API на Google Maps

Ако не искате да отделяте време за кодиране и искате по-лесен начин за показване на карти на вашия уебсайт, препоръчвам Блок Google Maps от Otter.

Извличане на JavaScript API API на Google Maps

Преди да започнем, първо трябва да вземем ключ за API за Google Maps. Можете да го получите от тук. API на Google Maps не е напълно безплатен, но предлага безплатен план, който е достатъчен за повечето случаи.

Имате ли ключовете на API? Направете третия изход от кръговото кръстовище и продължете с урока. ��

Създаване на проста карта

Основен екземпляр на Google Maps с настройки по подразбиране.Основен екземпляр на Google Maps с настройки по подразбиране.

Първо, нека да създадем проста карта на Google, за да започнете. Въпреки че можете да разделите JavaScript и CSS, в този урок използваме един HTML файл. Ето структурата, която ще използваме:

HTML>
<HTML>
<глава>
<заглавие>Прост маптит>
<мета име ="Прозорецът" = съдържание"първоначалната мащаб = 1.0">
<мета charset ="UTF-8">
<стил>
#map {
височина: 100%;
}

html, body {
височина: 100%;
марж: 0;
подплънки: 0;
}
стил>
глава>
<тяло>
<div id ="карта">Разделение>
<писменост>
нека карта;
функция initMap () {
map = new google.maps.Map (document.getElementById (‘map’), {
център: {
lat: 51.513329,
lng: -0.088950
},
увеличение: 14
});
}
писменост>
<скрипт src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&обаждане = initMap" отлагане на асинхрон>писменост>
тяло>
HTML>

След като API на Google Maps се зареди, той извиква функцията initMap, която инициализира картата. Ако разградим още повече кода си, използваме празен div с идентификатор на карта, за да декларираме къде искаме да изобразим картата.

нека карта;
функция initMap () {
map = new google.maps.Map (document.getElementById (‘map’), {
център: {
lat: 51.513329,
lng: -0.088950
},
увеличение: 14
});
}

Първо в нашия JavaScript задаваме променлива на картата извън функцията, така че тя е част от глобалния обхват, за да можем да променим картата по-късно. В нашата функция initMap първо декларираме нова карта на Google и я настройваме да изобразява, като извикваме елемента с идентификатора на картата. След това уточняваме нашите опции, които са центъра на картата и нивото на увеличение.

Използваме координатите на Лондонския град, историческа забележителност насред Лондон, като център на картата. По-късно обсъждаме как можете да използвате API на Карти, за да намерите координати на всяко място на картата. Но засега, ако сте любопитни, можете да използвате latlong.net за бързо намиране на координати на всеки адрес.

Типове карти

Сега, когато имаме основна карта, можем да разгледаме опциите за персонализиране, които ни дава JavaScript API API на Google Maps. Първият вариант, който ще използваме, е тип карта. Google Maps поддържат четири типа карти, които са:

  • пътна карта: картата по подразбиране, която обикновено виждате.
  • сателит: сателитен изглед на Google Maps и Google Earth, когато има такива.
  • хибрид: смесица от пътна карта и сателитен изглед.
  • терен: карта, базирана на информация за терена, като планини и долини.

В нашите опции за карти можем да добавим свойство mapType, за да изберем изгледа, който искаме, като този:

map = new google.maps.Map (document.getElementById (‘map’), {
център: {
lat: 51.513329,
lng: -0.08895
},
увеличение: 14,
mapTypeId: ‘хибрид’
});

За нашия пример използваме хибридна карта. Можете да експериментирате с различни видове, за да видите кой от тях отговаря на вашия случай на използване.

Опции за карта

След типа карта стигаме до контроли на картата. Google Maps ви позволява да използвате който и да е от шестте му контрола във вашите карти. Можете да намерите списък с контролите на уебсайта им.

Можете да зададете контрола, който искате да използвате, и неговото местоположение, ако е необходимо, като този:

map = new google.maps.Map (document.getElementById (‘map’), {
център: {
lat: 51.513329,
lng: -0.08895
},
увеличение: 14,
mapTypeId: ‘хибрид’,
scaleControl: вярно,
пълен екранControlOptions: {
позиция: google.maps.ControlPosition.RIGHT_BOTTOM
},

});

Ние активираме scaleControl, който показва мащаба на картата в дъното, заедно с авторските права на Google, като я декларираме като ИСТИНСКА. И в следващия ред променяме външния вид на fullscreenControl от стандартната му позиция горе вдясно до долу вдясно, използвайки свойството fullscreenControlOptions. По същия начин можете да регулирате позицията на други контроли.

Искате контрол, който прави нещо различно от вградените? Не се притеснявайте, Google Maps ви позволява също да създавате персонализирани контроли за вашата карта.

Нека да поговорим за маркери!

Добавяне на маркер

Маркерите са невероятни и те правят възможно изграждането на много интерактивни приложения с карта. Например някои уебсайтове за хотелски резервации използват маркери, за да ви покажат местоположението на хотелите на картата. И те също са много лесни за добавяне.

Нека да добавете маркер до Лондонския мост със следния код:

нека marker = new google.maps.Marker ({
позиция: {
lat: 51.506821,
lng: -0.0879
},
карта: карта,
заглавие: „Лондонският мост“
});

Както можете да видите по-горе, кодът за нашия маркер има три свойства. Първият е координатите. След това предаваме променливата на картата, където сме съхранявали нашата карта в началото, и накрая, предаваме заглавието на маркера.

Можете също да предадете URL адреса на икона на персонализиран маркер със свойство на иконата в горния кодов блок.

Добавяне на InfoWindow

Може да намерите нещо, което да липсва от нашите маркери. Обикновено, когато щракнете върху маркер на картата, той ви показва изскачащ прозорец с повече подробности. Това изскачане само по себе си е различен компонент, който се нарича an InfoWindow.

Google Maps с персонализиран маркер.Google Maps с персонализиран маркер.

За щастие за нас е много лесно да прикачите InfoWindow към нашия маркер.

нека infoWindow = нов google.maps.InfoWindow ({
съдържание: ‘

лондонския мост


});

marker.addListener (“щракване”, функция () {
infoWindow.open (карта, маркер);
});

Първо, ние създаваме нова променлива на infoWindow, която съхранява нашия компонент InfoWindow. Предаваме го само свойство на съдържанието, което съдържа HTML, който показва веднъж щракнат. След това към нашия маркер добавяме слушател на събитие при щракване, който му казва да отвори прозореца с информация при кликване върху маркера.

Точно така можете да използвате маркер и информационен прозорец, за да създадете интерактивни преживявания с вашата карта.

Сега е подходящият момент да направим пауза за секунда и да погледнем назад към напредъка, който постигнахме. Само в 30 реда код сме използвали JavaScript API на Google Maps, за да създадем персонализирана карта с маркери и информационни кутии. Заслужава да се отбележи колко лесно е да използвате API на Google Maps, за да правите неща, които биха изглеждали предизвикателни за начинаещ.

Динамична модификация & слушатели на събитията

Маркерите и опциите за карта не са непременно причините, поради които някой би извадил предварително направен плъгин за Google Map и премине към API. Те са обещаващи, но много плъгини вече предлагат тези функции. Нека опитаме нещо, което не е възможно с плъгин.

Динамична модификация

Google Maps има много методи да взаимодействат с картата и да променят нейното поведение. Ако сте свикнали да работите с DOM, тогава не трябва да имате много проблеми с тези методи.

Някои от тези методи ви позволяват да получите информация от картата, като getCenter, който връща централни координати на картата. И по подобен начин някои ви позволяват да промените поведението, като setCenter, което променя центъра на картата.

Има много методи и трябва да разгледате всички от тях, така че да знаете какво е възможно с API. Нека използваме един от тези методи с нашата карта.

Можем да добавим бутон към нашия пример, който връща центъра на картата ни към град Лондон.

Първо, трябва да добавим бутон към нашия код:

<бутон id ="bringToCenter">Доведете до Centerbutton>

Сега ние прикрепяме слушател на събитие към нашия бутон, който задейства метода setCenter:

const centerButton = document.querySelector (‘#bringToCenter’);

centerButton.addEventListener (“щракване”, функция (д) {
e.preventDefault ();
map.setCenter ({
lat: 51.513329,
lng: -0.08895
});
});

И това е всичко. Просто, нали? Използвахме map.setCenter, в който карта е променливата, която декларирахме в началото, за да държи нашата карта.

Трябва да опитате да експериментирате с различни методи и да проучите границите на API.

Слушатели на събития

Друга концепция, с която разработчиците на JavaScript може да са запознати, са слушателите на събития. Можете да прикачите действия към конкретни събития, което означава, че когато се случи събитие, като промяна на центъра, тези действия се задействат.

Нека вземем един от примерите от документите на Google Maps за получаване на координати на картата, когато щракнете където и да е върху нея.

нека infoWindowLatLang;

map.addListener („щракване“, функция (mapsMouseEvent) {
ако (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = нов google.maps.InfoWindow ({
позиция: mapsMouseEvent.latLng
});

infoWindowLatLang.setContent (mapsMouseEvent.latLng.toString ());
infoWindowLatLang.open (карта);
});

Както можете да видите, концепцията е почти същата като тази, която работят слушателите на събития в JavaScript. Първо, прикачваме към нашата карта слушател на събитие onClick. Вътре в нашия слушател на събития получаваме координатите на мястото, където потребителят кликва и го поставяме в InfoWindow.

Ако проверите Блок Google Map от Otter, можете да видите как използваме тези слушатели на събития и методи, за да правим неща като добавяне на влачене & капка Маркери и премахнете маркер, като щракнете върху него.

Създаване на потребителски контрол

И накрая, завършваме тази статия с пример за изграждане персонализирани контроли за вашите Google Карти.

Както бе отбелязано по-рано, ние изграждаме персонализиран бутон, който добавя маркер в центъра на картата. Въпреки че кодът за това изглежда малко сложен, той е прав.

Първо, ние изграждаме бутон като негова функция, който има слушател на събития, който да добави маркер в центъра на картата.

Трябва да замените YOUR_API_KEY в горния кодов блок с вашия API ключ. Той прави обикновена карта на Google с дадената ширина и дължина като център.

функция MarkerControl (controlDiv, карта) {
const controlUI = document.createElement (‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2px solid #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2px 6px rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘указател’;
controlUI.style.margin = ’10px’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘Кликнете, за да добавите маркер’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (“щракване”, функция () {
нов google.maps.Marker ({
позиция: map.getCenter (),
карта: карта
});
});
}

По-голямата част от горния код просто създава елемент за нашия бутон. В самия край прикачваме слушател на събитието към нашия бутон, който добавя маркер в центъра на картата.

Сега трябва да прикачим бутона си към нашата карта, което правим със следния код:

const markerControlDiv = document.createElement (‘div’);
const markerControl = нов MarkerControl (markerControlDiv, карта);
markerControlDiv.index = 1;
map.controls [google.maps.ControlPosition.LEFT_BOTTOM] .push (markerControlDiv);

Горният код прикачва нашия бутон към картата в долната му лява позиция. И това е всичко. Това е всичко, което е необходимо, за да добавите персонализирани контроли в Google Maps, използвайки своя JavaScript API.

Google Maps с персонализиран бутон.Google Maps с персонализиран бутон в долния ляв ъгъл.

заключение

Работен пример за всичко, което направихме в тази статия, е достъпен онлайн на CodeSandbox.

Това е за тази статия и се надявам да ви даде известна увереност в работата с JavaScript API на Google Maps. Той е невероятно лесен за използване и ви позволява да изграждате почти всичко, което желаете с карта!

Сега трябва да опитате да използвате наученото днес и да го практикувате, като изградите демонстрационен проект за себе си, използвайки Google Maps. Уведомете ни в коментарите, ако имате въпроси; щастливи сме да им отговорим!

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Оформление и представяне от Карол К.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map