01 di 05
Aghjustate una chjave API di Google Maps per u vostru Situ
A megli manera di aghjunghje un Google map à u vostru situ hè di utilizà Google Maps API. È Google ricumanda chì avete ottene una chjave API per usu di i mapei.
Ùn esse dumandatu di ottene una chjave API per l'utilizazione di Google Maps API v3, ma hè assai utile cumu vi permette monitorà u vostru utilizazione è paghe accessu additivu. Google Maps API v3 hè una quota d'1 dumanda per secondu per uperu à un massimu di 25 000 dumande per ghjornu. Sì i vostri pezzi più d'esse limiti quandu avete bisognu di attivà a pidata per più.
Cumu obtine una chjave API di Google Maps
- In seguite à Google cù u vostru contu Google.
- Andà à a Console di Garatorii
- Scrive through the list and find the Google Maps API v3, cliccate in u "OFF" per ombra.
- Lee è accunsente à i termini.
- Va a l'API è cunsiderate "Aperite API" da u menzu di u manicu
- In a sección di "Aumenta l'API", cliccate nant'à u "Creatu novu chjave di servore ...".
- Scrive l'indirizzu IP di u vostru servore web. Questa hè l'IP quandu sò dumandesi i vostri duminii di i carte. Se ùn cunnosci micca u vostru indirizzu IP, pudete cercà.
- Copia u testu nantu à a "Linea API:" (micca includeu stu titulu). Questa hè a vostra chjave di l'API per i vostri mape.
02 di 05
Cunvertu U vostru indirizzu à Coordenate
Per utilizà Google Maps nantu à e vostre pagine web, hè bisognu à avè a latitudina è a longitude per u locu. Pudete ottene d'un GPS o pudete utilizà una strumenta in ligna cum'è Geocoder.us per dite.
- Va a Geocoder.us è scrivele in a vostra indirizzu in a casella di ricerca.
- Copia u primu numeru per a latitudina (senza carta in fronte) è aghjustate in un schedariu di testu. Ùn avete bisognu di u diploma (º) indicatore.
- Copia u primu numeru per a longitude (torna senza una lettera in fronte) è aghjustate in u vostru file di testu.
A vostra latitudina è longitude viderà cusì chistu:
40.756076
-73.990838
Geocoder.us solu opere per l'indirizzu US, se ne avete bisogna à coordonnées in un altru paese, circate di circà una strumenta simili in a vostra regione.
03 di 05
Adding the Map to Your Web Page
Prima, aghjunghjenu a Scrittura Mappa di u situ
di u vostru ducumentu
Apertura a pàgina web è aghjunghje i seguenti à a CORAZZA di u vostru ducumentu.
Cambia a parte sottumessu à a latitudina è in quantità di lonzitudine scritte in u passu dui.
Sicunna, aghjunghjenu l'Elementu per u vostru Pagina
Quandu avete tutte l'elementi di scrittore aghjunghjenu à a CORAZZA di u vostru ducumentu, avete bisognu di pusà a vostra mappa nantu à a pagina. Fate cusì aghjunghje un element DIV cù l'attribu id = "carte-cartone". Ju ricumanda chì ancu dinò sta scelta cù a larghezza è altezza chì si sò fit in a vostra pagina:
Finalmente, Upload and Test
L'ultima cosa di fà hè carica a vostra pagina è pruvà chì a vostra mappa appressu. Eccu un esempiu di un situazione Google nantu à a pagina. Nota, per via di a manera chì CSS works di u Cuttvigliu Cunsolutore, avete da cliccà un ligame per avè appena u mappa. Questu ùn sarà micca u casu nantu à a vostra pàgina.
Se a vostra mappa ùn si prisenta, pruvate iniziendu cù un attribu BODY:
onload = "initialize ()" >
Ogni cosa di verificà chì u vostru situ hè micca carricu include:
- Certi chji pruposi in u vostru JavaScript, ancu u casu. JavaScript hè fattivu maiò.
- Assicuratevi di avè u zoom u opere di centru.
- Assicuratevi chì u vostru elementu DIV hè nantu à a pagina cù l'identità curretta.
- Assicuratevi chì u vostru elementu DIV hè una altezza.
04 di 05
Add a Marker à u vostru situ
Ma chì hè bonu hè un carte di a vostra situazione si ùn ci hè nisun marcu chì dice à e persone chì duverebbenu esse?
Per aghjunghje un marmurale standard di Google Maps aghjunghje a versione di u vostru scrittore quì sottu u var map = ... line:
var myLatlng = nova google.maps.LatLng ( latitudine, longitude );
var marker = novu google.maps.Marker ({
position: myLatlng,
mappa: mappa,
titulu: " Esistenu questu suprattu "
});
Cambiassi u testu in evidenza à a vostra latitudine è longitude è u tìtulu valevi apparenza quandu a passe nantu à u marcatura.
Pudete aghjunte parechje marcatori in a pagina cum'è piace, aghjustate novi variate cù e coordonnées è tuli, ma se u mappa hè spargugliu per vede tutti i marcatori, ùn vi mancu esse spiegatu cum'è chì u lettore scrivi.
var latlng 2 = novu google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = novu google.maps.Marker ({
pusizione: latlng 2 ,
mappa: mappa,
titulu: " Apple Computer "
});
Eccu un esempiu di un cartulare di Google cun un marcatu. Nota, per via di a manera chì CSS works di u Cuttvigliu Cunsigliu di u Cottondale, avete a clicu un ligame per avè appena u mappa. Questu ùn sarà micca u casu nantu à a vostra pàgina.
05 di 05
Aghjunghje una secunna (o più) Mapa per a vostra pagina
Se avete vistu u mo esempiu a pagina di i mape di Google avà avvistu chì aghju più di un cartulare nant'à a pagina. Questu hè assai facile per fà. Eccu cumu.
- Cumpressate a latitudina è a largitudine di tutti i mapuli chì vogliu vede cum'è avemu avutu in u passu 2 di stu tutoriale.
- Inserisce u primu carte quantu avemu amparatu à u passu 3 di stu tutoriale. Se vulete chì u mapa per avè un marcatu, aghjunghje u marcatura in u passu 4.
- Per a seconda mappa, avete bisognu di aghjunghje 3 novi linii à u vostru scrittu inizizianu ():
var latlng2 = novu google.maps.LatLng ( second ordinate);
var myOptions2 = {zoom: 18, centru: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map2 = nova google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Se vulete un marcatu nantu à u novu mappa, aghjunghje un secondmentu indicatu à a seconda coordenada è a seconda mappa:
var myMarker2 = nova google.maps.Marker ({position: latlng2 , mappa: map2 , title: " Your Marker Title "}); - Dopu aghjusta u sicondu
induve vulete a seconda mappa. E assicuratevi di dà una identità id = "map_canvas_2" ID.
- Quandu a vostra pàgina cuntene, duie mapepi vi vede
Quì hè u codice di una pagina cù dui mape di Google nantu à questu: