Vodič za API za Google Maps JavaScript: Dodajte prilagođenu kartu na svoju web lokaciju

Google Maps svakodnevno nam pomažu u kretanju kroz puteve i pronalaženju mjesta na način koji je bio maštovit prije samo nekoliko desetljeća. Ne samo da je koristan u pronalaženju načina, nego vidimo i mnogo primjera karata koje se koriste za vizualizaciju podataka, poput primjerice kako u posljednje vrijeme mnoge web stranice koriste karte za vizualizaciju širenja COVID-19 po cijelom svijetu. Danas naučimo kako pomoću JavaScript API-ja Google Maps možemo izraditi prilagođene mape za naše web stranice i aplikacije.


Možda se pitate zašto bismo se trebali baviti JavaScript API-jem Google Maps da bismo napravili karte kada možemo koristiti a Statička karta umjesto toga ili koristite neki od dostupnih WordPress dodataka da biste to učinili bez problema s kodiranjem.

Naravno, oboje su izvrsne opcije kada želite prikazati neko poslovno mjesto na vašoj web lokaciji. No JavaScript API za Google Maps nudi vam veću kontrolu u vremenima kada želite napraviti prilagođenu kartu složenijih slojeva od unaprijed ugrađenog dodatka.

Vodič za API za Google Maps

Ako ne želite trošiti vrijeme na kodiranje i želite jednostavniji način prikazivanja karata na svojoj web stranici, preporučujem Google Maps blokira iz mjesta Otter.

Dobivanje API-ja za Google Maps ključ

Prije nego što započnemo, prvo moramo nabaviti API ključ za Google karte. Možete dobiti od ovdje. API za Google Maps nije u potpunosti besplatan, ali dolazi s besplatnim planom koji je dovoljan za većinu slučajeva.

Imate li ključeve API-ja? Izađite na treći izlaz s kružnog toka i nastavite s vodičem. ��

Izrada jednostavne karte

Osnovna instanca Google Maps sa zadanim postavkama.Osnovna instanca Google Maps sa zadanim postavkama.

Prvo, napravimo jednostavnu Google kartu za početak. Iako možete odvojiti JavaScript i CSS, u ovom smo vodiču koristili jednu HTML datoteku. Evo strukture koju ćemo koristiti:

hTML>
<hTML>
<glava>
<titula>Jednostavna maptitle>
<meta ime ="Početni prikaz" = sadržaj"Početni razmjera = 1,0">
<meta charset ="UTF-8">
<stil>
#map {
visina: 100%;
}

html, tijelo {
visina: 100%;
marža: 0;
obloga: 0;
}
stil>
glava>
<tijelo>
<div id ="karta">div>
<skripta>
neka karta;
funkcija initMap () {
map = novi google.maps.Map (document.getElementById (‘karta’), {
centar: {
lat: 51,513329,
lng: -0,088950
},
zum: 14
});
}
skripta>
<skripta src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&povratni poziv = initMap" async defer>skripta>
tijelo>
hTML>

Nakon učitavanja API-ja Google Maps on zove funkciju initMap koja inicijalizira kartu. Ako još više razgradimo svoj kôd, koristimo prazan div s ID-jem karte kako bismo objavili gdje želimo prikazati kartu.

neka karta;
funkcija initMap () {
map = novi google.maps.Map (document.getElementById (‘karta’), {
centar: {
lat: 51,513329,
lng: -0,088950
},
zum: 14
});
}

U našem JavaScript-u prvo smo postavili varijablu karte izvan funkcije, tako da je ona dio globalnog okvira kako bismo kasnije mogli modificirati kartu. U svojoj initMap funkciji prvo deklariramo novu Google kartu i postavljamo je na prikazivanje pomoću elementa s ID-om karte. Nakon toga određujemo naše mogućnosti, a to su središte karte i razina zumiranja.

Koristimo koordinate grada Londona, povijesna znamenitost usred Londona, kao središte karte. Kasnije ćemo raspravljati o tome kako možete upotrebljavati API Maps za pronalaženje koordinata bilo koje lokacije na karti. Ali za sada, ako ste znatiželjni, možete koristiti latlong.net kako biste brzo pronašli koordinate bilo koje adrese.

Vrste karata

Sada kada imamo osnovnu kartu, možemo pregledati mogućnosti prilagodbe koje nam pruža JavaScript Maps API Google Maps. Prva opcija koju ćemo koristiti je vrsta karte. Google Maps podržavaju četiri vrste karata koje su:

  • plan puta: zadana karta koju obično vidite.
  • satelit: satelitski prikaz Google Maps i Google Earth, kada su dostupni.
  • hibrid: mješavina mape puta i satelitskog prikaza.
  • teren: karta utemeljena na informacijama o terenu, poput planina i dolina.

