Kreativ werden mit der Google Maps API

() translation by (you can also view the original English article)

Sie haben eine glänzende neue Website entworfen; sorgfältige Auswahl von Farben, Typografie und Fotografien, um das Branding des Unternehmens perfekt widerzuspiegeln. Dann fordert Sie Ihr Client auf, eine Karte hinzuzufügen. Sicher, Sie könnten einen Kartenerstellungs-Assistenten verwenden, wie er in jedem Google-Konto enthalten ist. Aber seien wir ehrlich, ihre Funktionalität ist begrenzt und sie sehen ziemlich allgemein aus!

Die Google Maps API hingegen gibt Ihnen die Freiheit, komplett maßgeschneiderte Karten zu erstellen, die alle möglichen coolen Dinge tun können. Die Karte von Portsmouth History ist eine Website, die ich kürzlich mit dieser API erstellt habe.

Map I created using the Google maps API — Historische Karte von Portsmouth, die ich mit der Google Maps-API erstellt habe.

In dieser Reihe von Tutorials erfahren Sie, wie Sie mit der Google Maps-API benutzerdefinierte Karten erstellen. Sie werden sich mit ein wenig JavaScript die Hände schmutzig machen, aber es wird sich lohnen.

Die Tutorials werden alle möglichen Dinge behandeln. Um nur einige zu nennen: benutzerdefinierte Kartenfarben, Menüs und Markierungen; Erwecken Sie Ihr eigenes Kartendesign (z. B. eine handgezeichnete Karte) zum Leben, indem Sie es auf eine zoombare Google-Karte legen; Verknüpfung mit der Flickr-API; Bildoptimierung; sich anpassendes Design; Codeoptimierung und Validierung. Mit anderen Worten, wenn Sie fertig sind, können Sie nicht nur schöne Karten erstellen, sondern haben sich auch viele Dinge angesehen, die für den Aufbau einer Website relevant sind.

Szenario

Diese Tutorials verwenden das Szenario eines britischen Unternehmens, das Musikfestivals fördert. Das Bild "Endprodukt" oben zeigt das, was wir anstreben. Schauen Sie sich die Demo an.

Hinweis: In diesem Beispiel ist nur der Glastonbury-Marker „aktiv“.

Bevor Sie beginnen, können Sie die zu diesem Tutorial gehörenden Dateien herunterladen. Ich habe für jede Aktivität eine separate HTML-Datei hinzugefügt.

Was ist überhaupt eine API?

Eine API oder Application Programming Interface ist eine ausgefallene Art, eine Reihe von Befehlen (z. B. Funktionen) zu sagen, die ein Unternehmen (z. B. Facebook, Twitter, You Tube, Google) veröffentlicht. Die Idee ist, dass Sie diese Befehle verwenden können, um eine stark angepasste Version ihres Inhalts zu erstellen. Bei der Google Maps API sind der „Inhalt“ beispielsweise die Karten, während bei der Flickr API der „Inhalt“ die Fotos sind.

Wenn Leute von „Mash-ups“ sprechen, meinen sie, dass sie die API von zwei oder mehr Unternehmen verwendet haben, um Inhalte zu kombinieren, zum Beispiel Bilder von Flickr auf einer Google-Karte erscheinen zu lassen. Es gibt buchstäblich Tausende dieser APIs. Weitere Informationen finden Sie unter Programmable Web.

Wir werden uns die Flickr-API in einem späteren Tutorial ansehen, aber zunächst konzentrieren wir uns auf die Google Maps-API. Auf diese Weise können Sie alle möglichen Dinge tun, einschließlich der Anpassung der Farben, Kartenmarkierungen, des Popup-Box-Stils, der Detailstufe und der Zoomstufe. Ganz zu schweigen davon, dass die Karte einige coole Dinge tut, wie z. B. das Anzeigen von Live-Daten, das Gruppieren von Markierungen, das Planen von Routen, das Zeichnen benutzerdefinierter Überlagerungen, das dynamische Aufdecken von Daten .... die Liste ist endlos!

Erste Schritte mit Google Maps

