Share
Cosa starai creandoIn questo tutorial illustreremo il processo di creazione di una mappa Google con marchio per un cliente immaginario. La nostra mappa includerà tre funzionalità chiave:
In questo caso, il nostro cliente immaginario sarà "The Hobby Shoppe", fornitore di giochi da tavolo pregiati e altri accessori per hobby intorno alla città di Melbourne, in Australia.
Faremo girare la palla creando una mappa base centrata sulla città di Melbourne. Dopo aver aggiunto i nostri indicatori di ramo, perfezioneremo la posizione centrale della mappa, ma per ora inizieremo trovando la giusta latitudine e longitudine per mostrare la città nel suo complesso.
Per fare questo vai su Google Maps e cerca Melbourne, quindi ingrandisci leggermente in modo da non includere aree non popolate. Mentre modifichi la posizione della mappa, noterai che le modifiche dell'URL riflettono la tua nuova latitudine, longitudine e livello di zoom. Quando hai la mappa posizionata dove preferisci, copia l'URL da qualche parte per un successivo riferimento, ad esempio:
https://www.google.com/maps/place/Melbourne+VIC/@-37.804627...
Dopo il @ simbolo nell'URL vedrai valori separati da virgola per la latitudine, la longitudine e il livello di zoom: -37.8046274,144.972156,12z
Il primo valore -37.8046274 è la latitudine, il secondo valore 144.972156 è la longitudine e il 12Z valore indica che il livello di zoom è impostato su 12. Ora inseriremo questi valori in una mappa di base.
Creare un documento HTML vuoto e aggiungere il seguente codice:
Con questo markup abbiamo creato un documento HTML che include a div con l'id map-canvas che manterrà la nostra mappa. Abbiamo anche aggiunto alcuni CSS di base per ridimensionare e posizionare il map-canvas div.
Infine, abbiamo caricato lo script richiesto dall'API di Google Maps con:
e abbiamo creato una funzione JavaScript per impostare le opzioni di base della mappa e caricarla nel nostro div vuoto.
Nota: guarda come i valori che abbiamo preso prima dall'URL di Google Maps sono stati utilizzati in centerPos e zoomLevel variabili, che a loro volta sono usate nel mapOptions array. Il centerPos variabile usa i valori di latitudine e longitudine separati da virgole di -37.8046274,144.972156, e il zoomLevel variabile usa il valore di 12.
Salva il tuo file HTML e aprilo in qualsiasi browser. La tua mappa di base dovrebbe apparire un po 'come questa:
Il prossimo passo è trovare la latitudine e la longitudine per ciascuna delle filiali del cliente, così possiamo creare dei marcatori per queste posizioni. Il modo più semplice per farlo è quello di trovare ogni indirizzo di filiale tramite una ricerca su Google Maps e prendere latitudine e longitudine da lì.
Torna di nuovo a Google Maps ed esegui una ricerca per ogni posizione di filiale. Supponendo che il cliente ti abbia dato gli indirizzi di ogni posizione, puoi semplicemente cercare quell'indirizzo e un marcatore comparirà sulla mappa. Fai clic con il tasto destro su quel marcatore e scegli Cosa c'è qui? dal menu di scelta rapida.
Un piccolo popup apparirà in alto a sinistra nella mappa che mostra i dettagli di questo marker, tra cui latitudine e longitudine:
Prendi nota della latitudine e della longitudine per ciascuna delle posizioni delle filiali che desideri aggiungere alla tua mappa. Nel caso di "The Hobby Shoppe" abbiamo sette filiali e aggiungeremo marcatori per ognuno inserendo il seguente codice poco prima della fine della nostra mappa inizializzare() funzione, dopo il map = new google.maps.Map ... linea:
var locations = [['First Shoppe', -37.808204, 144.855579], ['Second Shoppe', -37.675648, 145.026125], ['Third Shoppe', -37.816935, 144.966877], ['Fourth Shoppe', -37.818714, 145.036494 ], ['Fifth Shoppe', -37.793834, 144.987018], ['Sixth Shoppe', -37.737116, 144.998581], ['Seventh Shoppe', -37.765528, 144.922624]]; per (i = 0; i < locations.length; i++) marker = new google.maps.Marker( position: new google.maps.LatLng(locations[i][1], locations[i][2]), title: locations[i][0], map: map );
In questo codice stiamo prima creando una serie di locazioni con il nome, la latitudine e la longitudine di ciascuna. Stiamo quindi iterando attraverso quell'array per aggiungere ogni posizione come un marker alla mappa, con il titolo da visualizzare come suggerimento se il pennarello è posizionato sopra.
Ora la tua mappa dovrebbe avere marcatori aggiunti in questo modo:
Ma aspetta, c'è qualcosa di sbagliato in questa immagine. Abbiamo aggiunto sette posizioni e tuttavia appaiono solo sei indicatori. Perché?
È semplicemente perché il nostro settimo indicatore è appena fuori vista in base alla latitudine e alla longitudine iniziali impostate per la mappa, quindi dobbiamo ridefinire quella posizione centrale.
Ora che abbiamo tutti i nostri marcatori sul posto possiamo perfezionare la posizione di partenza della mappa per assicurarci che siano tutti visibili sul carico. Per fare ciò aggiungiamo un pulsante che possiamo cliccare per darci nuove coordinate una volta trovata la posizione di partenza della mappa perfetta.
Aggiungi questo codice pulsante alla tua pagina, ovunque nel file corpo sezione:
Ora puoi spostare la mappa e poi fare clic sul nuovo Ottieni mappe Co-ords pulsante quando trovi il posto giusto.
La latitudine, la longitudine e il livello di zoom della tua posizione verranno scritti sulla tua console, quindi assicurati di avere gli strumenti Chrome Dev o la console Firebug aperti.
Aggiorna la tua mappa centro opzione con la nuova latitudine e longitudine, così come il zoom opzione se anche questo è cambiato:
var mapOptions = center: new google.maps.LatLng (-37.74723337588968,144.961341333252), zoom: 12;
Salva e aggiorna la tua mappa e ora tutti i sette indicatori di mappa dovrebbero essere visibili. Quando sei soddisfatto della raffinata posizione centrale puoi rimuovere il Ottieni mappe Co-ords codice del pulsante.
Ora che abbiamo tutti i marcatori sul posto e visibili per le filiali, li convertiremo in un'immagine personalizzata, che si accompagna al marchio del cliente e allo stile della mappa. Qualsiasi immagine creata per l'uso come indicatore di mappa dovrebbe avere uno sfondo trasparente, ad es.
Posiziona il tuo indicatore personalizzato in una cartella "immagini", in relazione alla cartella in cui si trova la tua mappa di base, quindi aggiungi la seguente variabile direttamente sotto posizioni variabile creata in precedenza:
var image = 'images / shoppe_icon.png';
Quindi aggiungi un'opzione extra di icona: immagine al per loop creato in precedenza per posizionare i marcatori di mappa. Passando questa variabile nelle opzioni di generazione dei marker della mappa si specifica che si desidera sostituire le icone dei marker con l'immagine personalizzata:
per (i = 0; i < locations.length; i++) marker = new google.maps.Marker( position: new google.maps.LatLng(locations[i][1], locations[i][2]), title: locations[i][0], map: map, icon: image );
Dai un altro sguardo alla tua mappa e dovresti vedere ora le casette in ciascuna delle sette sedi delle filiali:
Ora aggiungeremo il logo del cliente in modo che rimanga della stessa dimensione e nella stessa posizione indipendentemente da dove la mappa viene ingrandita o ridotta a.
Gli unici elementi di una mappa di Google che non si spostano con il panning e lo zoom sono gli elementi dell'interfaccia utente di controllo, generalmente utilizzati per cose come coinvolgere la vista stradale o cambiare i tipi di mappe. Tuttavia, possiamo utilizzare l'API di controllo personalizzato altrettanto bene per posizionare un logo sullo schermo. Avremo anche il nostro nuovo controllo personalizzato per ripristinare lo zoom e la posizione centrale della mappa quando cliccato così come visualizzare il logo che esegue una utile funzione dell'interfaccia utente.
Inizia aggiungendo l'immagine del logo del tuo cliente nella stessa cartella "immagini" in cui hai inserito l'immagine del marcatore personalizzato. Quindi aggiungi la seguente funzione JavaScript appena prima della tua esistente inizializzare() funzione:
Accentsconagua
function LogoControl (controlDiv, map) controlDiv.style.padding = '5px'; var controlUI = document.createElement ('div'); controlUI.style.backgroundImage = 'url (images / logo.png)'; controlUI.style.width = '600px'; controlUI.style.height = '116px'; controlUI.style.cursor = 'pointer'; controlUI.title = 'Clicca per impostare la mappa su Home'; controlDiv.appendChild (controlUI); google.maps.event.addDomListener (controlUI, 'click', function () map.setCenter (centerPos) map.setZoom (zoomLevel)); Quando viene eseguita, questa funzione crea un elemento dell'interfaccia utente di controllo 600px di 116px in dimensioni, utilizzando l'immagine del logo come sfondo. Creerà anche un listener che resetterà il centro e lo zoom della mappa se si fa clic sul logo.
Quindi, alla fine del tuo inizializzare() funzione, inserisci il seguente codice:
var logoControlDiv = document.createElement ('div'); var logoControl = new LogoControl (logoControlDiv, map); logoControlDiv.index = 1; map.Controls [google.maps.ControlPosition.TOP_CENTER] .push (logoControlDiv);Quando il inizializzare() la funzione viene eseguita chiamerà ora LogoControl () funzione che abbiamo appena creato e aggiungere il suo output nei controlli della mappa.
La tua mappa dovrebbe ora assomigliare a questa:
Per impostare i colori della tua mappa, quasi sicuramente vorresti utilizzare la Procedura guidata mappa in stile di Google per ottenere un rapido riscontro visivo delle tue scelte.
Il Tipo di caratteristica il menu nella procedura guidata offre una gamma di componenti della mappa disponibili per lo stile. Sono organizzati dal più generale, fino al più specifico. Al livello più generale è possibile applicare le scelte di colore al Tutti tipo di funzione, al fine di influenzare tutto sulla mappa allo stesso modo. Dall'altra parte dello spettro è possibile eseguire il drill down specificatamente come Tutto> Transito> Stazione> Bus per esempio.
Con un Tipo di caratteristica selezionato puoi quindi anche effettuare una selezione dal menu Tipo di elemento menu per determinare se vuoi che le tue scelte di colore influenzino la geometria della feature o le sue etichette (come le piccole etichette di testo che vedi fluttuanti intorno alla mappa). Inoltre, è possibile selezionare anche il colore di riempimento o del tratto da modificare.
Quando si tratta di scegliere i colori ci sono due aree principali con cui lavorare; il Colore pannello e il colore pannello. Il Colore il pannello applicherà un codice esadecimale di colore in modo piatto alle caratteristiche e agli elementi che hai selezionato, mentre il colore il pannello tingerà la tua selezione con una gamma di luminosità e oscurità influenzata dal colore originale di ciascun elemento.
Come regola generale dovresti iniziare applicando a colore ai livelli più generali della tua mappa in modo da avere un po 'di uniformità nella tua combinazione di colori: puoi confrontarla con una vernice di base. Da lì è quindi possibile eseguire il drill down fino a "dipingere" sopra con il piano Colore impostazioni per caratteristiche e elementi più specifici.
Inizia a cercare nella "procedura guidata" per "Melbourne" e poi posiziona la mappa di anteprima per mostrare approssimativamente la stessa area che hai impostato per mostrare la tua mappa.
Sotto il Tipo di caratteristica menu nella procedura guidata selezionare Tutti, e sotto il Tipo di elemento selezionare il menu Geometria. Quindi controlla il colore casella e fare clic sulla barra dei colori fino a ottenere un valore da qualche parte intorno # ffa200. Per qualche motivo non puoi inserire direttamente un valore in questo campo, quindi devi farlo il più vicino possibile cliccando. Quindi controlla il Invertire la leggerezza box, attiva il Saturazione impostazione e trascinarlo a 35, attivare il Leggerezza impostazione e posto a 50, e attivare il Gamma impostando e avvicinandolo il più possibile 1.3.
Queste impostazioni dovrebbero avere colorato l'intera mappa in questo modo:
La tua mappa sembra un po 'divertente in questa fase, perché stiamo mirando a creare una mappa colorata, quindi le impostazioni della tinta qui sono state amplificate per garantire che non vi siano zone desolate ovunque. Le aree eccessivamente luminose verranno sostituite con colori più attenuati nei passaggi successivi.
Ora che hai applicato il tuo primo stile, fai clic su Inserisci pulsante nell'angolo in alto a destra del Stile della mappa pannello, (situato sul lato destro della procedura guidata della mappa). Facendo clic su questo pulsante viene creato un secondo stile denominato "Stile 1" in base al quale è possibile selezionare diversi elementi e applicare nuovi stili.
Con "Stile 1" selezionato nel Stile della mappa pannello e Tutti ancora selezionato sotto Tipo di caratteristica clicca il etichette opzione nella seconda lista di Tipo di elemento menu. Controlla il colore casella e di nuovo impostarlo su un valore di # ffa200 quindi le etichette sono tutte tinte invece che blu o verdi come si vede nell'immagine sopra.
Clicca il Inserisci pulsante sul Stile della mappa pannello per creare un altro nuovo stile, quindi fare clic acqua nella seconda lista di Tipo di caratteristica menu. Sotto il Tipo di elemento selezionare il menu Geometria. Controlla il Colore casella e inserire un codice esadecimale di colore di # 8F9B98.
Ora dovresti sapere come creare nuovi stili, selezionando Tipo di caratteristica e Tipo di elemento voci del menu. Vai avanti e aggiungi il resto di questi stili uno alla volta nella procedura guidata mappa in stile:
Una volta aggiunti tutti questi stili, sei pronto per esportare le impostazioni che la procedura guidata ha creato e aggiungerle alla tua mappa. Sul Stile della mappa pannello clicca il Mostra JSON pulsante in basso. Apparirà una finestra bianca che mostra una serie di opzioni JavaScript.
Copia tutto il testo da quella finestra tra l'apertura [ e chiusura ], cioè tutto tranne l'intestazione principale.
All'inizio del tuo inizializzare() funzione aggiungi questa nuova linea:
var styles =;
Posiziona il cursore prima del ; quindi incollare il codice copiato dalla procedura guidata mappa in stile. Dovresti finire con:
var styles = ["elementType": "geometry", "stylers": ["hue": "# ffa200", "invert_lightness": true, "lightness": 50, "saturazione": 35, "gamma": 1.31], "elementType": "labels", "styler": ["hue": "# ffa200"], "featureType": "water", " elementType ":" geometry "," stylers ": [" color ":" # 8F9B98 "], " elementType ":" labels.text.fill "," styler ": [" color ":" # f8ead0 "], " elementType ":" labels.text.stroke "," styler ": [" color ":" # 6a5035 "], " featureType ":" landscape.natural "," elementType ":" geometry "," stylers ": [" color ":" # 9c9743 "], " featureType ":" landscape.man_made "," elementType ":" geometry "," stylers ": [" color ":" # 9f8053 "], " featureType ":" poi "," elementType ":" geometry "," stylers ": [" color ":" # ACA74C "], " featureType " : "road", "elementType": "geometry.fill", "stylers": ["color": "# d3b681"], "featureType": "road", "elementType": "geometry.stroke "," styler ": [" color ":" # 644F34 "], " featureType ":" road.arterial "," elementType ":" geometry.fill "," stylers ": [" color ":" # c6a15e "], " featureType ":" road.local "," elementType " : "geometry.fill", "stylers": ["color": "# b09061"], "featureType": "transit.line", "elementType": "geometry", "stylers": [ "color": "# 876b48"], "featureType": "transit.station", "elementType": "geometry", "stylers": ["color": "# a58557"]];
Quindi alla fine del inizializzare() funzione aggiungi queste tre linee:
var styledMap = new google.maps.StyledMapType (styles, name: "Styled Map"); map.mapTypes.set ('map_style', styledMap); map.setMapTypeId ( 'map_style');Queste linee di codice applicano tutti i dati dello schema di colori appena estratti dalla procedura guidata mappa sulla mappa. Dare un altro sguardo e dovrebbe ora apparire con tutte le selezioni di stile in atto:
Guarda la demo live in modo da poter vedere la mappa alle sue dimensioni corrette e giocare con lo zoom e panoramica qui.
Come tocco finale potresti anche voler aggiungere un effetto cornice attorno alla tua mappa per complimentarmi ulteriormente con lo stile. Sostituisci l'esistente # map-canvas ... CSS nel tuo file con questo:
# map-canvas height: 90%; border: 5px solid # 33210f; -moz-box-shadow: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; -webkit-box-shadow: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; box-shadow: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000;
Come puoi vedere, c'è molto che puoi fare con Google Maps oltre l'incorporamento di base. In questo tutorial abbiamo ancora esplorato solo un paio di aspetti dell'API di Google Maps: puoi leggere ulteriori informazioni su tutte le altre funzioni offerte dall'API nei documenti di assistenza di Google Map.
Se vuoi portare questo tutorial ancora di più, puoi anche provare ad aggiungere i tuoi controlli di zoom e pan personalizzati (documenti di controllo personalizzati) e creare finestre di informazioni che si aprono quando si fa clic sugli indicatori. Questi popup potrebbero contenere dettagli come il numero di telefono e l'indirizzo (documenti di windows info).
Prova queste tecniche a provare la prossima volta che un cliente ti chiede di includere una mappa di Google nel loro sito. Potresti ricevere un bonus!
