Share
Vad du ska skapaI den här handledningen går vi igenom processen att skapa en Google-kartong för en imaginär klient. Vår karta kommer att innehålla tre nyckelfunktioner:
I det här fallet kommer vår imaginära klient att vara "The Hobby Shoppe", hantverkare av fina brädspel och andra hobbyapparater runt Melbourne, Australien.
Vi kommer att få bollen att rulla genom att skapa en grundläggande karta centrerad i Melbourne. När vi lägger till våra grenmarkörer kommer vi att förfina kartens mittposition, men för närvarande börjar vi med att hitta rätt latitud och longitud för att visa staden som helhet.
För att göra detta, gå till Google Maps och sök efter Melbourne, Zooma in så lite så att du inte inkluderar obefolkade områden. När du justerar positionen på kartan märker du URL-ändringarna för att återspegla din nya latitud-, longitud- och zoomnivå. När du har placerat kartan där du vill kan du kopiera webbadressen någonstans för senare referens, till exempel:
https://www.google.com/maps/place/Melbourne+VIC/@-37.804627...
Efter @ symbol i webbadressen får du se kommaseparerade värden för latitud, longitud och zoomnivå: -37.8046274,144.972156,12z
Det första värdet -37.8046274 är latitud, det andra värdet 144.972156 är longituden, och 12Z värde betyder att zoomnivån är inställd på 12. Vi ska nu ansluta dessa värden till en grundläggande karta.
Skapa ett tomt HTML-dokument och lägg till följande kod:
Med denna markering har vi skapat ett HTML-dokument inklusive en div med id map-duk som håller vår karta. Vi har också lagt till några grundläggande CSS i storlek och positionerar map-duk div.
Slutligen har vi laddat in det nödvändiga skriptet från Google Map API med:
och vi har skapat en JavaScript-funktion för att ställa in de grundläggande alternativen på kartan och ladda den i vår tomma div.
Notera: se hur de värden vi tog från Google Maps-webbadressen tidigare har använts i centerPos och zoomLevel variabler, som i sin tur används i mapOptions array. De centerPos variabel använder de kommaseparerade latitud- och longitudvärdena för -37.8046274,144.972156, och den zoomLevel variabel använder värdet av 12.
Spara HTML-filen och öppna den i en webbläsare. Din baskarta ska se lite ut så här:
Nästa steg är att hitta latitud och longitud för var och en av klientens grenplaceringar, så vi kan skapa markörer för dem i dessa positioner. Det enklaste sättet att göra detta är att hitta varje grenadress via en Google Maps-sökning och ta tag i latitud och longitud därifrån.
Gå tillbaka till Google Maps igen och kör en sökning efter varje filplacering. Om du antar att klienten har gett dig adresserna på varje plats kan du helt enkelt söka efter den adressen och en markör visas på kartan. Högerklicka på markören och välj Vad är det här? från snabbmenyn.
En liten popup visas längst upp till vänster på kartan som visar detaljer för denna markör inklusive latitud och longitud:
Notera latitud och longitud för varje grenplats du vill lägga till på din karta. När det gäller "The Hobby Shoppe" har vi sju filialer och vi lägger till markörer för varje genom att infoga följande kod strax före slutet av vår karta initialisera () funktion, efter map = nya google.maps.Map ... linje:
var platser = [['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]]; för (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 );
I den här koden skapar vi först en rad grenorter med namnet, latitud och longitud för varje. Vi repeterar sedan genom den här matrisen för att lägga till varje plats som en markör till kartan, med titeln att visas som ett verktygstips om markören svävar över.
Din karta ska nu ha markörer tillagda så här:
Men vänta, det är något fel på den här bilden. Vi lade till sju platser, och ändå visas bara sex markörer. Varför?
Det är helt enkelt för att vår sjunde markör bara är oförutsedd baserat på den ursprungliga latitud och longitud som vi ställt in för kartan, så vi måste förfina den centrala positionen.
Nu när vi har alla våra markörer på plats kan vi förfina startpositionen för kartan för att se till att de är synliga på lasten. För att göra så lägger vi till en knapp som vi kan klicka för att ge oss nya koordinater när vi hittar den perfekta kartan startposition.
Lägg till den här knappkoden på din sida, var som helst i kropp sektion:
Nu kan du flytta din karta runt och sedan klicka på den nya Få kartkoordinater knappen när du hittar rätt plats.
Breddgrad, longitud och zoomnivå för din position skrivs till konsolen, så se till att du har Chrome Dev Tools eller Firebug-konsolen öppen.
Uppdatera din karta Centrum alternativ med ny latitud och longitud, liksom zoom alternativ om det har ändrats också:
var mapOptions = center: new google.maps.LatLng (-37.74723337588968,144.961341333252), zoom: 12;
Spara och uppdatera din karta och nu ska alla sju kartmarkörer vara synliga. När du är nöjd med den raffinerade mittpositionen kan du ta bort Få kartkoordinater knapp kod.
Nu när vi har alla markörer på plats och synliga för filialplatserna ska vi konvertera dem till en anpassad bild, en som går med klientens märkning och stilen på kartan. Varje bild som skapats för användning som en kartmarkör ska ha en transparent bakgrund, t.ex..
Placera din anpassade markör i en "bilder" -mapp, i förhållande till mappen din baskarta är i, lägg sedan till följande variabel direkt under platser variabel du skapade tidigare:
var image = 'images / shoppe_icon.png';
Lägg sedan till ett extra alternativ på ikon: bild till för slinga vi skapade tidigare för att placera kartmarkörer. Om du skickar denna variabel till alternativet för kartmarkering anger du att du vill att markörsikonen ska ersättas med din anpassade bild:
för (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 );
Ta en titt på din karta och du bör nu se små hus på var och en av de sju grenarna:
Vi lägger nu till klientens logotyp på ett sådant sätt att det kommer att förbli lika stor och i samma position oavsett var kartan zoomas eller panoreras till.
De enda elementen i en Google Map som inte flyttar med panorering och zoomning är kontrollen UI-element, vanligtvis används för saker som att engagera gatuvy eller byta karttyper. Vi kan dock använda det anpassade kontroll API lika bra för att placera en logotyp på skärmen. Vi har också vår nya anpassade kontrollåterställning zoom och mittpositionen för kartan när den klickas så väl som att visa logotypen som utför en användbar UI-funktion.
Börja med att lägga till din kunds logotypbild i samma "bilder" -mapp som du placerat din anpassade markörbild. Lägg sedan till följande JavaScript-funktion precis före din befintliga initialisera () fungera:
Accentsconagua
funktion 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 = 'pekare'; controlUI.title = 'Klicka för att ställa in kartan till Hem'; controlDiv.appendChild (controlUI); google.maps.event.addDomListener (controlUI, "click", funktion () map.setCenter (centerPos) map.setZoom (zoomLevel)); När den körs kommer den här funktionen att skapa ett kontroll-gränssnitt-element 600px med 116px i storlek, med hjälp av logotypen som bakgrund. Det kommer också att skapa en lyssnare som kommer att återställa mitten och zooma på kartan om logotypen klickas.
Då, i slutet av din initialisera () funktion, sätt in följande kod:
var logoControlDiv = document.createElement ('div'); var logoControl = ny LogoControl (logoControlDiv, map); logoControlDiv.index = 1; map.controls [google.maps.ControlPosition.TOP_CENTER] .push (logoControlDiv);När initialisera () funktionen körs det kommer nu att ringa LogoControl () funktion som vi just skapat och lägger till dess utmatning i kartkontrollerna.
Din karta ska nu se ut så här:
För att ställa in färgerna på din karta vill du säkert använda Googles guidade guidebok för att få snabb visuell feedback om dina val.
De Funktionstyp Menyn i guiden ger dig en rad kartkomponenter tillgängliga för styling. De är organiserade från de mest generella, till de mest specifika. På den mest generella nivån kan du använda färgval till Allt funktionstyp, för att på samma sätt påverka allt på kartan. I den andra änden av spektret kan du borra ner så specifikt som Alla> Transit> Station> Bus till exempel.
Med en Funktionstyp valda kan du också göra ett urval från Element typ menyn för att bestämma om du vill att dina färgval ska påverka geometrins geometri eller dess etiketter (t.ex. de små textetiketterna som du ser flytande runt kartan). Dessutom kan du också välja antingen fyllnings- eller strokefärg för att ändra.
När det gäller att välja färger finns två huvudområden som du vill arbeta med; de Färg panel och Nyans panel. De Färg panelen kommer att applicera en färg hexcode platt till de funktioner och element du har valt, medan Nyans panelen kommer att tona ditt val med en mängd ljusstyrka och mörker som påverkas av varje elements ursprungliga färg.
Som en allmän regel bör du börja med att tillämpa en Nyans till de mest generella nivåerna på din karta så att du har en viss likformighet i ditt färgschema - du kan jämföra det med en basfärgfärg. Därifrån kan du sedan borra ner till "måla" över toppen med platt Färg inställningar för mer specifika funktioner och element.
Börja med att söka i guiden för "Melbourne" och sedan placera förhandsgranskningskartan för att visa ungefär samma område som du har skapat en egen karta för att visa.
Under Funktionstyp menyn i guiden välj Allt, och under Element typ meny välj Geometri. Kontrollera sedan Nyans rutan och klicka på färgfältet tills du får ett värde av någonstans # ffa200. Av någon anledning kan du inte direkt ange ett värde i det här fältet, så du måste få det så nära du kan genom att klicka. Kontrollera sedan Invertera ljushet box, aktivera Mättnad inställningen och dra den till 35, aktivera Lätthet ställa in och placera den på 50, och aktivera Gamma inställning och få det så nära som möjligt 1,3.
Dessa inställningar borde ha tonat hela kartan så här:
Din karta ser lite roligt ut i det här skedet eftersom vi syftar till att göra en färgstark karta, så nyanserna här har blivit amped upp för att säkerställa att det inte finns några drabbade områden någonstans. De alltför ljusa områdena kommer att överskridas med mer dämpade färger i efterföljande steg.
Nu när du har tillämpat din första stil klickar du på Lägg till knappen i det övre högra hörnet av Kartstil panel, (längst till höger om kartguiden). Genom att klicka på den här knappen skapas en andra stil som heter "Style 1", där du kan välja olika element och tillämpa nya stilar.
Med "Style 1" vald i Kartstil panel och Allt fortfarande vald under Funktionstyp Klicka på Etiketter alternativet i den andra listan av Element typ meny. Kolla Nyans rutan och ställ den igen till ett värde av # ffa200 så dina etiketter är alla tonade istället för att vara ljusblå eller gröna som du ser på bilden ovan.
Klicka på Lägg till knapp på Kartstil panelen för att skapa en ny stil och klicka sedan på Vatten i den andra listan av Funktionstyp meny. Under Element typ meny välj Geometri. Kolla Färg rutan och ange en färg hexcode av # 8F9B98.
Du borde nu veta hur man skapar nya stilar genom att välja Funktionstyp och Element typ menyval. Fortsätt och lägg till resten av dessa stilar en i taget i den städa kartguiden:
När du har lagt till alla dessa stilar är du redo att exportera de inställningar som guiden har skapat och lägger till dem i din karta. På Kartstil panelen klicka på Visa JSON knappen längst ner. Du får se ett vitt fönster visas, som visar en rad JavaScript-alternativ.
Kopiera all text från det fönstret mellan öppningen [ och stängning ], dvs allt utom huvudrubriken.
I början av din initialisera () funktion lägg till den här nya raden:
var styles =;
Placera markören före ; klistra in sedan i koden du kopierade från guiden Stilad kartor. Du borde sluta med:
var style = invert_lightness: true, "lightness": 50 metaturtype: geometri 35, "gamma": 1.31], "elementType": "etiketter", "styler": ["nyans": "# ffa200"], "featureType" elementType ":" geometri "," stylers ": [" color ":" # 8F9B98 "], " elementType ":" labels.text.fill "," stylers " f8ead0 "], " elementType ":" labels.text.stroke "," stylers ": [" färg ":" # 6a5035 "], " featureType ":" landscape.natural "," elementType "" geometri "," stylers ": [" color ":" # 9c9743 "], " featureType ":" landscape.man_made "," elementType ":" geometri "," stylers " Färg ":" # 9f8053 "], " featureType ":" poi "," elementType ":" geometri "," stylers ": [" färg ":" # ACA74C "], " featureType " : "road", "elementType": "geometry.fill", "stylers": ["färg": "# d3b681"], "featureType": "road", "elementType": "geometry.stroke "," stylers ": [" color ":" # 644F34 "], " featureType ":" road.arterial "," elementType ":" geometry.fill "," stylers ": [" färg ":" # c6a15e "], " featureType ":" road.local "," elementType " : "geometry.fill", "stylers": ["color": "# b09061"], "featureType": "transit.line", "elementType": "geometri" "färg": "# 876b48"], "featureType": "transit.station", "elementType": "geometri", "stylers": ["color": "# a58557"]];
Sedan i slutet av initialisera () funktion lägg till dessa tre rader:
var styledMap = nya google.maps.StyledMapType (stilar, namn: "Styled Map"); map.mapTypes.set ('map_style', styledMap); map.setMapTypeId ( 'map_style');Dessa kodlinjer gäller alla färgschemalagsdata du bara har dragit in från den grafiska kartguiden till din karta. Ta en ny titt och det ska nu visas med alla dina stylingval på plats:
Kolla in live demo så att du kan se kartan med rätt storlek och spela runt med zoomning och panorering här.
Som en sista touch kan du också lägga till en rameffekt runt din karta för att ytterligare komplettera styling. Ersätt det befintliga # map-canvas ... CSS i din fil med detta:
# map-canvas höjd: 90%; gränsen: 5px solid # 33210f; -moz-box-skugga: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; -webkit-box-skugga: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; boxskugga: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000;
Som du kan se finns det ganska mycket du kan göra med Google Maps utöver bara grundläggande inbäddning. I den här handledningen har vi fortfarande bara undersökt några av aspekterna av Google Maps API - du kan läsa mer om alla andra funktioner som erbjuds av API: n i hjälpkartan för Google Map..
Om du vill ta den här handledningen ännu mer kan du också försöka lägga till egna skräddarsydda zoom- och pan-kontroller (anpassade kontrolldokument) och skapa informationsfönster som dyker upp när markörer klickas. Dessa popup-fönster kan innehålla detaljer som telefonnummer och gatuadress (info windows docs).
Ge dessa tekniker ett försök nästa gång en klient ber dig att inkludera en Google Map på deras webbplats. Du kanske bara får en bonus!