Auch wenn Sie auf das Offensichtliche hinweisen, benötigen Sie für den Einstieg ein Google-Konto. Wenn Sie derzeit noch keinen haben, gehen Sie zu Google und melden Sie sich an.

Ausgestattet mit Ihrem Google-Konto können Sie sich jetzt auf die API-Seiten von Google Maps wagen. Ein Lesezeichen auf diese Seite setzen; Sie werden damit sehr vertraut. Die Hauptbereiche sind:-

Entwicklerhandbuch: Code-Snippets, die Ihnen zeigen, wie Sie die API-Funktionen verwenden, um bestimmte Dinge zu tun.
API-Referenz: Die vollständige Referenzliste aller Funktionen in der API. Verwenden Sie dies als eine Art "Einkaufsliste", was Sie mit der API tun können. (Aber denken Sie daran, dass es zusätzliche Bibliotheken gibt, mit denen Sie noch mehr tun können. Dazu kommen wir später).

Bevor Sie fortfahren, benötigen Sie außerdem einen API-Schlüssel (eine lange Folge von Buchstaben und Zahlen, die für Sie eindeutig sind). Holen Sie sich hier Ihren API-Schlüssel.

Erstellen Sie Ihre erste Karte

OK, Sie können mit dem Bauen beginnen.

google-maps-api-activity3 — Laden Sie Quelldateien herunter oder sehen Sie sich die Live-Version an

Damit die bereitgestellte Karte funktioniert, ersetzen Sie dort, wo "YOUR_API_KEY_GOES_HERE" steht, durch Ihren eigenen API-Schlüssel. Ihre Karte sollte der oben gezeigten Karte ähneln.

Das Grundprinzip des Codes besteht darin, dass er ein Div (festival-map genannt) erstellt, in das das JavaScript die Karte lädt. Ich habe dem Code Kommentare hinzugefügt, um zu erklären, wie es funktioniert, aber es lohnt sich, die wichtigsten Punkte hervorzuheben.

Der Code deklariert Ihre Anwendung zunächst als HTML5 mit der Doctype-Deklaration <!DOCTYPE html>.

Es richtet dann das Styling für die Karte ein; die Bits zwischen den Tags <style type="text/css"> und </style>. Sie können das Styling der #festival-map-ID anpassen, je nachdem, wo Sie Ihre Karte platzieren möchten. Wenn Sie eine Vollbildkarte wünschen, stellen Sie Breite und Höhe auf 100 Prozent ein und entfernen Sie die Ränder.

Dann wird das JavaScript für einen Moment übersprungen und der Code zwischen den Body-Tags erstellt ein leeres HTML-Objekt, d. h. ein div (festival-map), um die Karte zu halten. Dieser fungiert als eine Art 'Platzhalter', in den das JavaScript die Karte lädt.

1	<div id="festival-map"></div>

OK - jetzt schauen Sie sich das JavaScript an - der Code verbindet sich zuerst mit Ihrem Google Maps-API-Schlüssel.

1	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE&sensor=true"></script>

Es wird dann in das JavaScript gestartet, das die Karte erstellt. Kurze Erinnerung: JavaScript-Funktionen (z. B. loadFestivalMap) sind eine Reihe von Befehlen, die nur ausgeführt werden, wenn sie von einem anderen Code aufgerufen werden. Das mag kompliziert aussehen, aber es macht eigentlich nur ein paar Dinge -

Die Konfigurationsoptionen (festivalMapOptions) der Karte (z.B. Breiten- und Längengrad, Zoomstufen etc.) werden gesetzt und eine leere JavaScript-Variable (festivalMap) erstellt, der die Karte in Kürze zugewiesen wird. (Tipp: itouchmap ist eine praktische Seite zum Nachschlagen von Breiten- und Längengradkoordinaten eines beliebigen Ortes.)
Dann wird die Funktion loadFestivalMap durch diese Zeile ausgeführt: google.maps.event.addDomListener(window, 'load', loadFestivalMap);
Diese Funktion erstellt die Karte und weist sie der dafür erstellten JavaScript-Variablen (zB festivalMap) zu. Dabei wendet es auch die Konfigurationsoptionen an und lädt die Karte in das dafür erstellte festival-map-Div.
Schließlich wird die Funktion loadMapMarkers durch die letzte Zeile der Funktion loadFestivalMap zum Laufen gebracht.

Wenn dies keinen Sinn ergibt, lesen Sie sich die Kommentare in der Vollversion des Codes durch, um sie weiter zu erläutern.

Bilder als Kartenmarkierungen

Inzwischen sollten Sie eine Karte am Laufen haben und mit etwas Glück waren Sie nicht allzu sehr vom JavaScript verwirrt! Vorausgesetzt, dass alles in Ordnung ist, können wir damit beginnen, die Karte etwas interessanter zu gestalten.

Es ist ganz einfach, Ihre eigenen Bilder als Kartenmarkierungen zu verwenden. Ähnlich wie Sie die Eigenschaftenoptionen für die Karte selbst festlegen (z. B. center, zoom usw. wie oben beschrieben), können Sie auch die Eigenschaften der Kartenmarkierungen ändern. Um ein anderes Bild als Kartenmarkierung zu verwenden, müssen Sie nur die icon-Eigenschaft Ihrer Kartenmarkierungen festlegen. (Wenn Sie interessiert sind, listet der Abschnitt "Google Maps API - Markierungen" alle Eigenschaften, Methoden und Ereignisse von Kartenmarkierungen auf, die Sie verwenden können.)

Normalerweise handelt es sich bei den Kartenmarkierungen um PNGs, da sie eine unregelmäßige Form mit transparentem Hintergrund ermöglichen.

Wir müssen auch den „anklickbaren“ Bereich für jeden Marker festlegen, um sicherzustellen, dass das „Bild“-Bit der PNG-Datei anklickbar ist und das transparente Bit nicht. Dies ist sehr wichtig, wenn sich die Markierungen überlappen.

Sie erstellen zuerst das Kartensymbolbild (markerIconGlastonbury) und dann die Kartensymbolform (markerShapeGlastonbury) und schließlich verknüpfen Sie beide mit Ihrer Kartenmarkierung (markerGlastonbury).

//Setting the position of the Glastonbury map marker.
var markerPositionGlastonbury = new google.maps.LatLng(51.159803, -2.585585);

//Setting the icon to be used with the Glastonbury map marker.
var markerIconGlastonbury = {
 url: 'icons/icon_glas_uk.png',
 //The size image file.
 size: new google.maps.Size(225, 120),
 //The point on the image to measure the anchor from. 0, 0 is the top left.
 origin: new google.maps.Point(0, 0),
 //The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
 anchor: new google.maps.Point(189, 116)
};

//Setting the shape to be used with the Glastonbury map marker.
var markerShapeGlastonbury = {
 coord: [12,4,216,22,212,74,157,70,184,111,125,67,6,56],
 type: 'poly'
};

//Creating the Glastonbury map marker.
markerGlastonbury = new google.maps.Marker({
 //uses the position set above.
 position: markerPositionGlastonbury,
 //adds the marker to the map.
 map: festivalMap,
 title: 'Glastonbury Festival',
 //assigns the icon image set above to the marker.
 icon: markerIconGlastonbury,
 //assigns the icon shape set above to the marker.
 shape: markerShapeGlastonbury,
 //sets the z-index of the map marker.
 zIndex:102
});

Sie können die vollständige HTML-Datei oben auf dieser Seite herunterladen oder sich die Live-Version ansehen. Im Moment habe ich nur eine Kartenmarkierung hinzugefügt…natürlich werde ich in Kürze weitere hinzufügen!

Hinweis: Um die Formkoordinaten des Kartensymbols zu erhalten, füge ich das Symbolbild in eine temporäre Webseite in Dreamweaver ein, verwende dann das Polygon-Hotspot-Tool, um die Koordinaten abzurufen, und kopiere diese Koordinaten dann zurück in meine Hauptkartenseite.

Eine kurze Anmerkung zu Z-Indizes

Elemente wie Kartenmarkierungen können sowohl x-, y- als auch z-Koordinaten aufweisen. Der Z-Index ist die Tiefe. Es bestimmt, wie Elemente übereinander „gestapelt“ werden und somit wie sie sich überlappen.

Wenn die x- und y-Koordinaten eines Elements gleich sind, werden Elemente mit höheren Z-Indizes über Elementen mit niedrigeren Z-Indizes angezeigt. (Z-Index funktioniert nur bei positionierten Elementen, z.B. relativ, fest oder absolut).

Bisher sieht die Karte in Ordnung aus, da die Google Maps-API standardmäßig Elementen, die weiter unten auf dem Bildschirm erscheinen, einen höheren Z-Index zuweist, sodass sie über den Elementen etwas weiter oben auf dem Bildschirm erscheinen. Z.B. das Symbol der Isle of Wight befindet sich über den Symbolen des Glastonbury- und des Reading-Festivals (siehe Bild unten).

Später in diesem Tutorial sehen wir uns an, wie Sie die Z-Indizes ändern können, um die Anzeige der Kartenmarkierungen zu ändern.

Ändern von Farbe und Detaillierungsgrad

Obwohl die Karte langsam Gestalt annimmt, passt die Standardkarte nicht wirklich zu dem Gesamteffekt, den ich erreichen möchte. Glücklicherweise ist es sehr einfach, mit den API-Stiloptionen das Aussehen der Karte anzupassen.

Ich sollte an dieser Stelle auch sagen, dass ich mir gerade ein paar Musikfestivals geschnappt habe, um dieses Beispiel zu veranschaulichen. Das war etwas zufällig und meine Auswahl spiegelt nicht meine Meinung wider - weder für noch gegen - irgendwelche Festivals!

Schritt 1

Verwenden Sie den JSON-Assistenten, um zu trainieren, wie Ihre Karte aussehen soll. Sie können die Farben von so ziemlich allem ändern, Details hinzufügen und entfernen, die Farbfüllung und Geometrie unabhängig voneinander einstellen usw. Es lohnt sich, etwas Zeit damit zu verbringen, sich an die Funktionsweise zu gewöhnen. (Falls Sie sich fragen, JSON ist nur eine Möglichkeit, Informationen zu formatieren, damit ein Computer sie lesen kann.)

Schritt 2

Wenn Sie mit dem in der Vorschau des JSON-Assistenten angezeigten Stil zufrieden sind, klicken Sie auf die Schaltfläche JSON anzeigen und kopieren Sie den Code.

Schritt 3

Gehen Sie zurück zu Ihrem HTML-Dokument, fügen Sie direkt nach dem öffnenden JavaScript-Tag eine Variable hinzu, die diese Informationen enthält, und fügen Sie dann den Code ein.

//First, we read in the data describing style.
var style_festival = [
 {
 "featureType": "administrative",
 "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" }
 ]
 }
];

Schritt 4

Sie müssen Ihre Karte dazu bringen, die soeben hinzugefügten Informationen als Kartenstil zu behandeln. Verwenden Sie dazu StyledMapType.

1	//Then we use this data to create the styles.
2	var styled_festival = new google.maps.StyledMapType(style_festival, {name: "Festival style"});

Schritt 5

Schließlich müssen Sie Ihrer Map Ihren neuen Stil zuweisen, um den Stil zu "aktivieren".

1	festivalMap.mapTypes.set('map_styles_festival', styled_festival);
2	festivalMap.setMapTypeId('map_styles_festival');

Bitte verwenden Sie den Link am Anfang dieses Tutorials, um eine Kopie des Codes für die bisherige Karte herunterzuladen, oder sehen Sie sich die Live-Demo für diesen Teil des Tutorials an. Ich habe tatsächlich zwei Stile hinzugefügt. Einer wird sofort aktiviert und der andere wird aktiviert, wenn die Karte gezoomt wird, um eine höhere Detailgenauigkeit zu erzielen. (Dies wird weiter unten erläutert.)

Ich konnte auch nicht widerstehen, an dieser Stelle einen Hintergrund hinzuzufügen :) Werfen Sie einen Blick auf den body-CSS-Selektor, um zu sehen, wie ich das gemacht habe.

