Googlemaps per Smartyplugin

danillo · January 16, 2009, 5:37pm

Ich habe folgendes vor.
Bestimmte Kategorien haben einen Bezug zu einem Ort. Daher möchte ich im Langtext zur Kategorie einen Karte von googlempas einblenden. Dazu verwende ich ein Smartyplugin.
Soweit funktioniert es auch schon.
Was jetzt noch fehlt ist, dass das ganze auch standardkonform passiert.
Kann ich über ein Plugin, oder gerne auch anders, aus ein machen?
Wie mache ich das mit dem Javaskriptcode am besten? Bisher schreibe ich ihn eben durch das Plugin an die Stelle, an der ich die Karte einblende. Würde einen Teil aber gerne in den Head-Bereich schreiben.
Danke schon mal für jeden Tipp!

marco.steinhaeuser · January 17, 2009, 4:48pm

Hallo,

das ist ja mal eine geile Idee Kann man sich das irgendwo anschauen?

Den JS-Code könntest Du theoretisch komplett in eine .js-Datei auslagern und über die _header.tpl aufrufen. Jetzt muss nur noch am Langtext der Verweis auf den header erfolgen. Mit einem Code-Beispiel liesse sich da sicher mehr sagen…

Marco Steinhäuser
Community Operator
OXID eSales AG

danillo · January 19, 2009, 4:17pm

Hier mal ein kleines Beispiel: speichern unter oxid/core/smarty/plugins/insert.dpw_googleroute.php