U našim opcijama karata možemo dodati svojstvo mapType da odaberemo željeni prikaz, poput ovog:

map = novi google.maps.Map (document.getElementById (‘karta’), {
centar: {
lat: 51,513329,
lng: -0.08895
},
zum: 14,
mapTypeId: ‘hibridni’
});

Za naš primjer koristimo hibridnu kartu. Možete eksperimentirati s različitim vrstama da biste vidjeli koji odgovara vašem slučaju.

Opcije karte

Nakon vrste karte, dolazimo do kontrole karte. Google Maps omogućuje vam da na svojim kartama upotrebite bilo koji od šest kontrola. Možete pronaći popis kontrola na njihovoj web stranici.

Možete odrediti kontrolu koju želite koristiti i njezinu lokaciju ako je potrebno, poput ove:

map = novi google.maps.Map (document.getElementById (‘karta’), {
centar: {
lat: 51,513329,
lng: -0.08895
},
zum: 14,
mapTypeId: ‘hibridni’,
mjerilo Kontrola: istina,
puni ekranControlOptions: {
položaj: google.maps.ControlPosition.RIGHT_BOTTOM
},

});

Omogućujemo scaleControl, koji prikazuje razmjere karte na dnu, zajedno s Googleovim autorskim pravima, proglašavajući je TRUE. I u sljedećem retku mijenjamo izgled fullscreenControl iz zadanog gornjeg desnog položaja u donji desni, koristeći svojstvo fullscreenControlOptions. Slično tome, možete prilagoditi položaj ostalih kontrola.

Želite kontrolu koja radi nešto drugo osim ugrađenih? Ne brinite, Google karte omogućuju vam i izradu prilagođenih kontrola za vašu kartu.

Razgovarajmo o markerima!

Dodavanje markera

Markeri su nevjerojatni i omogućuju izgradnju mnoštva interaktivnih aplikacija s mapom. Na primjer, neke web stranice za rezervaciju hotela koriste markere kako bi vam pokazali lokaciju hotela na karti. A oni su također vrlo lako dodati.

Idemo dodajte marker do Londonskog mosta sa sljedećim kodom:

neka marker = novi google.maps.Marker ({
položaj: {
lat: 51.506821,
lng: -0,0879
},
karta: karta,
naslov: ‘London London’
});

Kao što vidite gore, kod našeg markera ima tri svojstva. Prva su koordinate. Nakon toga prelazimo varijablu karte na kojoj smo u početku pohranili našu kartu, a na kraju prelazimo naslov markera.

URL možete proslijediti i ikoni prilagođenog markera sa svojstvom ikone u gornjem bloku koda.

Dodavanje InfoWindow-a

Možda ćete pronaći nešto što nedostaje našim markerima. Kad obično kliknete marker na karti, prikazat će vam se skočni prozor s više detalja. Taj skočni prozor je sama po sebi različita komponenta koja se naziva an InfoWindow.

Google karte s prilagođenim markerom.Google karte s prilagođenim markerom.

Srećom po nas, vrlo je jednostavno pričvrstiti InfoWindow na naš marker.

neka infoWindow = novi google.maps.InfoWindow ({
sadržaj: ‘

Londonski most


});

marker.addListener (‘klik’, funkcija () {
infoWindow.open (karta, marker);
});

Prvo stvaramo novu varijablu infoWindow-a koja pohranjuje našu komponentu InfoWindow. Prenosimo ga samo svojstvom sadržaja koji sadrži HTML koji pokazuje nakon klika. Nakon toga u naš marker dodamo slušatelja događaja koji je kliknut i koji mu govori da otvori infoWindow kad kliknemo na marker..

Baš tako, pomoću markera i info-prozora možete stvoriti interaktivna iskustva s kartom.

Sada je pravi trenutak da zastanete na sekundu i osvrnem se na napredak koji smo postigli. U samo 30 redaka koda koristili smo JavaScript Maps API za Google Maps da bismo napravili prilagođenu kartu s markerima i infoboxima. Vrijedi napomenuti koliko je jednostavno pomoću API-ja Google Maps učiniti ono što će početniku izgledati izazovno.

Dinamička modifikacija & slušatelje događaja

Označivači i opcije karte nisu nužno razlozi zbog kojih bi se netko iskopao već napravljeni dodatak za Google Map i prešao na API. Obećavaju, ali mnoštvo dodataka već nudi ove značajke. Pokušajmo s dodatkom nešto što nije moguće.

Dinamička modifikacija

Google Maps ima mnoge metode komunicirati s kartom i modificirati njezino ponašanje. Ako ste navikli raditi s DOM-om, s tim metodama ne biste trebali imati puno problema.

Neke od ovih metoda omogućuju vam dobivanje informacija s karte, poput getCenter, koji vraća središnje koordinate karte. I slično tome, neki vam omogućuju promjenu ponašanja, poput setCenter, koji mijenja središte karte.

Postoji mnogo metoda i trebali biste pogledati sve njih pa znate što je s API-om moguće. Koristite jednu od tih metoda s našom kartom.

Našem primjeru možemo dodati gumb koji vraća centar naše karte u grad London.

Prvo, trebamo dodati gumb našem kodu:

<gumb id ="bringToCenter">Dovedite u Centerbutton>

Sada našem gumbu priključujemo slušatelja događaja koji aktivira metodu setCenter:

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

centerButton.addEventListener (‘klik’, funkcija (e) {
e.preventDefault ();
map.setCenter ({
lat: 51,513329,
lng: -0.08895
});
});

I to je to. Jednostavno, zar ne? Koristili smo map.setCenter u kojem je karta varijabla koju smo na početku proglasili da bi držala našu kartu.

Pokušajte eksperimentirati s različitim metodama i istražiti granice API-ja.

Slušatelji događaja

Drugi koncept s kojim bi JavaScript programeri mogli biti poznati slušatelji događaja. Radnje možete priložiti određenim događajima, što znači da kada se događaj dogodi, kao što je promjena središta, one se pokreću.

Uzmimo jedan od primjera iz dokumenata Google Maps za dobivanje koordinata karte kad kliknete bilo gdje na nju.

neka infoWindowLatLang;

map.addListener (‘klik’, funkcija (mapsMouseEvent) {
ako (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = novi google.maps.InfoWindow ({
položaj: mapsMouseEvent.latLng
});

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

Kao što vidite, koncept je približno jednak onome kako slušatelji događaja rade u JavaScript-u. Prvo, na našu kartu priključujemo slušatelj onClick događaja. Unutar našeg slušatelja događaja dobivamo koordinate mjesta gdje korisnik klikne i stavljamo ga u InfoWindow.

Ako provjerite Blok Google Map by Otter, možete vidjeti kako koristimo ove slušatelje događaja i metode kako bismo učinili stvari poput dodavanja povlačenja & kap markera i uklonite marker klikom na njega.

Izrada prilagođene kontrole

I na kraju, ovaj članak završimo primjerom izgradnje prilagođene kontrole za vaše Google karte.

Kao što je ranije napomenuto, gradimo prilagođeni gumb koji u središte karte dodaje marker. Iako kod za ovo izgleda malo komplicirano, to je jednostavno.

Prvo, gradimo gumb kao njegovu funkciju, koja ima slušatelja događaja da doda marker u središte karte.

Trebate zamijeniti YOUR_API_KEY u gornjem bloku koda svojim API ključem. Prava je jednostavna Google karta s danom zemljopisnom širinom i duljinom.

funkcija MarkerControl (controlDiv, karta) {
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 = ‘pointer’;
controlUI.style.margin = ’10px’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘Kliknite za dodavanje markera’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (‘klik’, funkcija () {
novi google.maps.Marker ({
položaj: map.getCenter (),
karta: karta
});
});
}

Većina gornjeg koda samo stvara element našeg gumba. Na samom kraju na naš gumb pričvršćujemo slušatelja događaja koji u središte karte dodaje marker.

Sada moramo na našu kartu priložiti gumb, što radimo sa sljedećim kodom:

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

Gornji kod pričvršćuje naš gumb na karti u njegovom lijevom donjem položaju. I to je to. To je sve što je potrebno da biste dodali prilagođene kontrole na Google Maps pomoću svog API-ja JavaScript.

Google karte s prilagođenim gumbom.Google karte s prilagođenim gumbom u donjem lijevom kutu.

Zaključak

Primjer rada svega što smo učinili u ovom članku dostupan je na mreži CodeSandbox.

To je to za ovaj članak, a nadam se da vam je dao povjerenja u radu s JavaScript API-jem Google Maps. Nevjerojatno je jednostavno i omogućuje vam da napravite gotovo sve što želite s kartom!

Sada biste trebali pokušati iskoristiti ono što ste naučili danas i prakticirati to tako što ćete sami napraviti Google projekt pomoću Google Maps. Javite nam u komentarima ako imate bilo kakvih pitanja; rado im odgovorimo!

Ne zaboravite se pridružiti našem tečaju o ubrzanju ubrzanja stranice WordPress. Pomoću nekih jednostavnih ispravki možete smanjiti vrijeme učitavanja za čak 50-80%:

Izgled i prezentacija Karol K.

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