Popup-Boxen und dynamischer Zoom

Okay, jetzt ist es an der Zeit, dass die Karte tatsächlich etwas tut! Sie könnten das integrierte Infofenster-Overlay verwenden, aber sie sehen nicht fantastisch aus und können nicht einfach angepasst werden. Stattdessen verwenden wir die Infobox-Bibliothek.

Schritt 1

Laden Sie eine Kopie der Infobox-Bibliothek herunter. Entpacken Sie es und speichern Sie es in einem Ordner in der Nähe Ihrer Karte. Fügen Sie dann diese Zeile am oberen Rand Ihrer HTML-Datei hinzu.

1	<script src="infobox/infobox.js" type="text/javascript"></script>

Schritt 2

Fügen Sie für jede Kartenmarkierung Z-Indizes hinzu, sodass die am unteren Rand des Bildschirms über den weiter oben liegenden angezeigt werden. (d.h. je näher am unteren Rand des Bildschirms ein Marker ist, desto höher sollte sein Z-Index sein.) Alles darüber, warum Sie dies tun, wird später verraten! Beispielsweise -

//Creating the Glastonbury map marker.
markerGlastonbury = new google.maps.Marker({
 //uses the position set above.
 position: markerPositionGlastonbury,
 //adds the marker to the map.
 map: festivalMap,
 title: 'Glastonbury Festival',
 //assigns the icon image set above to the marker.
 icon: markerIconGlastonbury,
 //assigns the icon shape set above to the marker.
 shape: markerShapeGlastonbury,
 //sets the z-index of the map marker.
 zIndex:107
});

Schritt 3

Fügen Sie nach jeder Kartenmarkierung den folgenden Code hinzu. Bitte lesen Sie die Kommentare im Code durch, um zu sehen, was er tut.

//Creates the information to go in the pop-up info box.
var boxTextGlastonbury = document.createElement("div");
boxTextGlastonbury.style.cssText = pop_up_info;
boxTextGlastonbury.innerHTML = '<span class="pop_up_box_text"><img src="content/glastonbury.jpg" width="400" height="285" border="0" /></span>';

//Sets up the configuration options of the pop-up info box.
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"
 ,opacity: 1
 ,width: "430px"
 }
 ,closeBoxMargin: "10px 2px 2px 2px"
 ,closeBoxURL: "icons/button_close.png"
 ,infoBoxClearance: new google.maps.Size(1, 1)
 ,isHidden: false
 ,pane: "floatPane"
 ,enableEventPropagation: false
};

//Creates the pop-up infobox for Glastonbury, adding the configuration options set above.
infoboxGlastonbury = new InfoBox(infoboxOptionsGlastonbury);

//Add an 'event listener' to the Glastonbury map marker to listen out for when it is clicked.
google.maps.event.addListener(markerGlastonbury, "click", function (e) {
 //Open the Glastonbury info box.
 infoboxGlastonbury.open(festivalMap, this);
 //Changes the z-index property of the marker to make the marker appear on top of other markers.
 this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
 //Zooms the map.
 setZoomWhenMarkerClicked();
 //Sets the Glastonbury marker to be the center of the map.
 festivalMap.setCenter(markerGlastonbury.getPosition());
});

Schritt 4

Im obigen Code haben Sie die Funktion setZoomWhenMarkerClicked aufgerufen. Dadurch wird die Karte vergrößert, wenn eine Person auf eine Markierung klickt. Aber es wird nicht viel passieren, bis Sie diese Funktion erstellt haben! Dies ist die Funktion, die Sie erstellen müssen -

function setZoomWhenMarkerClicked(){
var currentZoom = festivalMap.getZoom();
 if (currentZoom < 7){
 festivalMap.setZoom(7);
 }
}

Schritt 5

Wenn die Karte vergrößert wird, möchten Sie wahrscheinlich mehr Details auf Ihrer Karte anzeigen. Dies geschieht durch Hinzufügen eines Ereignis-Listeners und Verwenden der getZoom-Methode, um kontinuierlich zu überprüfen, ob der Zoom geändert wurde. Wenn es erhöht wurde (über Level 6), wird die Methode setMapTypeId verwendet, um den zweiten(detaillierteren) oben definierten Stil zu setzen.

