Share
Wat je gaat creërenIn deze zelfstudie doorlopen we het proces voor het maken van een gemerkte Google-kaart voor een imaginaire client. Onze kaart bevat drie belangrijke functies:
In dit geval zal onze denkbeeldige klant "The Hobby Shoppe" zijn, leveranciers van fijne bordspellen en andere hobbyparafernalia rond de stad Melbourne, Australië.
We zullen de bal aan het rollen brengen door een basiskaart te maken die zich concentreert op de stad Melbourne. Nadat we onze aftakkingsmarkeringen hebben toegevoegd, zullen we de middenpositie van de kaart verfijnen, maar voorlopig zullen we beginnen met het vinden van de juiste breedtegraad en lengtegraad om de stad als geheel te tonen.
Ga hiervoor naar Google Maps en zoek naar Melbourne, zoom dan een beetje in, zodat u geen onbevolkte gebieden invoert. Terwijl u de positie van de kaart aanpast, merkt u dat de URL verandert om uw nieuwe breedtegraad-, lengtegraad- en zoomniveau weer te geven. Wanneer u de kaart op de gewenste plek hebt gepositioneerd, kopieert u de URL ergens voor later, bijvoorbeeld:
https://www.google.com/maps/place/Melbourne+VIC/@-37.804627...
Na de @ symbool in de URL ziet u door komma's gescheiden waarden voor de breedtegraad, lengtegraad en zoomniveau: -37.8046274,144.972156,12z
De eerste waarde -37.8046274 is de breedtegraad, de tweede waarde 144.972156 is de lengtegraad en de 12z waarde betekent dat het zoomniveau is ingesteld op 12. We gaan deze waarden nu in een basiskaart stoppen.
Maak een leeg HTML-document en voeg de volgende code toe:
Met deze markup hebben we een HTML-document gemaakt, inclusief een div met de id map-canvas welke onze kaart zal bevatten. We hebben ook wat basissc CSS toegevoegd en de map-canvas div.
Ten slotte hebben we het vereiste script uit de Google Map API geladen met:
en we hebben een JavaScript-functie gemaakt om de basisopties van de kaart in te stellen en in onze lege div te laden.
Notitie: bekijk hoe de waarden die we eerder met de Google Maps-URL hebben gebruikt, zijn gebruikt in de centerPos en zoomniveau variabelen, die op hun beurt worden gebruikt in de mapOptions matrix. De centerPos variabele gebruikt de door komma's gescheiden waarden voor breedtegraad en lengtegraad van -37.8046274,144.972156, en de zoomniveau variabele gebruikt de waarde van 12.
Sla uw HTML-bestand op en open het in elke browser. Je basiskaart zou er ongeveer zo uit moeten zien:
De volgende stap is het vinden van de breedtegraad en lengtegraad voor elk van de vestigingen van de klant, zodat we op die posities markeringen voor hen kunnen maken. De eenvoudigste manier om dit te doen is om elk filiaaladres te vinden via een Google Maps-zoekopdracht en de breedte- en lengtegraad vanaf daar te bepalen.
Ga terug naar Google Maps en voer een zoekopdracht uit naar elke filiaallocatie. Ervan uitgaande dat de client u de adressen van elke locatie heeft gegeven, kunt u eenvoudig naar dat adres zoeken en verschijnt er een markering op de kaart. Klik met de rechtermuisknop op die markering en kies Wat is hier? vanuit het contextmenu.
Er verschijnt een kleine pop-up in de linkerbovenhoek van de kaart met details voor deze markering inclusief breedtegraad en lengtegraad:
Noteer de breedte- en lengtegraad voor elk filiaal dat u aan uw kaart wilt toevoegen. In het geval van "The Hobby Shoppe" hebben we zeven filiaallocaties en we zullen markeringen voor elk toevoegen door de volgende code in te voegen vlak voor het einde van de kaart. initialiseren () functie, na de kaart = nieuwe google.maps.Kaart ... lijn:
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 ], ['Vijfde Shoppe', -37.793834, 144.987018], ['Zesde Shoppe', -37.737116, 144.998581], ['Zevende Shoppe', -37.765528, 144.922624]]; voor (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 deze code maken we eerst een reeks filiaallocaties met de naam, breedte- en lengtegraad van elk. Vervolgens herhalen we de array om elke locatie als markering aan de kaart toe te voegen, waarbij de titel wordt weergegeven als een tooltip als de markering boven.
Op uw kaart moeten nu markeringen worden toegevoegd zoals:
Maar wacht even, er is iets mis met deze foto. We hebben zeven locaties toegevoegd en toch verschijnen er maar zes markeringen. Waarom?
Het komt simpelweg omdat onze zevende markering net buiten beeld is op basis van de oorspronkelijke breedte- en lengtegraad die we hebben ingesteld voor de kaart, dus we moeten die middenpositie verfijnen.
Nu we al onze markeringen op zijn plaats hebben, kunnen we de startpositie van de kaart verfijnen om ervoor te zorgen dat ze allemaal zichtbaar zijn tijdens het laden. Om dat te doen voegen we een knop toe waarop we kunnen klikken om ons nieuwe coördinaten te geven zodra we de perfecte startpositie van de kaart hebben gevonden.
Voeg deze knopcode toe aan uw pagina, overal in de lichaam sectie:
Nu kunt u uw kaart verplaatsen en vervolgens op de nieuwe klikken Kaartafstemming opvragen knop wanneer u de juiste plek vindt.
Het breedtegraad-, lengtegraad- en zoomniveau van uw positie worden naar uw console geschreven. Zorg er dus voor dat de Chrome Dev Tools of Firebug-console open is.
Update uw kaart centrum optie met de nieuwe lengte- en breedtegraad, evenals de zoom optie als dat ook is veranderd:
var mapOptions = center: new google.maps.LatLng (-37.74723337588968,144.961341333252), zoom: 12;
Sla uw kaart op en vernieuw deze en nu moeten alle zeven kaartmarkeringen zichtbaar zijn. Als u tevreden bent met de verfijnde middenpositie, kunt u de Kaartafstemming opvragen knop code.
Nu we alle markeringen op hun plaats hebben en zichtbaar voor de filiaallocaties, zullen we ze omzetten naar een aangepaste afbeelding, een die past bij de merknaam van de klant en de stijl van de kaart. Elke afbeelding die is gemaakt voor gebruik als kaartmarkering, moet een transparante achtergrond hebben, bijv.
Plaats uw aangepaste markering in een map "afbeeldingen" ten opzichte van de map waarin uw basiskaart zich bevindt en voeg vervolgens de volgende variabele direct toe onder de locaties variabele die je eerder hebt gemaakt:
var image = 'images / shoppe_icon.png';
Voeg vervolgens een extra optie toe van pictogram: afbeelding naar de voor loop die we eerder hebben gemaakt om kaartmarkeringen te plaatsen. Als u deze variabele doorgeeft aan de generatieopties van de kaartmarkering, geeft u aan dat u de markeringspictogrammen wilt vervangen door uw aangepaste afbeelding:
voor (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 );
Kijk nog eens goed naar je kaart en je ziet nu kleine huizen op elk van de zeven locaties van filialen:
We gaan het logo van de klant nu zodanig toevoegen dat het dezelfde grootte en dezelfde positie behoudt, ongeacht waar de kaart is ingezoomd of gepand.
De enige elementen van een Google-kaart die niet bewegen met pannen en zoomen, zijn de besturings-UI-elementen, die meestal worden gebruikt voor zaken als het inschakelen van een straatweergave of het wisselen van kaarttypen. We kunnen de aangepaste besturings-API echter net zo goed gebruiken om een logo op het scherm te plaatsen. We hebben ook onze nieuwe aangepaste besturing die de zoom- en middenpositie van de kaart opnieuw instelt wanneer erop wordt geklikt, en geeft ook het logo weer dat het een nuttige gebruikersinterface-functie biedt.
Begin door de afbeelding van uw klant in de map "images" toe te voegen waarin u uw aangepaste markeringsafbeelding hebt geplaatst. Voeg vervolgens de volgende JavaScript-functie toe net voor uw bestaande initialiseren () functie:
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 = 'Klik om de kaart naar startpagina in te stellen'; controlDiv.appendChild (controlUI); google.maps.event.addDomListener (controlUI, 'click', function () map.setCenter (centerPos) map.setZoom (zoomLevel)); Wanneer deze functie wordt uitgevoerd, maakt deze een besturings-UI-element van 600 px met een grootte van 116 px, waarbij de afbeelding van het logo als achtergrond wordt gebruikt. Het zal ook een luisteraar creëren die het midden en de zoom van de kaart zal resetten als op het logo wordt geklikt.
Vervolgens, aan het einde van uw initialiseren () functie, voeg de volgende code in:
var logoControlDiv = document.createElement ('div'); var logoControl = nieuwe LogoControl (logoControlDiv, kaart); logoControlDiv.index = 1; map.Controls [google.maps.ControlPosition.TOP_CENTER] .Schuif (logoControlDiv);Wanneer de initialiseren () functie wordt uitgevoerd, wordt nu het LogoControl () functie die we zojuist hebben gemaakt en voeg de uitvoer toe aan de kaartbedieningen.
Uw kaart zou er nu als volgt uit moeten zien:
Om de kleuren van uw kaart in te stellen, wilt u vrijwel zeker de Styled Map Wizard van Google gebruiken om snelle visuele feedback te krijgen over uw keuzes.
De Functie type menu in de wizard geeft u een reeks kaartonderdelen die u kunt stylen. Ze zijn georganiseerd van de meest algemene, naar de meest specifieke. Op het meest algemene niveau kunt u kleurkeuzes toepassen op de Allemaal kenmerktype, om alles op de kaart gelijk te beïnvloeden. Aan de andere kant van het spectrum kunt u specifiekere drill-downs uitvoeren Alles> Transit> Station> Bus bijvoorbeeld.
Met een Functie type geselecteerd, kunt u vervolgens ook een selectie maken uit de Elementtype menu om te bepalen of u wilt dat uw kleurkeuzes de geometrie van de functie of de labels ervan beïnvloeden (zoals de kleine tekstlabels die u op de kaart ziet zweven). Bovendien kunt u dan ook de opvulkleur of lijnkleur selecteren om te wijzigen.
Als het gaat om het kiezen van kleuren zijn er twee hoofdgebieden waar u mee wilt werken; de Kleur paneel en de Tint paneel. De Kleur paneel past een kleur hexcode vlak op de functies en elementen die u hebt geselecteerd, terwijl de Tint paneel zal uw selectie kleuren met een reeks lichtheid en duisternis beïnvloed door de oorspronkelijke kleur van elk element.
Als algemene regel moet u beginnen met het toepassen van een Tint naar de meest algemene niveaus van je kaart, zodat je uniformiteit in je kleurenschema hebt - je zou dit kunnen vergelijken met een basisverflaag. Van daaruit kunt u vervolgens naar beneden gaan om met de platte kant over te schilderen Kleur instellingen voor meer specifieke functies en elementen.
Begin met zoeken in de wizard naar 'Melbourne' en positioneer vervolgens de voorbeeldkaart om u ongeveer hetzelfde gebied te laten zien dat u zelf heeft ingesteld om weer te geven.
Onder de Functie type menu in de wizard selecteren Allemaal, en onder de Elementtype menu selecteren Geometrie. Controleer dan de Tint vink het vakje aan en klik op de kleurenbalk totdat u ergens een waarde krijgt # ffa200. Om een of andere reden kunt u niet rechtstreeks een waarde in dit veld invoeren, dus u moet het zo dicht mogelijk benaderen door op te klikken. Controleer dan de Keer lichtheid om vak, activeer de Verzadiging instellen en slepen naar 35, activeer de Lichtheid instellen en plaatsen op 50, en activeer de Gamma instellen en haal het zo dicht als je kunt 1.3.
Deze instellingen zouden je hele kaart gekleurd moeten hebben zoals:
Je kaart ziet er op dit moment een beetje grappig uit, omdat we een kleurrijke kaart willen maken, dus de tintinstellingen zijn hier opgevoerd om ervoor te zorgen dat er geen saaie plekken zijn. De te lichte delen worden in latere stappen met meer ingetogen kleuren onderdrukt.
Nu je je eerste stijl hebt toegepast, klik je op de Toevoegen knop in de rechterbovenhoek van de Kaartstijl paneel, (bevindt zich aan de rechterkant van de kaartwizard). Als u op deze knop klikt, wordt een tweede stijl met de naam "Stijl 1" gemaakt, waaronder u verschillende elementen kunt selecteren en nieuwe stijlen kunt toepassen.
Met "Stijl 1" geselecteerd in de Kaartstijl paneel en Allemaal nog steeds geselecteerd onder Functie type Klik op de labels optie in de tweede lijst van de Elementtype menu. Controleer de Tint box en stel het opnieuw in op een waarde van # ffa200 dus je labels zijn allemaal getint in plaats van helder blauw of groen zoals je ziet in de bovenstaande afbeelding.
Klik op de Toevoegen knop op de Kaartstijl paneel om een nieuwe stijl te maken en klik vervolgens op Water in de tweede lijst van de Functie type menu. Onder de Elementtype menu selecteren Geometrie. Controleer de Kleur vak en voer een kleur hexcode in van # 8F9B98.
U moet nu weten hoe u nieuwe stijlen kunt maken door te selecteren Functie type en Elementtype menu items. Ga je gang en voeg de rest van deze stijlen één voor één toe aan de gestileerde kaartwizard:
Zodra u al deze stijlen hebt toegevoegd, bent u klaar om de instellingen die de wizard heeft gemaakt, te exporteren en toe te voegen aan uw kaart. Op de Kaartstijl paneel klik op de Laat JSON zien knop onderaan. Er verschijnt een wit venster met een reeks JavaScript-opties.
Kopieer alle tekst uit dat venster tussen de opening [ en sluiten ], dat wil zeggen alles behalve de hoofdkop.
Aan het begin van uw initialiseren () functie voeg deze nieuwe regel toe:
var stijlen =;
Plaats uw cursor vóór de ; plak vervolgens de code die u hebt gekopieerd in de gestileerde kaartwizard. Je zou moeten eindigen met:
var styles = ["elementType": "geometry", "stylers": ["hue": "# ffa200", "invert_lightness": true, "lightness": 50, "saturation": 35, "gamma": 1.31], "elementType": "labels", "stylers": ["hue": "# ffa200"], "featureType": "water", " elementType ":" geometry "," stylers ": [" color ":" # 8F9B98 "], " elementType ":" labels.text.fill "," stylers ": [" color ":" # f8ead0 "], " elementType ":" labels.text.stroke "," stylers ": [" 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 "," stylers ": [" 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"]];
Dan aan het einde van de initialiseren () functie voeg deze drie regels toe:
var styledMap = new google.maps.StyledMapType (styles, name: "Styled Map"); map.mapTypes.set ('map_style', styledMap); map.setMapTypeId (map_style);Deze coderegels passen alle kleurenschema-gegevens toe die u zojuist hebt ingetrokken van de gestileerde kaartwizard naar uw kaart. Kijk nog een keer en het zou nu moeten verschijnen met al uw stylingselecties op hun plaats:
Bekijk de live demo zodat je de kaart op de juiste maat ziet en kunt spelen met zoomen en pannen hier.
Als laatste kunt u ook een kadereffect rond uw kaart toevoegen om de styling verder te complementeren. Vervang de bestaande # kaart-canvas ... CSS in uw bestand met dit:
# kaart-canvas hoogte: 90%; rand: 5px vast # 33210f; -moz-box-shadow: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; -webkit-vak-schaduw: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; vakschaduw: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000;
Zoals je ziet, kun je met Google Maps heel wat meer doen dan alleen basisinbedding. In deze zelfstudie hebben we nog maar een paar aspecten van de Google Maps API besproken: u kunt meer lezen over alle andere functies die de API biedt in de helpdocumenten van Google Map..
Als u deze zelfstudie nog verder wilt nemen, kunt u ook proberen uw eigen aangepaste zoom- en panbesturingselementen (aangepaste besturingsdocumenten) toe te voegen en infovensters te maken die worden weergegeven wanneer er op markeringen wordt geklikt. Deze pop-ups kunnen details bevatten zoals telefoonnummer en straatadres (info windows-documenten).
Probeer deze technieken een volgende keer als een klant je vraagt om een Google Map op te nemen in zijn site. Misschien krijg je gewoon een bonus!
