Tutorial de l’API de JavaScript de Google Maps: afegiu un mapa personalitzat al vostre lloc web

Tutorial de l’API de JavaScript de Google Maps: afegiu un mapa personalitzat al vostre lloc web

Tutorial de l’API de JavaScript de Google Maps: afegiu un mapa personalitzat al vostre lloc web
СОДЕРЖАНИЕ
02 июня 2020

Google Maps ens ajuda cada dia a navegar per les carreteres i a trobar llocs de manera poc imaginativa fa poques dècades. No només és útil en l’enquadernació, sinó que també veiem molts exemples de mapes utilitzats per a la visualització de dades, com ara fa poc que molts llocs web utilitzen mapes per visualitzar la difusió de COVID-19 a tot el món. Avui, descobrirem com podem utilitzar l’API JavaScript de Google Maps per crear mapes personalitzats per als nostres llocs web i aplicacions.


Potser us estareu preguntant per què hauríem de caure a l’API de JavaScript de Google Maps per crear mapes quan puguem utilitzar un Mapa estàtic en lloc d’això, utilitzeu un dels complements de WordPress disponibles per fer-ho sense la molèstia de codificació.

Per descomptat, totes dues opcions són excel·lents quan voleu mostrar alguna ubicació comercial al vostre lloc web. Però l’API de JavaScript de Google Maps us ofereix més control per als moments en què voleu crear un mapa personalitzat amb més complexitat del que un plugin preconstruït ha d’oferir.

Tutorial de l'API de JavaScript de Google Maps

Si no voleu dedicar temps a la codificació i voleu una forma més senzilla de mostrar mapes al vostre lloc web, us recomano que Google Maps bloqueja Otter.

Obtenció de la clau d’API de JavaScript de Google Maps

Abans de començar, primer hem d’obtenir una clau d’API per a Google Maps. Podeu obtenir-ho aquí. L’API de Google Maps no és totalment gratuïta, però inclou un pla gratuït que és suficient per a la majoria dels casos.

Tens les claus de l’API? Agafeu la tercera sortida de la rotonda i continueu amb el tutorial. ��

Creació d’un mapa senzill

Una instància bàsica de Google Maps amb configuració predeterminada.Una instància bàsica de Google Maps amb configuració predeterminada.

Primer, construïm un Google Map senzill per començar. Si bé podeu separar el vostre JavaScript i el vostre CSS, utilitzem un sol fitxer HTML en aquest tutorial. Aquí està l’estructura que utilitzarem:

html>
<html>
<cap>
<títol>Portàtil senzill>
<meta nom ="mirador" contingut ="escala inicial = 1.0">
<meta charset ="utf-8">
<estil>
#map {
alçada: 100%;
}

html, body {
alçada: 100%;
marge: 0;
encoixinat: 0;
}
estil>
cap>
<cos>
<div id ="mapa">div>
<guió>
deixar mapa;
funció initMap () {
map = nou google.maps.Map (document.getElementById (“mapa”), {
centre: {
lat: 51.513329,
lng: -0.088950
},
zoom: 14
});
}
guió>
<script src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback = initMap" ajornament asínc>guió>
cos>
html>

Una vegada que es carrega l’API de Google Maps, truca a la funció initMap que inicialitza el mapa. Si desglossem el nostre codi encara més, utilitzem una divisió buida amb una identificació de mapa per declarar on volem presentar el mapa.

deixar mapa;
funció initMap () {
map = nou google.maps.Map (document.getElementById (“mapa”), {
centre: {
lat: 51.513329,
lng: -0.088950
},
zoom: 14
});
}

Al nostre JavaScript, primer, establim una variable de mapa fora de la funció, de manera que forma part de l’àmbit global de manera que podrem modificar el mapa més endavant. En la nostra funció initMap, primer declarem un nou mapa de Google i el definim per presentar-ho trucant l’element amb l’ID del mapa. Després d’això, especifiquem les nostres opcions, que són el centre del mapa i el nivell de zoom.

Utilitzem les coordenades de la ciutat de Londres, una fita històrica al bell mig de Londres, com a centre del mapa. Més endavant, discutirem com podeu utilitzar l’API de Maps per trobar coordenades de qualsevol ubicació al mapa. Però de moment, si teniu curiositat, podeu fer servir latlong.net per trobar ràpidament les coordenades de qualsevol adreça.

Tipus de mapa

Ara que tenim un mapa bàsic, podem mirar les opcions de personalització que ens proporciona l’API JavaScript de Google Maps. La primera opció que utilitzarem és tipus de mapa. Google Maps admet quatre tipus de mapes, que són:

  • full de ruta: el mapa predeterminat que normalment veieu.
  • satèl·lit: vista per satèl·lit de Google Maps i Google Earth, quan estigui disponible.
  • híbrid: una barreja de full de ruta i vista per satèl·lit.
  • terreny: un mapa basat en informació del terreny, com ara muntanyes i valls.

