Share
Was Sie erstellen werdenIn diesem Lernprogramm werden wir den Prozess der Erstellung einer Marken-Google-Karte für einen imaginären Kunden durchlaufen. Unsere Karte enthält drei Hauptmerkmale:
In diesem Fall wird unser imaginärer Kunde "The Hobby Shoppe" sein, Anbieter von guten Brettspielen und anderen Hobby-Utensilien in der australischen Stadt Melbourne.
Wir werden den Ball ins Rollen bringen, indem wir eine grundlegende Karte erstellen, die sich auf die Stadt Melbourne konzentriert. Nachdem wir unsere Zweigmarkierungen hinzugefügt haben, verfeinern wir die mittlere Position der Karte, aber zunächst suchen wir den richtigen Längen- und Breitengrad, um die Stadt als Ganzes anzuzeigen.
Gehen Sie dazu zu Google Maps und suchen Sie nach Melbourne, Zoomen Sie dann nur ein wenig, sodass Sie keine unbesiedelten Bereiche einbeziehen. Wenn Sie die Position der Karte anpassen, werden Sie feststellen, dass sich die URL entsprechend Ihrem neuen Breitengrad, Längengrad und Zoomfaktor ändert. Wenn Sie die Karte an der gewünschten Stelle positioniert haben, kopieren Sie die URL zur späteren Verwendung irgendwo, z. B .:
https://www.google.com/maps/place/Melbourne+VIC/@-37.804627…
Nach dem @ Symbol in der URL werden durch Kommas getrennte Werte für Breitengrad, Längengrad und Zoomstufe angezeigt: -37.8046274,144,972156,12z
Der erste Wert -37.8046274 ist der Breitengrad, der zweite Wert 144,972156 ist der Längengrad und der 12z Wert bedeutet, dass die Zoomstufe auf eingestellt ist 12. Wir werden diese Werte jetzt in eine grundlegende Karte einfügen.
Erstellen Sie ein leeres HTML-Dokument und fügen Sie den folgenden Code hinzu:
Mit diesem Markup haben wir ein HTML-Dokument mit einem div mit der id Karten-Leinwand das wird unsere Karte halten. Wir haben auch ein paar grundlegende CSS-Werte hinzugefügt, um die Größe und Position zu ändern Karten-Leinwand div.
Zum Schluss haben wir das erforderliche Skript aus der Google Map API geladen mit:
und wir haben eine JavaScript-Funktion erstellt, um die grundlegenden Optionen der Karte festzulegen und sie in unser leeres div zu laden.
Hinweis: Sehen Sie, wie die Werte, die wir zuvor aus der Google Maps-URL übernommen haben, im Internet verwendet wurden centerPos und zoomLevel Variablen, die wiederum in der verwendet werden mapOptions Array. Das centerPos Variable verwendet die durch Kommas getrennten Breiten- und Längenwerte von -37.8046274,144,972156, und das zoomLevel Variable verwendet den Wert von 12.
Speichern Sie Ihre HTML-Datei und öffnen Sie sie in einem beliebigen Browser. Ihre Basiskarte sollte so aussehen:
Der nächste Schritt besteht darin, den Breiten- und Längengrad für jeden Zweigstandort des Kunden zu ermitteln, sodass wir dort Markierungen erstellen können. Am einfachsten ist es, jede Zweigadresse über eine Google Maps-Suche zu finden und die Breiten- und Längengrade von dort zu ermitteln.
Gehen Sie erneut zu Google Maps zurück und führen Sie eine Suche nach jedem Zweigstandort durch. Vorausgesetzt, der Kunde hat Ihnen die Adressen der einzelnen Standorte mitgeteilt, können Sie einfach nach dieser Adresse suchen und eine Markierung erscheint auf der Karte. Klicken Sie mit der rechten Maustaste auf diese Markierung und wählen Sie Was gibt es hier? aus dem Kontextmenü.
Oben links auf der Karte wird ein kleines Popup-Fenster mit Details zu dieser Markierung angezeigt, einschließlich Längen- und Breitengrad:
Notieren Sie sich die Breiten- und Längengrade für jeden Zweigstandort, den Sie Ihrer Karte hinzufügen möchten. Im Fall von "The Hobby Shoppe" haben wir sieben Zweigstellen, und wir fügen für jeden Standort Markierungen hinzu, indem Sie den folgenden Code unmittelbar vor dem Ende unserer Karte einfügen initialisieren() Funktion nach dem map = new google.maps.Map… Linie:
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]]; 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 );
In diesem Code erstellen wir zunächst ein Array von Zweigstellen mit Namen, Breitengrad und Längengrad. Wir durchlaufen dann dieses Array, um jeden Ort als Marker zur Karte hinzuzufügen. Der Titel wird als QuickInfo angezeigt, wenn der Marker über den Marker gezogen wird.
Ihre Karte sollte jetzt mit Markierungen versehen sein:
Aber warte, mit diesem Bild stimmt etwas nicht. Wir haben sieben Orte hinzugefügt, und dennoch erscheinen nur sechs Marker. Warum?
Es liegt einfach daran, dass unsere siebte Markierung gerade nicht sichtbar ist, basierend auf dem anfänglichen Breiten- und Längengrad, den wir für die Karte festgelegt haben. Daher müssen wir diese Mittelposition verfeinern.
Da wir nun alle unsere Marker vorhanden haben, können wir die Startposition der Karte verfeinern, um sicherzustellen, dass sie beim Laden alle sichtbar sind. Dazu fügen wir eine Schaltfläche hinzu, auf die wir klicken können, um uns neue Koordinaten zu geben, sobald wir die perfekte Startposition der Karte gefunden haben.
Fügen Sie diesen Schaltflächencode Ihrer Seite an einer beliebigen Stelle im hinzu Karosserie Sektion:
Jetzt können Sie Ihre Karte verschieben und dann auf die neue klicken Kartenkoordinaten erhalten Taste, wenn Sie die richtige Stelle finden.
Der Breitengrad, Längengrad und die Zoomstufe Ihrer Position werden in Ihre Konsole geschrieben. Stellen Sie also sicher, dass Sie die Chrome Dev Tools- oder Firebug-Konsole geöffnet haben.
Aktualisiere deine Karten Center Option mit der neuen Breite und Länge sowie der Zoomen Option, wenn sich das auch geändert hat:
var mapOptions = center: new google.maps.LatLng (-37.74723337588968,144.961341333252), Zoom: 12;
Speichern und aktualisieren Sie Ihre Karte. Nun sollten alle sieben Kartenmarkierungen sichtbar sein. Wenn Sie mit der verfeinerten Mittelposition zufrieden sind, können Sie das entfernen Kartenkoordinaten erhalten Tastencode.
Nun, da wir alle Markierungen an Ort und Stelle für die Zweigstellen haben, werden wir sie in ein benutzerdefiniertes Bild umwandeln, das zum Kunden-Branding und zum Stil der Karte passt. Jedes Bild, das zur Verwendung als Kartenmarkierung erstellt wurde, sollte einen transparenten Hintergrund haben, z.
Platzieren Sie Ihren benutzerdefinierten Marker relativ zu dem Ordner, in dem sich Ihre Basiszuordnung befindet, in einem Ordner "images", und fügen Sie die folgende Variable direkt unter dem Ordner hinzu Standorte Variable, die Sie zuvor erstellt haben:
var image = 'images / shoppe_icon.png';
Fügen Sie dann eine zusätzliche Option hinzu Symbol: Bild zum zum Schleife, die wir zuvor erstellt haben, um Kartenmarkierungen zu platzieren. Wenn Sie diese Variable in die Optionen zur Generierung von Kartenmarkierungen übergeben, geben Sie an, dass die Markierungssymbole durch Ihr benutzerdefiniertes Bild ersetzt werden sollen:
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 );
Werfen Sie einen Blick auf Ihre Karte und Sie sollten jetzt an jeder der sieben Zweigstellen kleine Häuser sehen:
Wir fügen nun das Logo des Kunden so hinzu, dass es die gleiche Größe und Position behält, unabhängig davon, wo die Karte vergrößert oder verkleinert wird.
Die einzigen Elemente einer Google Map, die sich beim Schwenken und Zoomen nicht bewegen, sind die Steuerelemente der Benutzeroberfläche, die normalerweise für Dinge wie die Straßenansicht oder das Wechseln von Kartentypen verwendet werden. Wir können jedoch auch die benutzerdefinierte Steuerungs-API verwenden, um ein Logo auf dem Bildschirm zu platzieren. Unser neues benutzerdefiniertes Steuerelement setzt den Zoom und die Mittelposition der Karte beim Klicken zurück, sodass das Logo angezeigt wird und eine nützliche UI-Funktion ausgeführt wird.
Fügen Sie zunächst das Logo Ihres Kunden in demselben Ordner "images" hinzu, in dem Sie Ihr benutzerdefiniertes Markierungsbild platziert haben. Fügen Sie dann die folgende JavaScript-Funktion direkt vor Ihrem vorhandenen hinzu initialisieren() Funktion:
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 = 'Zeiger'; controlUI.title = 'Klicken Sie hier, um die Karte auf Startseite zu setzen'; controlDiv.appendChild (controlUI); google.maps.event.addDomListener (controlUI, "click", function () map.setCenter (centerPos) map.setZoom (zoomLevel)); Bei der Ausführung erstellt diese Funktion ein Steuerelement mit einer Größe von 600 x 116 Pixel und verwendet dabei das Logo-Bild als Hintergrund. Es wird auch ein Listener erstellt, der die Mitte und den Zoom der Karte zurücksetzt, wenn auf das Logo geklickt wird.
Dann am Ende deines initialisieren() Funktion, fügen Sie den folgenden Code ein:
var logoControlDiv = document.createElement ('div'); var logoControl = new LogoControl (logoControlDiv, map); logoControlDiv.index = 1; map.controls [google.maps.ControlPosition.TOP_CENTER] .push (logoControlDiv);Wenn der initialisieren() Funktion läuft jetzt ruft das auf LogoControl () Funktion, die wir gerade erstellt haben, und fügt ihre Ausgabe den Kartensteuerelementen hinzu.
Ihre Karte sollte jetzt so aussehen:
Um die Farben Ihrer Karte festzulegen, möchten Sie höchstwahrscheinlich den Stiled Map-Assistenten von Google verwenden, um ein schnelles visuelles Feedback zu Ihrer Auswahl zu erhalten.
Das Feature-Typ Das Menü des Assistenten bietet Ihnen eine Reihe von Kartenkomponenten, die zum Gestalten zur Verfügung stehen. Sie sind vom allgemeinsten bis zum spezifischsten organisiert. Auf der allgemeinsten Ebene können Sie die Farbauswahl auf das Symbol anwenden Alles Feature-Typ, um alles auf der Karte gleichermaßen zu beeinflussen. Am anderen Ende des Spektrums können Sie so genau wie einen Drilldown durchführen Alle> Transit> Station> Bus zum Beispiel.
Mit einer Feature-Typ ausgewählt können Sie dann auch eine Auswahl treffen Elementtyp In diesem Menü können Sie bestimmen, ob Ihre Farbauswahl Einfluss auf die Geometrie oder die Beschriftungen des Features haben soll (z. B. die kleinen Textbeschriftungen, die in der Karte angezeigt werden). Außerdem können Sie dann entweder die Füll- oder Strichfarbe zum Ändern auswählen.
Bei der Auswahl der Farben gibt es zwei Hauptbereiche, mit denen Sie arbeiten möchten. das Farbe Panel und die Farbton Panel. Das Farbe Das Bedienfeld wendet einen Farb-Hexcode in flacher Linie auf die ausgewählten Features und Elemente an Farbton Das Bedienfeld färbt Ihre Auswahl in einem Bereich von Helligkeit und Dunkelheit, der von der Originalfarbe jedes Elements beeinflusst wird.
In der Regel sollten Sie zunächst eine Farbton auf die allgemeinsten Ebenen Ihrer Karte, so dass Sie eine gewisse Einheitlichkeit in Ihrem Farbschema haben - Sie könnten dies mit einem Grundanstrich vergleichen. Von dort aus können Sie dann nach unten bohren, um die Oberfläche flach zu "lackieren" Farbe Einstellungen für spezifischere Funktionen und Elemente.
Beginnen Sie mit der Suche im Assistenten nach "Melbourne" und positionieren Sie die Vorschau-Karte so, dass sie ungefähr den Bereich anzeigt, in dem Sie Ihre eigene Karte festgelegt haben.
Unter dem Feature-Typ Menü im Assistenten auswählen Alles, und unter der Elementtyp Menü auswählen Geometrie. Dann überprüfen Sie die Farbton Klicken Sie auf die Farbleiste, bis ein Wert von irgendwo in der Nähe angezeigt wird # ffa200. Aus irgendeinem Grund können Sie einen Wert nicht direkt in dieses Feld eingeben. Daher müssen Sie den Wert so nah wie möglich durch Klicken auf. Dann überprüfen Sie die Helligkeit umkehren Aktivieren Sie das Kontrollkästchen Sättigung Einstellung und ziehen Sie es auf 35, aktiviere das Leichtigkeit einstellen und auf stellen 50, und aktivieren Sie das Gamma Einstellung und erhalten Sie es so nah wie möglich an 1.3.
Diese Einstellungen sollten Ihre gesamte Karte wie folgt gefärbt haben:
Ihre Karte sieht in diesem Stadium etwas komisch aus, weil wir eine bunte Karte erstellen möchten. Die Farbtoneinstellungen wurden daher verstärkt, um sicherzustellen, dass sich keine nüchternen Bereiche befinden. Die übermäßig hellen Bereiche werden in nachfolgenden Schritten mit gedämpfteren Farben überschrieben.
Nachdem Sie nun Ihren ersten Stil angewendet haben, klicken Sie auf Hinzufügen in der oberen rechten Ecke des Kartenstil (auf der rechten Seite des Kartenassistenten). Durch Klicken auf diese Schaltfläche wird ein zweiter Stil mit dem Namen "Stil 1" erstellt, unter dem Sie verschiedene Elemente auswählen und neue Stile anwenden können.
Mit "Style 1" in der Kartenstil Panel und Alles noch ausgewählt unter Feature-Typ drücke den Etiketten Option in der zweiten Liste der Elementtyp Speisekarte. Überprüf den Farbton Feld und setzen Sie es erneut auf einen Wert von # ffa200 Ihre Etiketten sind also alle gefärbt, anstatt hellblau oder grün zu sein, wie Sie im obigen Bild sehen.
Drücke den Hinzufügen Taste auf der Kartenstil Um einen neuen Stil zu erstellen, klicken Sie auf Wasser in der zweiten Liste der Feature-Typ Speisekarte. Unter dem Elementtyp Menü auswählen Geometrie. Überprüf den Farbe und geben Sie einen Farb-Hexcode von ein # 8F9B98.
Sie sollten nun wissen, wie Sie neue Stile erstellen, indem Sie auswählen Feature-Typ und Elementtyp Menüpunkte. Fügen Sie die übrigen Stile nacheinander im Stil des Karten-Assistenten hinzu:
Wenn Sie alle diese Formatvorlagen hinzugefügt haben, können Sie die vom Assistenten erstellten Einstellungen exportieren und in Ihre Map einfügen. Auf der Kartenstil Klicken Sie auf die Schaltfläche JSON anzeigen Knopf am unteren Rand. Es erscheint ein weißes Fenster mit einem Array von JavaScript-Optionen.
Kopieren Sie den gesamten Text aus diesem Fenster zwischen der Öffnung [ und schließen ], alles außer der Hauptüberschrift.
Am anfang deines initialisieren() Funktion füge diese neue Zeile hinzu:
var Stile =;
Positionieren Sie den Cursor vor dem ; Fügen Sie dann den Code ein, den Sie mit dem Stil-Map-Assistenten kopiert haben. Sie sollten am Ende mit:
var styles = ["elementType": "geometrie", "stylers": ["hue": "# ffa200", "invert_lightness": true, "helligkeit": 50, "saturation": 35, "gamma": 1.31], "elementType": "labels", "stylers": ["hue": "# ffa200"], "featureType": "water", " elementType ":" geometrie "," stylers ": [" color ":" # 8F9B98 "], " elementType ":" labels.text.fill "," stylers ": [" color ":" # f8ead0 "], " elementType ":" labels.text.stroke "," stylers ": [" color ":" # 6a5035 "], " featureType ":" landscape.natural "," elementType ":" Geometrie "," Stylers ": [" color ":" # 9c9743 "], " featureType ":" landscape.man_made "," elementType ":" Geometrie "," Stylers ": [" color ":" # 9f8053 "], " featureType ":" poi "," elementType ":" geometrie "," stylers ": [" color ":" # ACA74C "], " featureType " : "Straße", "Elementtyp": "Geometrie.fill", "Styler": ["Farbe": "# d3b681"], "FeatureType": "Straße", "Elementtyp": "Geometrie.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": "geometrie", "stylers": [ "color": "# 876b48"], "featureType": "transit.station", "elementType": "geometrie", "stylers": ["color": "# a58557"]];
Dann ganz am Ende des initialisieren() Funktion fügen Sie diese drei Zeilen hinzu:
var styledMap = new google.maps.StyledMapType (styles, name: "Styled Map"); map.mapTypes.set ('map_style', styledMap); map.setMapTypeId ('map_style');Mit diesen Codezeilen werden alle Farbschemadaten, die Sie gerade aus dem Stilkartenassistenten abgerufen haben, auf Ihre Karte angewendet. Nehmen Sie einen anderen Blick und es sollte jetzt mit allen Ihren Styling-Optionen angezeigt werden:
Schauen Sie sich die Live-Demo an, damit Sie die Karte in der richtigen Größe sehen können, und spielen Sie hier mit Zoomen und Schwenken.
Als letzten Schliff können Sie auch einen Rahmeneffekt um die Karte hinzufügen, um das Styling noch weiter zu unterstreichen. Ersetzen Sie das vorhandene # map-canvas … CSS in Ihrer Datei mit diesem:
# Kartenleinwand Höhe: 90%; Rahmen: 5px fest # 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-Schatten: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000;
Wie Sie sehen, können Sie mit Google Maps nicht nur eine einfache Einbettung, sondern auch eine Menge tun. In diesem Tutorial haben wir nur einige Aspekte der Google Maps-API untersucht. Weitere Informationen zu allen anderen Funktionen der API finden Sie in den Google Map-Hilfedokumenten.
Wenn Sie dieses Tutorial noch weiterführen möchten, können Sie auch versuchen, Ihre eigenen benutzerdefinierten Zoom- und Schwenksteuerelemente (benutzerdefinierte Steuerungsdokumente) hinzuzufügen und Infofenster zu erstellen, die beim Klicken auf Markierungen angezeigt werden. Diese Popups können Details wie Telefonnummer und Straße enthalten (Info Windows Docs)..
Probieren Sie diese Techniken beim nächsten Mal aus, wenn ein Kunde Sie auffordert, eine Google Map in seine Website aufzunehmen. Sie könnten nur einen Bonus bekommen!
