Share
Je hebt een glimmende nieuwe website ontworpen; zorgvuldig de kleuren, typografie en foto's selecteren om de merknaam van het bedrijf perfect weer te geven. Vervolgens vraagt uw klant u om een kaart toe te voegen. Natuurlijk kun je een 'wizard' voor het maken van een kaart gebruiken, zoals degene die bij elke Google-account wordt geleverd. Maar laten we eerlijk zijn, hun functionaliteit is beperkt en ze zien er behoorlijk generiek uit!
De Google maps API biedt u de vrijheid om volledig aangepaste kaarten te maken, die allerlei leuke dingen kunnen doen. De Portsmouth History-kaart is een site die ik onlangs heb gebouwd met behulp van deze API.
Deze reeks zelfstudies laat u zien hoe u aangepaste kaarten kunt maken met behulp van de Google maps API. Het betekent dat je je handen vies zult maken met een beetje JavaScript, maar het is het waard.
De tutorials zullen allerlei dingen behandelen. Om er een paar te noemen: aangepaste kaartkleuren, menu's en markeringen; uw eigen kaartontwerp (bijvoorbeeld een handgeschreven kaart) tot leven brengen door het op een zoombare Google-kaart te leggen; koppelen aan de Flickr API; beeldoptimalisatie; reagerend ontwerp; code optimalisatie en validatie. Of, met andere woorden, tegen de tijd dat u klaar bent, kunt u niet alleen mooie kaarten maken, maar heeft u ook gekeken naar veel dingen die relevant zijn voor het bouwen van een website..
Deze tutorials gebruiken het scenario van een Brits bedrijf dat muziekfestivals promoot. De bovenstaande afbeelding "Laatste product" laat zien waar we op streven. Bekijk de demo.
Notitie: Alleen de Glastonbury-markering is in dit voorbeeld 'actief'.
Voordat u begint, wilt u misschien de bestanden downloaden die bij deze zelfstudie horen. Ik heb voor elke activiteit een afzonderlijk html-bestand opgenomen.
Een API, of Application Programming Interface, is een mooie manier om een reeks commando's (bijvoorbeeld functies) te zeggen die een bedrijf (bijvoorbeeld Facebook, Twitter, You Tube, Google) publiceert. Het idee is dat u deze opdrachten kunt gebruiken om een zeer aangepaste versie van hun inhoud te maken. In het geval van de Google Maps API bijvoorbeeld, zijn de 'inhoud' de kaarten, terwijl in het geval van de Flickr API de 'inhoud' de foto's zijn.
Wanneer mensen het hebben over 'mash-ups', bedoelen ze dat ze de API van twee of meer bedrijven hebben gebruikt om inhoud te combineren, bijvoorbeeld het maken van afbeeldingen van Flickr op een Google-kaart. Er zijn letterlijk duizenden van deze API's in de buurt; Neem een kijkje op Programmable Web voor meer informatie.
We zullen de Flickr API in een later zelfstudie bekijken, maar om te beginnen blijven we gefocust op de Google Maps API. Hiermee kunt u allerlei dingen doen, zoals het aanpassen van de kleuren, kaartmarkeringen, pop-upvakstijl, detailniveau en zoomniveau. Om nog maar te zwijgen over het daadwerkelijk maken van de kaart met coole dingen, zoals het weergeven van live gegevens, het groeperen van markeringen, het plannen van routes, het tekenen van aangepaste overlays, het dynamisch onthullen van gegevens ... de lijst is eindeloos!
Met het risico op de voor de hand liggende te wijzen, om aan de slag te gaan heb je een Google-account nodig. Als u er momenteel geen heeft, ga dan naar Google en meld u aan.
Gewapend met uw Google-account kunt u zich nu wagen aan Google Maps API-pagina's. Maak een bladwijzer van deze pagina; je zult er heel vertrouwd mee worden. De belangrijkste gebieden zijn:-
Voordat je verder gaat, heb je ook een API-sleutel nodig (een lange reeks letters en cijfers, uniek voor jou). Haal hier je API-sleutel op.
OK, je bent klaar om te beginnen met bouwen.
Om de geleverde kaart te laten werken, vervangt u waar dit is 'YOUR_API_KEY_GOES_HERE' met uw eigen API-sleutel. Uw kaart moet lijken op de hierboven weergegeven kaart.
Het basisprincipe van de code is dat er een div (genaamd festival-kaart) waarin de JavaScript de kaart laadt. Ik heb opmerkingen in de code toegevoegd om uit te leggen hoe het werkt, maar het is de moeite waard om de belangrijkste dingen te benadrukken.
De code declareert uw aanvraag eerst als HTML5 met behulp van de Doctype-declaratie .
Vervolgens wordt de styling voor de kaart ingesteld; de bits tussen de -tags. Je kunt de styling aanpassen op de # Festival-kaart id afhankelijk van waar u uw kaart wilt plaatsen. Als u een 'volledig scherm' kaart wilt, stel dan de breedte en hoogte in op 100 procent en verwijder de marges.
Vervolgens, een moment overslaand over de JavaScript, stelt de code tussen de body-tags een leeg html-object in, d.w.z. een div (festival-kaart) om de kaart vast te houden. Dit fungeert als een soort 'plaatshouder', waarin de JavaScript de kaart laadt.
OK - nu kijkend naar het JavaScript - de code maakt eerst verbinding met uw Google Maps API-sleutel.
Vervolgens wordt het gestart in het JavaScript dat de kaart maakt. Snelle herinnering: JavaScript-functies (bijv. loadFestivalMap) zijn een reeks opdrachten die alleen worden uitgevoerd als ze door een andere code worden aangeroepen. Dit ziet er misschien ingewikkeld uit, maar het doet eigenlijk maar een paar dingen -
Accentsconagua
festivalMapOptions) van de kaart (bijvoorbeeld de breedtegraad en lengtegraad, zoomniveaus, enz.) zijn ingesteld, en een lege JavaScript-variabele (festivalMap) is gemaakt waaraan de kaart binnenkort wordt toegewezen. (Tip: itouchmap is een handige site voor het opzoeken van lengte- en breedtegraadcoördinaten van elke locatie.)loadFestivalMap functie wordt getriggerd om op deze regel te worden uitgevoerd:google.maps.event.addDomListener (venster, 'load', loadFestivalMap); festivalMap). Terwijl dit gebeurt, past het ook de configuratie-opties toe en laadt de kaart in de festival-kaart div gemaakt om het te houden.loadMapMarkers functie wordt geactiveerd om te worden uitgevoerd op de laatste regel van de loadFestivalMap functie.Als dit geen zin heeft, lees dan de opmerkingen in de volledige versie van de code als ze dit verder uitleggen.
Inmiddels zou je een kaart in gebruik moeten hebben, en met een beetje geluk heb je niet te veel gejaagd door JavaScript! Ervan uitgaande dat alles goed is, kunnen we beginnen met het maken van de kaart er een beetje meer interessant.
Het is gemakkelijk om uw eigen afbeeldingen te gebruiken als kaartmarkeringen. Op een vergelijkbare manier als hoe u eigenschappen voor de kaart zelf instelt (bijv. midden, zoom enz. zoals we hierboven deden), kunt u ook de eigenschappen van de kaartmarkeringen wijzigen. Om een andere afbeelding als kaartmarkering te gebruiken, hoeft u alleen de icoon eigendom van uw kaartmarkeringen. (Als u geïnteresseerd bent, vermeldt de google maps API - markers sectie alle eigenschappen, methoden en gebeurtenissen van de kaartmarkering die u kunt gebruiken).
Doorgaans zijn de kaartmarkeringen .pngs omdat ze u een onregelmatige vorm met een transparante achtergrond geven.
We moeten ook het 'klikbare' gebied voor elke markering instellen om ervoor te zorgen dat het 'beeld'-bit van de .png klikbaar is en de transparante bit niet. Dit is echt belangrijk als de markeringen elkaar overlappen.
U maakt eerst de pictogramafbeelding van de kaart (markerIconGlastonbury) en maak vervolgens de vorm van het kaartpictogram (markerShapeGlastonbury) en tenslotte koppelt u deze beide aan uw kaartmarkering (markerGlastonbury).
// De positie van de Glastonbury-kaartmarkering instellen. var markerPositionGlastonbury = new google.maps.LatLng (51.159803, - 2.585585); // Het pictogram instellen voor gebruik met de Glastonbury-kaartmarkering. var markerIconGlastonbury = url: 'icons / icon_glas_uk.png', // Het afbeeldingsbestand. size: new google.maps.Size (225, 120), // Het punt op de afbeelding om het anker te meten. 0, 0 is de linkerbovenhoek. herkomst: new google.maps.Point (0, 0), // De x y-coördinaten van het ankerpunt op de markering. bijv. Als uw kaartmarkering een tekenpen was, zou het anker de punt van de pen zijn. anchor: new google.maps.Point (189, 116); // De vorm instellen voor gebruik met de Glastonbury-kaartmarkering. var markerShapeGlastonbury = coord: [12,4,216,22,212,74,157,70,184,111,125,67,6,56], type: 'poly'; // De Glastonbury-kaartmarkering maken. markerGlastonbury = new google.maps.Marker (// gebruikt de positie hierboven ingesteld.positie: markerPositionGlastonbury, // voegt de markering toe aan de kaart.kaart: festivalMap, titel: 'Glastonbury Festival', // wijst de pictogramafbeelding hierboven toe naar de marker.pictogram: markerIconGlastonbury, // wijst de pictogramvorm die hierboven is ingesteld toe aan de markering shape: markerShapeGlastonbury, // stelt de z-index van de kaartmarkering in: zIndex: 102);
Je kunt het volledige html-bestand downloaden vanaf de bovenkant van deze pagina, of de liveversie bekijken. Voorlopig heb ik zojuist een kaartmarkering toegevoegd ... uiteraard zal ik er binnenkort meer aan toevoegen!
hint: Om de coördinaten van het kaartpictogram te krijgen, plaats ik de afbeelding van het pictogram in een tijdelijke webpagina in Dreamweaver en gebruik ik vervolgens het Polygoon Hotspot-gereedschap om de coördinaten op te halen en kopieer ik deze coördinaten terug naar mijn hoofdkaartpagina.Elementen, zoals kaartmarkeringen, kunnen zowel x-, y- als z-coördinaten hebben. De z-index is de diepte. Het bepaalt hoe elementen op elkaar worden 'gestapeld', en dus hoe ze elkaar overlappen.
Als de x- en y-coördinaten van een element hetzelfde zijn, worden elementen met hogere z-indexen weergegeven bovenop elementen met lagere z-indexen. (Z-index werkt alleen op gepositioneerde elementen, bijvoorbeeld relatief, vast of absoluut).
Tot dusver ziet de kaart er goed uit, omdat de Google maps API standaard elementen die onderaan het scherm verschijnen een hogere z-index geeft, zodat ze boven op het scherm iets verder op het scherm verschijnen. Bijv. het Isle of Wight-pictogram staat op de iconen van de pictogrammen Glastonbury en Reading (zie afbeelding hieronder).
Later in deze tutorial zullen we bekijken hoe je de z-indexen kunt veranderen om te manipuleren hoe de kaartmarkeringen worden weergegeven.
Hoewel de kaart begint vorm te krijgen, past de standaardkaart niet echt bij het algemene effect dat ik wil bereiken. Gelukkig is het heel eenvoudig om de API-stijlopties te gebruiken om de weergave van de kaart aan te passen.
Ik zou ook op dit punt moeten zeggen dat ik zojuist een paar muziekfestivals heb gepakt om dit voorbeeld te illustreren. Dit was enigszins willekeurig, en mijn selectie weerspiegelt niet mijn mening - voor of tegen - voor festivals!
Gebruik de JSON-wizard om te oefenen hoe u wilt dat uw kaart eruitziet. Je kunt de kleuren van vrijwel alles veranderen, details toevoegen en verwijderen, de kleurvulling en geometrie onafhankelijk instellen, enzovoort. Het is de moeite waard om wat tijd te besteden aan hoe dit werkt. (In het geval u zich afvraagt, JSON is slechts een manier om informatie te formatteren, zodat een computer het kan lezen.)
Wanneer u tevreden bent met de stijl die wordt weergegeven in het voorbeeld van de JSON-wizard, klikt u op Laat JSON zien knop en kopieer de code.
Ga terug naar je html-document, voeg een variabele toe net na het openen van de JavaScript-tag om deze informatie te bewaren en plak de code in.
// Eerst lezen we in de gegevens die stijl beschrijven. var style_festival = ["featureType": "administratief", "stylers": ["visibility": "off"], "featureType": "poi", "stylers": ["visibility": " off "], " featureType ":" transit "," stylers ": [" visibility ":" off "], " featureType ":" road "," stylers ": [" visibility " : "off"], "featureType": "landscape", "stylers": ["color": "# FFE200"], "featureType": "water", "stylers": [ "visibility": "on", "color": "# 4f92c6"]];
U moet uw kaart krijgen om de informatie die u zojuist hebt toegevoegd als kaartstijl te behandelen. Gebruik StyledMapType om dit te doen.
// Vervolgens gebruiken we deze gegevens om de stijlen te maken. var styled_festival = new google.maps.StyledMapType (style_festival, name: "Festival style");
Ten slotte moet u uw nieuwe stijl toewijzen aan uw kaart om de stijl te 'activeren'.
festivalMap.mapTypes.set ('map_styles_festival', styled_festival); festivalMap.setMapTypeId (map_styles_festival); Gebruik de link aan het begin van deze tutorial om een kopie van de code voor de kaart tot nu toe te downloaden, of bekijk de live demo voor dit deel van de tutorial. Ik heb eigenlijk twee stijlen toegevoegd. De ene wordt meteen geactiveerd en de andere wordt geactiveerd wanneer op de kaart wordt ingezoomd om meer details te krijgen. (Dit wordt hieronder verder uitgelegd)
Ik kon het op dit moment ook niet laten om een achtergrond toe te voegen :) Bekijk de lichaam css selector om te zien hoe ik dit heb gedaan.
Oké, het is nu tijd om de kaart echt iets te laten doen! U kunt de ingebouwde infovenster-overlay gebruiken, maar ze zien er niet uit fantastisch en ze kunnen niet eenvoudig worden aangepast. In plaats daarvan gaan we de Infobox-bibliotheek gebruiken.
Download een kopie van de Infobox-bibliotheek. U kunt het uitpakken en het in een map in de buurt van uw kaart opslaan. Voeg vervolgens deze regel toe aan de bovenkant van uw html-bestand.
Voeg z-indexen toe voor elke kaartmarkering zodat degenen die zich het dichtst bij de onderkant van het scherm bevinden, bovenop de kaarten bovenin verschijnen. (d.w.z. hoe dichter bij de onderkant van het scherm een markering staat, hoe hoger de Z-index zou moeten zijn.) Alles zal later worden onthuld waarom u dit doet! Bijvoorbeeld -
// De Glastonbury-kaartmarkering maken. markerGlastonbury = new google.maps.Marker (// gebruikt de positie hierboven ingesteld.positie: markerPositionGlastonbury, // voegt de markering toe aan de kaart.kaart: festivalMap, titel: 'Glastonbury Festival', // wijst de pictogramafbeelding hierboven toe naar het pictogram marker: markerIconGlastonbury, // wijst de pictogramvorm die hierboven is ingesteld toe aan de markering shape: markerShapeGlastonbury, // stelt de z-index van de kaartmarkering in: zIndex: 107);
Voeg de volgende code toe na elke kaartmarkering. Lees de opmerkingen in de code om te zien wat het doet.
// Maakt de informatie die moet worden gebruikt in het pop-upinfovenster. var boxTextGlastonbury = document.createElement ("div"); boxTextGlastonbury.style.cssText = pop_up_info; boxTextGlastonbury.innerHTML = '
'; // Stelt de configuratie-opties in van het pop-up infovenster. var infoboxOptionsGlastonbury = content: boxTextGlastonbury, disableAutoPan: false, maxWidth: 0, pixelOffset: new google.maps.Size (-241, 0), zIndex: null, boxStyle: background: "url ('infobox / pop_up_box_top_arrow.png' ) no-repeat ", dekking: 1, width:" 430px ", closeBoxMargin:" 10px 2px 2px 2px ", closeBoxURL:" icons / button_close.png ", infoBoxClearance: new google.maps.Size (1, 1), isHidden: false, paneel: "floatPane", enableEventPropagation: false; // Maakt de pop-upinfobox voor Glastonbury en voegt de hierboven ingestelde configuratie-opties toe. infoboxGlastonbury = nieuwe InfoBox (infoboxOptionsGlastonbury); // Voeg een 'gebeurtenislistener' toe aan de Glastonbury-kaartmarkering om er op te letten wanneer erop wordt geklikt. google.maps.event.addListener (markerGlastonbury, "klik", functie (e) // Open het informatievenster Glastonbury. infoboxGlastonbury.open (festivalMap, this); // Verandert de eigenschap van de z-index van de markering om de marker verschijnen bovenop andere markers. this.setZIndex (google.maps.Marker.MAX_ZINDEX + 1); // Zoomt de kaart in. setZoomWhenMarkerClicked (); // Stelt de Glastonbury-markering in als middelpunt van de kaart. festivalMap.setCenter (markerGlastonbury.getPosition ());); In de bovenstaande code hebt u de functie gebeld setZoomWhenMarkerClicked. Hiermee zoomt u in op de kaart wanneer iemand op een markering klikt. Maar er zal niet veel gebeuren totdat je deze functie hebt gemaakt! Dit is de functie die u moet creëren -
functiesetZoomWhenMarkerClicked () var currentZoom = festivalMap.getZoom (); if (currentZoom < 7) festivalMap.setZoom(7);
Terwijl de kaart inzoomt, is de kans groot dat u meer details op uw kaart wilt weergeven. Dit wordt gedaan door een gebeurtenislistener toe te voegen en de getZoom methode om continu te controleren of de zoomlens is gewijzigd. Als het is verhoogd (boven niveau 6), is de setMapTypeId methode wordt gebruikt om de tweede (meer gedetailleerde) stijl in te stellen die hierboven is gedefinieerd.
// Luister onophoudelijk naar wanneer het zoomniveau verandert. Dit omvat wanneer de kaart inzoomt wanneer op een markering wordt geklikt. google.maps.event.addListener (festivalMap, "zoom_changed", function () var newZoom = festivalMap.getZoom (); // Als de kaart is ingezoomd, schakelt u over naar de stijl die een hoger detailniveau weergeeft. (newZoom> 6) festivalMap.setMapTypeId ('map_styles_festival_zoomed'); // Anders moet de kaart worden uitgezoomd, dus gebruik de stijl met het lagere detailniveau. else festivalMap.setMapTypeId ('map_styles_festival'); ); Stijl uw infobox met behulp van de CSS om het er mooi uit te laten zien.
// Variabele met de stijl voor de pop-upinfobox. var pop_up_info = "border: 0px effen zwart; achtergrondkleur: #ffffff; opvulling: 15px; margin-top: 8px; randradius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px ; vakschaduw: 1px 1px # 888; ";
Wanneer een infobox is geopend, wordt de kaartmarkering naar voren gebracht. Als u de infobox echter sluit en vervolgens de kaart naar de oorspronkelijke positie zoomt, blijft de markering op de voorgrond staan. Dit kan raar lijken.
In stap 1 stelt u de z-index in voor elke markering. U kunt dit nu gebruiken om dit probleem op te lossen. U moet een functie creëren (bijv. resetZindexes) die de z-indexen terugzet naar hun oorspronkelijke waarden en vervolgens een oproep toevoegt aan deze functie (d.w.z.. resetZindexes ();) naar infobox.js om de functie te activeren die moet worden uitgevoerd wanneer het infoboxvenster wordt gesloten.
Ga naar de link aan de bovenkant van deze pagina voor een kopie van de code voor de site tot nu toe, of bekijk de live versie van hoe het er nu uit moet zien. Ik heb alleen de pop-up voor Glastonbury toegevoegd. Voel je vrij om de anderen zelf toe te voegen!
We zijn er bijna om het uiterlijk van de kaart aan te passen, maar voordat we het een dag noemen, moeten we een paar navigatieknoppen toevoegen.
Google maps heeft 12 gebieden waar je kaartbedieningen, banners, enz. Kunt toevoegen. Je kunt deze gebieden volledig aanpassen, toevoegen wat html etc. je maar wilt.
We gaan een aangepaste banner en navigatie toevoegen aan de rechterkant van de kaart.
Om te beginnen, definieert u eerst een functie om het menu te maken. Dit code-uittreksel is vrij lang ...
// Functie die het regelpaneelgebied maakt, dwz. de kaarttitel en de 2 knoppen er net onder. function createControlPanel (controlPanelDiv) controlPanelDiv.style.padding = '0px'; controlUI = document.createElement ('div'); controlUI.style.border = '0px effen wit'; controlUI.style.margin = "10px; controlUI.style.paddingTop = "11px; controlUI.style.paddingBottom = "5px; controlUI.style.paddingLeft = "0px; controlUI.style.paddingRight = "0px; controlUI.style.width = "245px; controlUI.style.height = "419px; controlPanelDiv.appendChild (controlUI); // Titel van de kaartBar = document.createElement ('div'); titleBar.style.backgroundColor = '# 89CBED'; titleBar.style.height = "255px; titleBar.style.width = "245px; titleBar.style.marginTop = "0px; titleBar.style.marginBottom = "0px; titleBar.style.marginLeft = "0px; titleBar.style.marginRight = "0px; titleBar.style.paddingTop = "6px; titleBar.style.paddingBottom = "2px; titleBar.style.paddingLeft = "0px; titleBar.style.paddingRight = "0px; titleBar.style.borderTopLeftRadius = "5px; titleBar.style.borderTopRightRadius = "5px; titleBar.style.borderBottomLeftRadius = "0px; titleBar.style.borderBottomLeftRadius = "0px; titleBar.style.cssFloat = 'left'; titleBar.innerHTML = '
'; controlUI.appendChild (titelbalk); yellowStripe = document.createElement ('div'); yellowStripe.style.backgroundColor = '# FFFF00'; yellowStripe.style.height = "2px; yellowStripe.style.width = "245px; yellowStripe.style.marginTop = "3px; yellowStripe.style.marginBottom = "3px; yellowStripe.style.marginLeft = "0px; yellowStripe.style.marginRight = "0px; yellowStripe.style.paddingTop = "0px; yellowStripe.style.paddingBottom = "0px; yellowStripe.style.paddingLeft = "0px; yellowStripe.style.paddingRight = "0px; yellowStripe.style.cssFloat = 'left'; yellowStripe.style.fontFamily = 'Georgia, serif'; yellowStripe.style.fontSize = "14 pixels; controlUI.appendChild (yellowstripe); // 'Kleinere' knop voor gebeurtenissen. smallEvents = document.createElement ('div'); smallEvents.style.height = "108px; smallEvents.style.width = "129px; smallEvents.style.marginTop = "0px; smallEvents.style.marginBottom = "0px; smallEvents.style.marginLeft = "0px; smallEvents.style.marginRight = "0px; smallEvents.style.paddingTop = "0px; smallEvents.style.paddingBottom = "2px; smallEvents.style.paddingLeft = "0px; smallEvents.style.paddingRight = "0px; smallEvents.style.cssFloat = 'left'; smallEvents.innerHTML = '
'; controlUI.appendChild (smallEvents); // Parapluknop brolly = document.createElement ('div'); brolly.style.height = "149px; brolly.style.width = "94px; brolly.style.marginTop = "0px; brolly.style.marginBottom = "0px; brolly.style.marginLeft = "0px; brolly.style.marginRight = "0px; brolly.style.paddingTop = "0px; brolly.style.paddingBottom = "2px; brolly.style.paddingLeft = "0px; brolly.style.paddingRight = "0px; brolly.style.cssFloat = 'left'; brolly.innerHTML = '
'; controlUI.appendChild (brolly); Snelle opmerking over stijlen: de bovenstaande code gebruikt de stijl eigenschap van een element om zijn stijlen te definiëren met behulp van JavaScript. Om CSS-eigenschappen naar hun JavaScript-notatie om te zetten, moet u alleen onthouden dat eigenschappen die geen koppelteken blijven hetzelfde blijven, terwijl die met een koppelteken worden omgezet in camelCase, bijvoorbeeld achtergrondafbeelding wordt backgroundImage. De uitzondering is vlotter, wat wordt cssFloat.
Maak vervolgens een div om het menu vast te houden en voeg het menu toe aan deze div door de functie te gebruiken die u zojuist hebt gemaakt in stap 1.
// Maak het configuratiescherm (dat wil zeggen site titel en 2 knoppen) die aan de rechterkant verschijnt. var controlPanelDiv = document.createElement ('div'); var festivalMapControlPanel = nieuw createControlPanel (controlPanelDiv, festivalMap); Stel vervolgens de controls eigenschap van uw kaart om het menu toe te voegen aan de relevante locatie, in dit geval RECHTSBOVEN.
// Voeg het bedieningspaneel en de resetknop (eerder gemaakt) toe aan de kaart. festivalMap.controls [google.maps.ControlPosition.RIGHT_TOP] .Schuif (controlPanelDiv);
Inmiddels zou je iets moeten hebben dat lijkt op een aangepast menu dat aan de rechterkant van je kaart wordt weergegeven. Dus alles wat je moet doen, is om je menu iets te laten doen ...
In de loop van de volgende zelfstudies krijgen we de knop Kleinere gebeurtenissen om foto's van Flickr te laten zien en de overkoepelende knop om een overlay met een geschetste neerslagkaart weer te geven. (Een cliché weet ik, maar we krijgen hier in de zomermaanden wel een beetje regen!)
Dus om iets te laten functioneren in deze tutorial, heb ik de bovenstaande stappen herhaald om ook een Reset-knop toe te voegen aan de RECHTS BENEDEN Gebied. Dit omvat de wrappingcode rond de Reset-knop om de handelRequests functie.
// Functie waarmee de knop 'Reser map' wordt gemaakt. function createResetButton (resetButtonDiv) resetButtonDiv.style.padding = '0px'; controlUI2 = document.createElement ('div'); controlUI2.style.backgroundColor = '#ffffff'; controlUI2.style.borderRadius = "5px; controlUI2.style.margin = "10px; controlUI2.style.paddingTop = "2px; controlUI2.style.paddingBottom = "2px; controlUI2.style.paddingLeft = "2px; controlUI2.style.paddingRight = "5px; controlUI2.style.textAlign = 'center'; controlUI2.style.width = "148px; controlUI2.style.height = "31px; controlUI2.innerHTML = '
'; resetButtonDiv.appendChild (controlUI2); De handelRequests functie doet een paar dingen - bekijk de opmerkingen in de code.
// Functie die wordt aangeroepen wanneer op de knoppen 'kleinere gebeurtenissen', unbrella of de knop 'reset map' wordt geklikt. function handelRequests (buttonPressed) if (buttonPressed === "reset") // Reset de zoom-, kaartpositie- en marker z-indexen terug naar hun originele positie. Sluit ook alle infoboxen die momenteel zijn geopend. festivalMap.setZoom (festivalMapZoom); festivalMap.setCenter (festivalMapCenter); resetZindexes (); // Dit is een functie die ik heb gemaakt en die alle infovakken die geopend zijn sluit. closeAllInfoboxes (); else if (buttonPressed === "small_events") alert ("Deze knop zal iets nuttigs doen in een later zelfstudie!"); else if (buttonPressed === "rainfall") alert ("Deze knop zal iets nuttigs doen in een later zelfstudie!"); U kunt een volledige kopie van het html-bestand voor dit deel van de zelfstudie downloaden vanaf de bovenkant van deze pagina, of een kijkje nemen in het live-voorbeeld. Alleen de Glastonbury-kaartmarkering is 'actief in dit voorbeeld.
Dat is het voor deze tutorial! Hopelijk heb je nu iets werkend dat vaag lijkt op de afbeelding bovenaan deze pagina. Als er iets niet klopt, kijk dan eens door de downloadbare bestanden die beschikbaar zijn op GitHub. Ik heb de code opgenomen in afzonderlijke bestanden voor elk deel van deze zelfstudie, dus je zou moeten kunnen bepalen waar het allemaal fout is gegaan.
In de volgende zelfstudie wordt bekeken hoe u de Google maps API kunt gebruiken om uw eigen kaarten (bijvoorbeeld een handgeschreven of historische kaart) tot leven te brengen, ze zoomen en interactief te maken.
De foto's die in deze zelfstudie zijn gebruikt, zijn allemaal vrijgegeven onder de Creative Commons-licentie.