A les nostres opcions de mapes, podem afegir una propietat mapType per seleccionar la vista que desitgem, així:

map = nou google.maps.Map (document.getElementById (“mapa”), {
centre: {
lat: 51.513329,
lng: -0.08895
},
zoom: 14,
mapTypeId: “híbrid”
});

Per exemple, utilitzem un mapa híbrid. Podeu experimentar amb diferents tipus per veure quin s’adapta al vostre cas d’ús.

Opcions de mapa

Després del tipus de mapa, arribem a controls de mapes. Google Maps us permet utilitzar qualsevol dels seus sis controls als vostres mapes. Podeu trobar una llista dels controls al seu lloc web.

Podeu especificar el control que voleu utilitzar i la seva ubicació si cal, així:

map = nou google.maps.Map (document.getElementById (“mapa”), {
centre: {
lat: 51.513329,
lng: -0.08895
},
zoom: 14,
mapTypeId: “híbrid”,
scaleControl: cert,
fullscreenControlOptions: {
posició: google.maps.ControlPosition.RIGHT_BOTTOM
},

});

Habilitem scaleControl, que mostra l’escala del mapa a la part inferior al costat dels drets d’autor de Google, en declarar-lo com VERITAT. I a la línia següent, canviem l’aspecte de fullscreenControl de la seva posició predeterminada de la part superior dreta a la part inferior dreta mitjançant la propietat fullscreenControlOptions. De la mateixa manera, podeu ajustar la posició d’altres controls.

Voleu un control que faci alguna cosa que no sigui la integrada? No et preocupis, Google Maps també et permet crear controls personalitzats per al teu mapa.

Parlem de marcadors!

Afegir un marcador

Els marcadors són sorprenents i permeten construir moltes aplicacions interactives amb un mapa. Per exemple, alguns llocs web de reserva d’hotels utilitzen marcadors per mostrar-vos la ubicació dels hotels en un mapa. I també són molt fàcils d’afegir.

Anem afegir un marcador al London Bridge amb el següent codi:

let marker = nou google.maps.Marker ({
posició: {
lat: 51.506821,
lng: -0.0879
},
mapa: mapa,
títol: “El pont de Londres”
});

Com es pot veure més amunt, el codi del nostre marcador té tres propietats. La primera són les coordenades. Després d’això, passem la variable de mapa on vam emmagatzemar el nostre mapa al principi i, finalment, passem el títol del marcador.

També podeu passar l’URL a una icona de marcador personalitzat amb una propietat icona al bloc de codi anterior.

Afegir un InfoWindow

Pot ser que trobeu a faltar als nostres retoladors. Normalment, quan feu clic a un marcador al mapa, us mostrarà una finestra emergent amb més detalls. Aquesta finestra emergent és un component diferent en si mateix que s’anomena an InfoWindow.

Google Maps amb un marcador personalitzatGoogle Maps amb un marcador personalitzat.

Afortunadament per a nosaltres, és molt fàcil afegir un InfoWindow al nostre marcador.

deixa infoWindow = nou google.maps.InfoWindow ({
contingut: “

pont de Londres


});

marker.addListener (‘clic’, funció () {
infoWindow.open (mapa, marcador);
});

Primer, creem una nova variable infoWindow que emmagatzema el nostre component InfoWindow. Només li passem una propietat de contingut que conté l’HTML que mostra un cop fet clic. Després d’això, afegim un escoltat d’esdeveniments al clic al nostre marcador, que li diu que obri la informacióWindow quan es fa clic al marcador.

Així, podeu utilitzar un marcador i un infoWindow per crear experiències interactives amb el vostre mapa.

Ara és el moment adequat per fer una pausa un segon i mirar enrere els avenços que hem fet. En només 30 línies de codi, hem utilitzat l’API de JavaScript de Google Maps per crear un mapa personalitzat amb marcadors i infoboxes. Val la pena assenyalar com de fàcil és utilitzar l’API de Google Maps per fer coses que haurien semblat un repte per a un principiant..

Modificació dinàmica & oients d’esdeveniments

Els marcadors i les opcions de mapa no són necessàriament les raons per les quals algú faria un complement predefinit de Google Map i passaria a l’API. Són prometedores, però ja hi ha molts plugins que ofereixen aquestes funcions. Provem alguna cosa que no sigui possible amb un complement.

Modificació dinàmica

Google Maps té molts mètodes interactuar amb el mapa i modificar-ne el comportament. Si esteu acostumats a treballar amb DOM, no hauríeu de tenir molts problemes amb aquests mètodes.