<?php
function smarty_insert_dpw_googleroute($params, &$smarty) {
$map =’<script type=“text/javascript”>

var map;
var gdir;
var geocoder = null;
var addressMarker;
var mapControl;
function initialize() {
  if (GBrowserIsCompatible()) {      
    map = new GMap2(document.getElementById("map_canvas"));
    mapControl = new GMapTypeControl();
    map.addControl(mapControl);
    map.addControl(new GLargeMapControl());
    gdir = new GDirections(map, document.getElementById("directions"));
    GEvent.addListener(gdir, "load", onGDirectionsLoad);
    GEvent.addListener(gdir, "error", handleErrors);
    setDirections("'.$params['Ziel'].'", "'.$params['Ziel'].'", "de_DE");
  }
}

function setDirections(fromAddress, toAddress, locale) {
  gdir.load("from: " + fromAddress + " to: " + toAddress,
            { "locale": locale });
}
function handleErrors(){
   if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
     alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.

Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.
Error code: " + gdir.getStatus().code);

   else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
     alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.

Error code: " + gdir.getStatus().code);
// else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <— Doc bug… this is either not defined, or Doc is wrong
// alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.
Error code: " + gdir.getStatus().code);

   else if (gdir.getStatus().code == G_GEO_BAD_KEY)
     alert("The given key is either invalid or does not match the domain for which it was given.

Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert("A directions request could not be successfully parsed.
Error code: " + gdir.getStatus().code);

   else alert("An unknown error occurred.");
   
}
function onGDirectionsLoad(){ 
  // Use this function to access information about the latest load()
  // results.
  // e.g.
  // document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
  // and yada yada yada...
}
&lt;/script&gt;

<form action="#" onsubmit=“setDirections(this.from.value, this.to.value, this.locale.value); return false”>
<table>
<tr><th align=“right”>Von: </th>
<td><input type=“text” size=“35” id=“fromAddress” name=“from"
value=”"></td>
<th align=“right”> Nach: </th>
<td align=“right”><input type=“text” readonly size=“35” id=“toAddress” name=“to"
value=”’.$params[‘Ziel’].’"></td></tr>
<tr><th>Sprache: </th>
<td colspan=“3”><select id=“locale” name=“locale”>
<option value=“en”>English</option>
<option value=“fr”>French</option>
<option value=“de” selected>German</option>
<option value=“ja”>Japanese</option>
<option value=“es”>Spanish</option>
</select>
<input name=“submit” type=“submit” value=“Route berechnen!”>
</td></tr>
</table>

</form>
<br>
<table class=“directions”>
<tr><th>Ihre Route zu TuVino</th><th>Karte</th></tr>
<tr>
<td valign=“top”><div id=“directions” style=“width: 275px”></div></td>
<td valign=“top”><div id=“map_canvas” style=“width: 310px; height: 400px”></div></td>
</tr>
</table>’;
return ($map);}
?>

Dann eine Contentseite mit folgendem Inhalt erstellen: [{insert name=“dpw_googleroute” Ziel=“Musterstraße 12, 12345 Musterstadt”}]

Bei mir heißt die Seite: “Anfahrtsbeschreibung”. Da ich das Plugin nur auf dieser Seite verwende, habe ich die Datein oxid/out/basic/tpl/_header.tpl wie folgt angeändert:

aus <body> wurde <body [{if $title==“Anfahrtsbeschreibung”}] onload=“initialize()” onunload=“GUnload()”[{/if}]>

und als letzte Zeile vor <head/> steht noch

[{if $title==“Anfahrtsbeschreibung”}]<script src=“http://maps.google.com/maps?file=api&v=2&key=hier den google-maps-key für die Domain eintragen” type=“text/javascript”></script>[{/if}]

Bisher eben nur ein Dummy, um die Funktionalität auszuprobieren.

danillo · January 21, 2009, 3:48pm

Mein Ziel ist immernoch, ein Plugin hochzuladen (mit Eingetragenen googlemaps-key) und gut ist. Ohne die Templates anfassen zu müssen.

Das Problem ist ja, dass der key im <head>-Bereich geladen werden muss. Und den <body>-Tag muss zu <body onunload=“GUnload()”> modifizieren.

Jetzt hab ich auf einer anderen Seite einen interessanten Kniff gesehen: In einen <script>-Tag steht folgendes:

function loadGoogle() {
var s = document.createElement(“script”);
s.setAttribute(“src”, “http://maps.google.com/maps?file=api&v=2.x&key=googlekey=2&callback=loadmap”);
s.setAttribute(“type”, “text/javascript”);
document.documentElement.appendChild(s);
}

    window.onload = function() {
      setTimeout("loadGoogle()", 2);
    }

Wenn ich das ausprobiere wird zwar bei google geladen, aber der Screen wird weiß und das war’s dann auch

Kennt sich vielleicht jemand damit aus?

danillo · January 22, 2009, 3:59pm

Hab jetzt eine Lösung gefunden, die so funktioniert, wie ich mir das vorgestellt hatte. Es fehlen nur noch ein paar Tests.

Dann kann es gerne jeder haben.

marco.steinhaeuser · January 23, 2009, 9:46am

Hallo Danillo,

prima
Was war die Lösung? Kann nur eine Kleinigkeit gewesen sein, oder?

Gruß

Marco Steinhäuser
Community Guide
OXID eSales AG

danillo · January 23, 2009, 11:30am

Hier kurz die Lösung:

Es gibt ein Plugin, dass den Javacode für die Karte schreibt. Um die Informationen in den HEAD-Bereich zu bekommen läd das Plugin einen Outputfilter, welcher mit regulären Ausdücken die Seite durchsucht und den Javacode hinzufügt.

Der Vorteil: Man kopiert einfach die beiden Plugins ins richtige Verzeichnis und kann dann, ohne ein Template anpassen zu müssen, überall wo man möchte eine Karte per Plugin einsetzen, z. B. im Beschreibungstext.

Was kann das ganze schon:

Karte anzeigen
klm-File nachladen
alternatives Bild, falls kein JavaScript aktiviert

Was fehlt mir noch:

Abfangen von fehlerhaften oder falschen Eingaben.
Auslagern von Optionen in eine Konfigurationsdatei
Unterstützung verschiedener Sprachen
weitere Optinen für die Karte (Kartentyp, Zoomfaktor,…)
mehrere Karten auf einer Seite
checken, ob Routen und Karten auf einer Seite sich stören
V2.0 mit openlayer (dann Auswahl des Kartenmaterials)

Wo packe ich das ganze denn dann hin, wenn’s fertig ist? Es kann mir natürlich jeder eine Nachricht schreiben, der sich dafür interessiert.

danillo · February 2, 2009, 9:59am

Ich habe jetzt zwei Lösungen.

Bei der einen, wird das JavaScript per DOM eingehängt.
Vorteil: nur eine Datei
Nachteil: kein Mischen von Routing und Karten auf einer Seite, nur eine Instanz (karte oder Route) pro Seite

Bei der anderen Variante wird der Javacode per Outputfilter in den Head-Bereich geschrieben.
Vorteil: Mischen von Routen und Karten, auch mehrmals pro Seite
Nachteil: extra outputfilter notwendig

Ich bin mir nicht ganz sicher, welche Variante ich da weiter verfolgen soll?

marco.steinhaeuser · February 2, 2009, 9:16pm

Hallo Danillo,

schickst Du mir bitte auch die andere Version zu? Ich habe gut gelagert, bis wir uns einig sind, wohin genau wir das zur gemeinschaftlichen Bearbeitung schicken können. Ich würde mich freuen, wenn an dieser Geschichte gemeinschaftlich gearbeitet werden kann. Kommunikationsmittel: Mailingliste. Was sagst Du?

Gruß

Marco Steinhäuser
Community Guide
OXID eSales AG