//Continuously listens out for when the zoom level changes. This includs when the map zooms when a marker is clicked.
google.maps.event.addListener(festivalMap, "zoom_changed", function() {
 var newZoom = festivalMap.getZoom();
 //If the map is zoomed in, the switch to the style that shows the higher level of detail.
 if (newZoom > 6){
 festivalMap.setMapTypeId('map_styles_festival_zoomed');
 }
 //Otherwise the map must be zoomed out, so use the style with the lower level of detail.
 else {
 festivalMap.setMapTypeId('map_styles_festival');
 }

});

Schritt 6

Gestalten Sie Ihre Infobox mit CSS, damit sie hübsch aussieht.

//Variable containing the style for the pop-up infobox.

var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";

Schritt 7

Wenn eine Infobox geöffnet wurde, wird die Kartenmarkierung nach vorne gebracht. Wenn Sie jedoch die Infobox schließen und dann die Karte auf ihre ursprüngliche Position herauszoomen, bleibt die Markierung im Vordergrund. Das kann seltsam aussehen.

In Schritt 1 legen Sie den Z-Index für jeden Marker fest. Sie können dies jetzt verwenden, um dieses Problem zu beheben. Sie müssen eine Funktion (dh resetZindexes) erstellen, die die Z-Indizes auf ihre ursprünglichen Werte zurücksetzt, und dann einen Aufruf dieser Funktion (dh resetZindexes();) zu infobox.js hinzufügen, um die Ausführung der Funktion auszulösen, wenn die Infobox Fenster ist geschlossen.

Rufen Sie den Link oben auf dieser Seite auf, um eine Kopie des Codes für die bisherige Site zu erhalten, oder sehen Sie sich die Live-Version an, wie sie jetzt aussehen sollte. Ich habe nur das Pop-up für Glastonbury hinzugefügt. Fühlen Sie sich frei, die anderen selbst hinzuzufügen!

Benutzerdefinierte Banner und Navigation

Wir sind fast fertig mit der Anpassung des Aussehens der Karte, aber bevor es zu Ende geht, sollten wir ein paar Navigationssteuerelemente hinzufügen.

Google Maps hat 12 Bereiche, in denen Sie Kartensteuerelemente, Banner usw. hinzufügen können. Sie können diese Bereiche vollständig anpassen, indem Sie beliebige HTML-Dateien usw. hinzufügen.

Wir werden ein benutzerdefiniertes Banner und eine Navigation auf der rechten Seite der Karte hinzufügen.

Schritt 1

Definieren Sie zunächst eine Funktion zum Erstellen des Menüs. Dieser Codeauszug ist ziemlich lang…

//Function that creates the control panel area, ie. the map title and the 2 buttons just beneath it.
function createControlPanel (controlPanelDiv){
 controlPanelDiv.style.padding = '0px';
 controlUI = document.createElement('div');
 controlUI.style.border='0px solid white';
 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);

 //Map title
 titleBar = 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 = '<div align="center"><img src="icons/map_title.png" width="230" height="252" border="0"/></div>';
 controlUI.appendChild(titleBar);

 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='14px';
 controlUI.appendChild(yellowStripe);

 //'Smaller' events button.
 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 = '<div align="center" onClick="handelRequests(\'small_events\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="icons/button_small_event.png" width="128" height="107" border="0"/></div>';
 controlUI.appendChild(smallEvents);

 //Umbrella button
 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 = '<div align="center" onClick="handelRequests(\'rainfall\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';"><img src="icons/button_brolly.png" width="93" height="148" border="0"/></div>';
 controlUI.appendChild(brolly);

}

Kurzer Hinweis zu Stilen: Der obige Code verwendet die style-Eigenschaft eines Elements, um seine Stile mit JavaScript zu definieren. Um CSS-Eigenschaften in ihre JavaScript-Notation umzuwandeln, müssen Sie nur daran denken, dass Eigenschaften ohne Bindestrich gleich bleiben, während solche mit Bindestrich in camelCase umgewandelt werden, z. background-image wird zu backgroundImage. Die Ausnahme ist float, das zu cssFloat wird.

Schritt 2

Erstellen Sie dann ein Div, um das Menü zu halten, und fügen Sie das Menü zu diesem Div hinzu, indem Sie die Funktion aufrufen, die Sie gerade in Schritt 1 erstellt haben.

//Create control panel (ie. site title and 2 buttons) which appears on the right-hand side.

var controlPanelDiv = document.createElement('div');

var festivalMapControlPanel = new createControlPanel(controlPanelDiv, festivalMap);

Schritt 3

Legen Sie dann die Eigenschaft controls Ihrer Karte fest, um das Menü an der entsprechenden Position hinzuzufügen, in diesem Fall RIGHT_TOP.

1	//Add the control panel and reset button (created previously) to the map.
2	festivalMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlPanelDiv);

Schritt 4

Jetzt sollten Sie auf der rechten Seite Ihrer Karte etwas haben, das wie ein benutzerdefiniertes Menü aussieht. Sie müssen also nur noch Ihre Speisekarte dazu bringen, etwas zu tun ...

Im Laufe der nächsten Tutorials erhalten wir die Schaltfläche Kleinere Ereignisse, um Fotos von Flickr anzuzeigen, und die Schaltfläche Regenschirm, um eine skizzierte Niederschlagskarten-Überlagerung anzuzeigen. (Ein Klischee, das ich kenne, aber in den Sommermonaten bekommen wir hier ziemlich viel Regen!)

Damit in diesem Tutorial etwas funktioniert, habe ich die obigen Schritte wiederholt, um auch eine Reset-Schaltfläche zum RIGHT_BOTTOM-Bereich hinzuzufügen. Dazu gehört das Umschließen von Code um die Schaltfläche Zurücksetzen, um die Funktion handelRequests aufzurufen.

//Function that creates the 'Reser map' button.
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 = '<div onClick="handelRequests(\'reset\')" OnMouseOver="this.style.cursor=\'pointer\';" OnMouseOut="this.style.cursor=\'default\';" ><img src="icons/button_reset.png" width="148" height="31" border="0"/></div>';
 resetButtonDiv.appendChild(controlUI2);
}

Schritt 5

Die Funktion handelRequests macht ein paar Dinge - werfen Sie einen Blick auf die Kommentare im Code.

//Function that is called when either the 'smaller events', unbrella or the 'reset map' buttons are clicked.
function handelRequests (buttonPressed) {
if (buttonPressed === "reset"){
 //Resets the zoom, map position and marker z-indexes back to their orignal position. Also closes all infoboxes currently open.
 festivalMap.setZoom(festivalMapZoom);
 festivalMap.setCenter(festivalMapCenter);
 resetZindexes();
 //This is a function I've created that closes any info boxes that are open.
 closeAllInfoboxes();
}
else if (buttonPressed === "small_events"){
 alert("This button will do something useful in a later tutorial!");
}
else if (buttonPressed === "rainfall"){
 alert("This button will do something useful in a later tutorial!");
}
}

Sie können eine vollständige Kopie der HTML-Datei für diesen Teil des Tutorials oben auf dieser Seite abrufen oder sich das Live-Beispiel ansehen. In diesem Beispiel ist nur die Kartenmarkierung Glastonbury aktiv.

Was nun?

Das war's für dieses Tutorial! Hoffentlich funktioniert jetzt etwas, das dem Bild oben auf dieser Seite vage ähnelt. Wenn etwas schief gelaufen ist, sehen Sie sich die herunterladbaren Dateien auf GitHub an. Ich habe den Code für jeden Teil dieses Tutorials in separate Dateien eingefügt, damit Sie herausfinden können, wo alles schief gelaufen ist.

Im nächsten Tutorial erfahren Sie, wie Sie mit der Google Maps API Ihre eigenen Karten (z. B. eine handgezeichnete oder historische Karte) zum Leben erwecken, zoombar und interaktiv machen.

Bildnachweise

Die in diesem Tutorial verwendeten Fotos wurden alle unter der Creative Commons-Lizenz veröffentlicht.