Alguns d’aquests mètodes us permeten obtenir informació del mapa, com getCenter, que retorna les coordenades del centre del mapa. I de la mateixa manera, alguns us permeten canviar el comportament, com setCenter, que canvia el centre del mapa.

Hi ha molts mètodes i hauríeu de fer una ullada a tots ells, de manera que sapigueu què és possible amb l’API. Utilitzem un d’aquests mètodes amb el nostre mapa.

Podem afegir un botó al nostre exemple que retorni el centre del nostre mapa a la ciutat de Londres.

Primer, hem d’afegir un botó al nostre codi:

<botó id ="bringToCenter">Porta a Centrebutton>

Ara adjuntem un oïdor d’esdeveniments al nostre botó que desencadena el mètode setCenter:

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

centerButton.addEventListener (‘clic’, funció (e) {
e.preventDefault ();
map.setCenter ({
lat: 51.513329,
lng: -0.08895
});
});

I ja ho és. Senzill, no? Hem utilitzat map.setCenter en quin mapa és la variable que vam declarar al principi per mantenir el nostre mapa.

Heu d’intentar experimentar amb diferents mètodes i explorar els límits de l’API.

Oients d’esdeveniments

Un altre concepte que poden tenir coneixement els desenvolupadors de JavaScript són els oients d’esdeveniments. Podeu adjuntar accions a esdeveniments específics, cosa que significa que quan es produeix un esdeveniment, com ara el canvi de centre, aquestes accions es desencadenen.

Prenem un dels exemples dels documents de Google Maps d’obtenir les coordenades del mapa quan feu clic a qualsevol lloc.

deixem que infoWindowLatLang;

map.addListener (‘clic’, funció (mapsMouseEvent) {
if (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = nou google.maps.InfoWindow ({
posició: mapsMouseEvent.latLng
});

infoWindowLatLang.setContent (mapsMouseEvent.latLng.toString ());
infoWindowLatLang.open (mapa);
});

Com podeu veure, el concepte és gairebé el mateix que el que funcionen els oients en JavaScript amb JavaScript. Primer, adjuntem un oient d’esdeveniments onClick al nostre mapa. Dins del nostre oient d’esdeveniments, obtenim les coordenades d’on fa clic l’usuari i el situem dins d’un InfoWindow.

Si comproveu Bloc de Google Map per Otter, podeu veure com fem servir aquests oients i mètodes per fer esdeveniments com ara afegir arrossegar & soltar els marcadors i suprimir un marcador fent clic sobre ell.

Creació d’un control personalitzat

I finalment, acabem aquest article amb un exemple de construcció controls personalitzats per al vostre Google Maps.

Com s’ha apuntat anteriorment, estem construint un botó personalitzat que afegeix un marcador al centre del mapa. Si bé el codi per a això sembla una mica complicat, és senzill.

Primer, creem un botó com a funció, que té un oient d’esdeveniments per afegir un marcador al centre del mapa.

Heu de substituir YOUR_API_KEY al bloc de codis anterior per la clau API. Es mostra un simple Google Map amb la latitud i la longitud indicades com a centre.

funció MarkerControl (controlDiv, mapa) {
const controlUI = document.createElement (‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2px sòlid #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2px 6px rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘punter’;
controlUI.style.margin = ’10px’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘Feu clic per afegir un marcador’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (‘clic’, funció () {
nou google.maps.Marker ({
posició: map.getCenter (),
mapa: mapa
});
});
}

La majoria del codi anterior només crea un element per al nostre botó. Al final, adjuntem un oient d’esdeveniments al nostre botó que afegeix un marcador al centre del mapa.

Ara hem d’adjuntar el nostre botó al nostre mapa, cosa que fem amb el següent codi:

const markerControlDiv = document.createElement (‘div’);
const markerControl = nou MarkerControl (markerControlDiv, mapa);
markerControlDiv.index = 1;
map.controls [google.maps.ControlPosition.LEFT_BOTTOM] .push (marcadorControlDiv);

El codi anterior connecta el nostre botó al mapa a la posició inferior esquerra. I ja ho és. Això és necessari per afegir controls personalitzats a Google Maps mitjançant la seva API de JavaScript.

Google Maps amb un botó personalitzat.Google Maps amb un botó personalitzat a l’extrem inferior esquerre.

Conclusió

Un exemple de tot el que vam fer en aquest article està disponible a Internet CodeSandbox.

Això és per a aquest article i espero que us hagi confiat una mica de treball amb l’API de JavaScript de Google Maps. És increïblement senzill d’utilitzar i permet construir gairebé qualsevol cosa que desitgeu amb un mapa!

Ara haureu d’intentar utilitzar el que heu après avui i practicar-lo construint un projecte de demostració per a vosaltres mateixos mitjançant Google Maps. Informeu-vos als comentaris si teniu cap pregunta; estem encantats de respondre-les!

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Maquetació i presentació de Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector