Share
Anstatt Ihren Unternehmensstandort in einer Google Map anzuzeigen, bieten Sie Ihren Nutzern nicht die Möglichkeit, Wegbeschreibungen auf derselben Seite anzuzeigen. Sie müssen kein neues Browserfenster öffnen und selbst finden, wir können es besser machen!
Die Verwendung der Google Maps-API in Ihrer WordPress-Website ist ein relativ einfacher Prozess. In diesem Lernprogramm erfahren Sie genau, wie Sie dies tun können.
Hinweis: Wir werden hier einiges an JavaScript schreiben, aber keine Sorge! Dies ist ein WordPress-Tutorial, also zögern Sie nicht, die JavaScript-Teile zu beschönigen :)
In deiner Functions.php Datei (im Stammverzeichnis des Designs) - schließen Sie das ein map.php Datei, die Sie oben erstellt haben.
Accentsconagua
/ * functions.php * / include ('map / map.php'); Es gibt drei Dinge, die wir im Admin-Bereich bearbeiten können.
infoWindow Inhalt. Dies ist die weiße Blase, die Sie oft in Google Maps sehen - wir möchten den Text in der Blase bearbeiten können!Im map.php, einhaken admin_init um unsere Einstellungen zu registrieren:
function map_init () register_setting ('general', 'map_config_address'); register_setting ('general', 'map_config_infobox'); register_setting ('general', 'map_config_zoom'); add_action ('admin_init', 'map_init'); Jetzt können wir auf der Optionsseite den Überschriftentext für unseren Abschnitt und alle Eingaben einrichten, die wir benötigen.
Funktion map_config_option_text () echo 'Legen Sie hier die Optionen für die Karte fest:
'; // Längengrad, Breitengradwerte für die Zielfunktion map_config_address () printf ((''), get_option (' map_config_address ')); // Der Textinhalt für die InfoWindow-Bubble-Funktion map_config_infobox () printf ((''), get_option (' map_config_infobox ')); // Die anfängliche Zoomstufe der Karte. Funktion map_config_zoom () printf (('''), get_option (' map_config_zoom '));
Schließlich haken wir uns ein admin_menu um unsere Einstellungen im WordPress Admin anzuzeigen:
function map_config_menu () add_settings_section ('map_config', 'Map Configuration', 'map_config_option_text', 'general'); add_settings_field ('map_config_address', 'Adresse - Längengrad und Breitengrad', 'map_config_address', 'general', 'map_config')); add_settings_field ('map_config_infobox', 'Map InfoWindow', 'map_config_infobox', 'general', 'map_config')); add_settings_field ('map_config_zoom', 'Map-Zoom-Ebene', 'map_config_zoom', 'general', 'map_config')); add_action ('admin_menu', 'map_config_menu'); Gehen Sie in Ihren Admin-Bereich, Sie sollten jetzt folgendes sehen:
Zieladresse
Das Google Maps-API akzeptiert eigentlich reguläre Adressen wie "Newgate Lane, Mansfield, Nottinghamshire, UK". Sie werden jedoch feststellen, dass Sie mit Ihrem Ziel genauer sein möchten (beispielsweise möchten Sie wahrscheinlich darauf hinweisen.) direkt zu Ihrem Unternehmen und nicht nur zur Straße). Sie können ein Google Maps API V3-Beispiel verwenden, um nach Ihrem Ziel zu suchen. Ziehen Sie das Ziel herum, bis Sie Ihre Stelle mit der Nadel markiert haben. Wenn du glücklich bist, kopiere die Lat / Lng: Wert in das Adressfeld in den Optionen - zum Beispiel 27.52774434830308, 42.18752500000007 (nur die durch Komma getrennten Zahlen, keine Klammern oder Anführungszeichen!)
InfoWindow-Text
Mach das, was du willst. Ihr Geschäftsname wäre eine gute Idee :)
Zoomstufe
Ein guter Ausgangspunkt ist 10.
Klicken Sie auf "Änderungen speichern". Wenn die Seite aktualisiert wird, können Sie überprüfen, ob die Informationen gespeichert wurden. Es sollte jetzt ungefähr so aussehen:
Wenn wir fertig sind, haben wir 3 Elemente: die Karte, das Bilden, und das Richtungen - In diesem Tutorial habe ich mich daher entschlossen, sie in 3 separate Kurzcodes aufzuteilen. Dadurch können wir die Reihenfolge / Platzierung jedes Artikels ändern, ohne unseren PHP-Code ändern zu müssen. Sie können sich beispielsweise dafür entscheiden, dass sich Ihre Route über der Karte anstatt unter oder neben der Karte befindet.
Kurzcode 1: wpmap_map
Hier registrieren und erfassen wir die Google Maps API-JavasScript-Datei sowie unsere eigene maps.js Datei.
Als nächstes benutzen wir die $ ausgabe Variable zur Speicherung unserer Kartencontainer div zusammen mit einigen benutzerdefinierten Datenattributen. ( Daten-Karten-Infofenster speichert den Inhalt für das Infofenster und Daten-Map-Zoom stellt die anfängliche Zoomstufe dar - beide Werte werden mit WordPress zurückgegeben get_option Funktion).
Zum Schluss geben wir den generierten HTML-Code zur Ausgabe zurück:
Funktion wpmap_map () wp_register_script ('google-maps', 'http://maps.google.com/maps/api/js?sensor=false'); wp_enqueue_script ('google-maps'); wp_register_script ('wptuts-custom', get_template_directory_uri (). '/map/map.js', ",", true); wp_enqueue_script ('wptuts-custom'); $ output = sprintf ('', get_option (' map_config_infobox '), get_option (' map_config_zoom ')); return $ output; add_shortcode ('wpmap_map', 'wpmap_map'); Kurzcode 2: wpmap_directions_container
Hier geben wir einfach eine leere zurück div mit einer ID von dir-container. Dies dient als Container für die Anweisungen.
Funktion wpmap_directions () $ output = ''; return $ output; add_shortcode ('wpmap_directions_container', 'wpmap_directions'); Kurzcode 3: wpmap_directions_input
Dadurch wird der für unser Formular erforderliche Markup generiert.
Hier legen wir auch unsere letzte benutzerdefinierte Option fest - die Zieladresse. Dieses Mal verwenden wir ein ausgeblendetes Formularfeld, um den Latitude / Longitude-Wert zu speichern, den wir zuvor im Admin-Panel eingegeben haben.
Funktion wpmap_directions_input () $ address_to = get_option ('map_config_address'); $ output = ' Geben Sie für die Anfahrtsbeschreibung unten Ihre Adresse ein:
'; return $ output; add_shortcode ('wpmap_directions_input', 'wpmap_directions_input'); Jetzt haben wir die Kurzwahlen eingerichtet, die Sie eingeben und in Ihre eingeben können Kontaktiere uns Seite (oder eine beliebige Seite).
Wenn Sie jetzt eine Vorschau der Seite anzeigen, werden Sie nur die Formulareingabefelder sehen. Das liegt daran, dass wir kein JavaScript geschrieben haben, mit dem die Karte noch initialisiert wird und das Div für die Richtungen derzeit leer ist.
Hinweis: Bevor wir in das JavaScript eintauchen, müssen wir dies nur zu unserem hinzufügen style.css:
# map-container width: 100%; Höhe: 400px;
Jetzt ist es an der Zeit, den Zauber zu verwirklichen! Ich werde kurz erklären, was wir zuerst tun werden, dann werden wir direkt in den Code einsteigen.
WMmap und weisen Sie ihm Eigenschaften zu (einige davon werden wir aus dem Markup herausgreifen, das wir in den Kurzwahlen erstellt haben)drin, ist verantwortlich für das Laden der Karte sowie für das Festlegen einiger Standardwerte wie infoWindow-Text, Zoomstufe und anfängliche Markerposition (alle über WordPress-Optionen)Ich erkläre jeden Teil des Codes Schritt für Schritt, aber machen Sie sich keine Sorgen, wenn Sie sich verlaufen, wir werden alles am Ende zusammenfügen.
Lassen Sie uns unser Objekt erstellen und einige Eigenschaften festlegen. Hier fragen wir einfach das DOM ab, um die HTML-Elemente abzurufen, die die benötigten Werte enthalten. Die Namen der verwendeten Objekte sollten sehr klar und selbsterklärend sein (mapContainer ist natürlich der Map-Container usw. :))
Hier erhalten wir auch einige Objekte von der API, die wir später verwenden werden, wenn wir uns mit Anweisungen befassen.
var WPmap = // HTML-Elemente, die wir später verwenden werden! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), toInput: document.getElementById ('map-config-address'), fromInput: document.getElementById ('from- input '), unitInput: document.getElementById (' unit-input '), // Google Maps-API-Objekte dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map: null, / * geht weiter unter * / Diese sind auch Teil unseres WPmap Wenn Sie sich nicht sicher sind, wie alles zusammenpasst, sollten Sie am Ende dieses Tutorials nachsehen, um den gesamten Code zusammen zu sehen.
showDirections ()Dies wird von einer anderen Methode aus aufgerufen, die wir später sehen werden. Sie steuert im Wesentlichen das Einfügen der Anweisungen in die Seite.
/ * innerhalb des WPmap-Objekts * / showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Richtungen fehlgeschlagen:' + dirStatus); Rückkehr; // Anweisungen anzeigen WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , getStartLatLng ()Dies wird einmal von uns aufgerufen drin Methode. Es wird das einstellen startLatLng Eigenschaft gleich a google.maps.LatLng Objekt, das wir später verwenden können. Es erfordert, dass wir separate Breiten- und Längengrade angeben - wie können wir das tun??
eingeben. Dies bedeutet, dass wir jetzt auf den Wert zugreifen können WPmap.toInput.value .Teilt(","). Dadurch wird ein Array mit den Breiten- und Längengraden als separate Werte zurückgegeben. / * innerhalb des WPmap-Objekts * / getStartLatLng: function () var n = WPmap.toInput.value.split (","); WPmap.startLatLng = new google.maps.LatLng (n [0], n [1]); , getSelectedUnitSystem ()Da wir unseren Benutzern erlaubt haben, auszuwählen, ob sie Richtungen in Metric oder Imperial bevorzugen, verwenden wir diese Methode zum Festlegen DirectionsUnitSystem entweder METRISCH oder KAISERLICHE.
/ * innerhalb des WPmap-Objekts * / getSelectedUnitSystem: function () return WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'metric'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; ,
Anweisungen bekommen()Dies ist die Methode, die aufgerufen wird, wenn der Benutzer auf klickt Anweisungen bekommen Taste.
vonStr Variable.dirRequest. Dieses enthält die Optionen, die zur Angabe der Fahranweisungen erforderlich sind. Ursprung - Die Adresse, die der Benutzer eingegeben hat.Ziel - Das google.maps.LatLng Objekt mit den Breiten- und Längenwerten Ihres Ziels.travelMode - Hier stellen wir sicher, dass wir nur eine Wegbeschreibung abrufen.Einheitssystem - Geben Sie an, welche Maßeinheit je nach Wahl des Benutzers verwendet werden soll.WPmap.dirService.route - und übergeben Sie ihm zwei Parameter: dirRequest - Dies ist das Objekt, das unsere Optionen enthält.WPmap.showDirections - die Rückruffunktion, die die Platzierung der Anweisungen auf der Seite übernimmt./ * innerhalb des WPmap-Objekts * / getDirections: function () var fromStr = WPmap.fromInput.value; var dirRequest = origin: fromStr, Ziel: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); ,
drin()Dies ist die Methode, die aufgerufen wird, wenn die Seite geladen wird. Es ist verantwortlich für:
init: function () // Liefert den Infowindow-Text und die Zoomstufe var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); // die Methode aufrufen, die WPmap.startLatLng setzt WPmap.getStartLatLng (); // die Karte einrichten WPmap.map = new google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), Mitte: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // setze den roten Marker-Pin marker = new google.maps.Marker (map: WPmap.map, Position: WPmap.startLatLng, draggable: false); // Setze den Infowindow-Inhalt infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, Markierung); // Hören Sie auf, wenn Anweisungen angefordert werden. google.maps.event.addListener (WPmap.dirRenderer, 'direction_changed', function () infoWindow.close (); // schließe den ursprünglichen infoWindow marker.setVisible (false); // remove die Anfangsmarkierung); //drin ;// <-- this is the end of the object. Wenn Sie Ihren Benutzern eine nette Nachricht (wie die unten abgebildete) anzeigen möchten, nachdem sie Anweisungen angefordert haben, kopieren Sie einfach den Code unter dem Bild in den Ereignis-Listener im drin Methode.
Wahlweise Vielen Dank Botschaft:
// Ermittle die Entfernung der Fahrt var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // den Inhalt des infoWindow einstellen, bevor wir es erneut öffnen. infoWindow.setContent ('Danke!
Sieht aus, als wärst du dabei '+ distanceString +' weg von uns.
Anweisungen sind knapp unter der Karte '); // Öffne das InfoWindow erneut. infoWindow.open (WPmap.map, Marker); setTimeout (function () infoWindow.close (), 8000); // nach 8 Sekunden schließen. Sind Sie noch da? Wir haben es bis zum Ende geschafft und jetzt müssen wir nur noch den WPmap.init () Methode, wenn die Seite geladen wird. Fügen Sie dies auf der Unterseite von hinzu map.js
google.maps.event.addDomListener (Fenster, 'Laden', WPmap.init);
Wir haben ein Thema behandelt Menge Grund hier, also mal sehen, wie es aussieht, wenn alles zusammengefügt ist.
var WPmap = // HTML-Elemente, die wir später verwenden werden! mapContainer: document.getElementById ('map-container'), dirContainer: document.getElementById ('dir-container'), toInput: document.getElementById ('map-config-address'), fromInput: document.getElementById ('from- input '), unitInput: document.getElementById (' unit-input '), startLatLng: null, // Google Maps-API-Objekte dirService: new google.maps.DirectionsService (), dirRenderer: new google.maps.DirectionsRenderer (), map : null, showDirections: function (dirResult, dirStatus) if (dirStatus! = google.maps.DirectionsStatus.OK) alert ('Richtungen fehlgeschlagen:' + dirStatus); Rückkehr; // Anweisungen anzeigen WPmap.dirRenderer.setMap (WPmap.map); WPmap.dirRenderer.setPanel (WPmap.dirContainer); WPmap.dirRenderer.setDirections (dirResult); , getStartLatLng: function () var n = WPmap.toInput.value.split (","); WPmap.startLatLng = new google.maps.LatLng (n [0], n [1]); , getSelectedUnitSystem: function () return WPmap.unitInput.options [WPmap.unitInput.selectedIndex] .value == 'metric'? google.maps.DirectionsUnitSystem.METRIC: google.maps.DirectionsUnitSystem.IMPERIAL; , getDirections: function () var fromStr = WPmap.fromInput.value; // Abrufen der eingegebenen Postleitzahl var dirRequest = origin: fromStr, Ziel: WPmap.startLatLng, travelMode: google.maps.DirectionsTravelMode.DRIVING, unitSystem: WPmap.getSelectedUnitSystem (); WPmap.dirService.route (dirRequest, WPmap.showDirections); , init: function () // den Inhalt abrufen var infoWindowContent = WPmap.mapContainer.getAttribute ('data-map-infowindow'); var initialZoom = WPmap.mapContainer.getAttribute ('data-map-zoom'); WPmap.getStartLatLng (); // die Karte einrichten WPmap.map = new google.maps.Map (WPmap.mapContainer, zoom: parseInt (initialZoom), // sorgt dafür, dass es als Integer-Zentrum durchkommt: WPmap.startLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP); // Setze den roten Pin-Marker marker = new google.maps.Marker (map: WPmap.map, Position: WPmap.startLatLng, draggable: false); // Setze den Infowindow-Inhalt infoWindow = new google.maps.InfoWindow (content: infoWindowContent); infoWindow.open (WPmap.map, Markierung); // Hören, wann Anweisungen angefordert werden google.maps.event.addListener (WPmap.dirRenderer, 'direction_changed', function () infoWindow.close (); // erste InfoWindow marker.setVisible (false); // schließen die ersten zu verwendenden Markierungs- / Setup-Zeichenfolgen var distanceString = WPmap.dirRenderer.directions.routes [0] .legs [0] .distance.text; // den Inhalt des infoWindow festlegen, bevor es erneut geöffnet wird. infoWindow. setContent ('Danke!
Sieht aus, als wärst du dabei '+ distanceString +' weg von uns.
Anweisungen sind knapp unter der Karte '); // Öffne das InfoWindow erneut. infoWindow.open (WPmap.map, Marker); setTimeout (function () infoWindow.close (), 8000); // nach 8 Sekunden schließen ); //drin ; google.maps.event.addDomListener (Fenster, 'Laden', WPmap.init); Beim Schreiben dieses Tutorials habe ich meinen Code mit dem gängigen TwentyEleven WordPress Theme getestet. Der Pfeil am unteren Rand des InfoWindow auf der Karte wurde nicht richtig angezeigt. Es ist, weil .Eintrag-Inhalt img auf Zeile 857 hat ein maximale Breite einstellen. Dies verfälscht die Art und Weise, wie Google das infoWindow rendert. Um das Problem zu beheben, geben Sie dies irgendwo darunter ein:
# map-container img max-width: none;
