Vom Mitgliederprofil in die Landkarte

Hallo,
hab noch ein bischen gebastelt um User und Orte direkt in der Landkarte anzufahren, zum Beispiel aus dem Mitgliederprofil (da gab's auch mal nen Verbesserungsvorschlag im HPM Support dazu, aber den finde ich gerade nicht).

Folgendermaßen ist es gedacht:
Im Mitgliederprofil steht ein Link zur Landkarte <a href="geomap.php?username=sabine">In Landkarte anzeigen</a>, woraufhin die Karte angezeigt wird und auf den betroffenen User gezoomt wird. Das gleiche für einen besonderen Ort mit <a href="geomap.php?location=Hockenheimring">Hockenheimring</a>.
Beispiel: http://79444.homepagemodules.de/geomap.php?location=Hockenheimring

Um das zu ermöglichen muss folgendes ins Landkarten-Template eingefügt werden (wobei Veränderungen hier allerdings von HPM nicht empfohlen wird...)

im unteren Bereich des Templates, direkt unterhalb von <script type="text/javascript" defer="defer"> kommt

var select_username = '';
var select_location = '';
var select_point1 = 0;
var select_point2 = 0;

/** Wurde ein String übergeben? **/
var query = location.search;
if(query.length > 0) {
  query = query.substring(1, query.length);
  /** Ersetzen der Sonderzeichen **/
  query = query.replace(/%26/,'&');   // Kaufm. Und
  query = query.replace(/%20/,' ');   // Leerzeichen
  var elements = query.split('&');
  for (i = 0; i < elements.length; i++) {
    var assign = elements[i].split('=');
    /** Username wurde übergeben **/
    if(assign[0] == 'username') {
      select_username = assign[1];
      break;
    }
    /** Ort wurde übergeben **/
    if(assign[0] == 'location') {
      select_location = assign[1];
      break;
    }
  }
}

if(select_username == data[2]) {
  select_point1 = data[0];
  select_point2 = data[1];
}

if(select_location == data[2]) {
  select_point1 = data[0];
  select_point2 = data[1];
}

if(select_point1 > 0 && select_point2 > 0)
  map.centerAndZoom(new GPoint(select_point1,select_point2),3);

Ehrlich Sabine, Du hast mich schon so oft im Support inzwischen von Deinem Fachwissen überzeugt dass ich überhaupt keine Bedenken hätte Erweiterungen oder Veränderungen aus Deiner Feder zu übernehmen!

Ich werde das auf jeden Fall mal versuchen auszutesten, denke das wäre vielleicht auch ein Möglichkeit "Wetterpoints" auf der Karte sichtbar zu machen wie es im SurfAndKite Forum gewünscht ist?

Meinen Dank dafür dass Du solche Sachen auch anderen Forenbetreibern zur Verfügung stellst.

Gruß, BOo°m

In Antwort auf:

---

Im Mitgliederprofil steht ein Link zur Landkarte <a href="geomap.php?username=sabine">In Landkarte anzeigen</a>,

---

Ja stimmt das war etwas unglücklich ausgedrückt. Das muss noch in Mitgliederprofil:
<a href="geomap.php?username={{name}}">Wohnort in Landkarte anzeigen</a>

Dein Name ist ja gleich der Härtetest mit dem ° Zeichen...

Im Template-Element Mitglieder- Profil sieht das also anstatt vorher so:
<tr class="nnor">
<td valign="top" nowrap colspan=3><a href="{{sendpmail_link}}">{[userprofile_pm_send]}</a>
| <a href="{{searchposts_link}}">{[userprofile_messages_search]}</a></td>
</tr>
</table>

....nun so aus:
<tr class="nnor">
<td valign="top" nowrap colspan=3><a href="{{sendpmail_link}}">{[userprofile_pm_send]}</a>
| <a href="{{searchposts_link}}">{[userprofile_messages_search]}</a>
| <a href="geomap.php?username={{name}}">Wohnort in Landkarte anzeigen</a></td>
</tr>
</table>


rot ist neu...

Mal schauen....

Geht zwar auf die Landkarte aber nicht direkt zum Wohnort wie das bei einem Punkt in den Einstellungen geschieht....

Habe im Moment leider keine Zeit das weiter auszutesten, frühestens Heute Abend wieder....

Äähm ja, muss heißen:
<a href="geomap.php?username={{username}}">Wohnort in Landkarte anzeigen</a>

in {{name}} steht ja der richtige Name

Hallo Sabine,

ich habe alles genau so und an den richtigen Stellen ins Landkarten-Tamplate reingesetzt, aber dann wird die Landkarte nicht mehr dagestellt, nehme ich alles wieder raus, ist die Landkarte wieder da.
Es wäre so schön gewesen

Gruß, Ulrike

Hallo Ulrike,

ich hab da eventuell eine Idee woran es liegen könnte. Wenn ich den Code aus dem Forum kopiere und in das Template einsetze wird es als eine Zeile dargestellt. Durch die eingefügten Kommentare mit // wird dann das Ende des Codes auskommentiert, wodurch es zu Fehlern im Rest kommt und die Landkarte nicht mehr angezeigt wird.

Daher habe ich mal eine Textdatei angehängt, die den Code inklusive Absätze enthält.

Sollte das auch nicht funktionieren, wäre es schön wenn du mal das Landkarten-Template postest, das nicht funktioniert.

Hallo Sabine,

Deine Idee war genau richtig, ich habe den Code als lange Zeile entfernt, dann erneut markiert, in Word kopiert, dort erneut markiert und dann eingefügt, jetzt wird er richtig und nicht als lange Zeile dargestellt.
Jetzt klappt alles wunderbar.
Sabine, vielen Dank dafür.

Gruß, Ulrike

Welche Browser benutzt ihr? Im meinem FF wird zwar zur Landkarte gesprungen aber nicht direkt auf meinen Wohnort.....

Ich habe es einmal alles aus den Beiträgen entnommen und die Veränderungen hineinkopiert und einmal nun aus der Textdatei, in Beiden Fällen wird im FF nicht direkt zum Wohnort gesprungen. Ein Test mit dem IE steht noch aus.....

Hallo BOo°m,

ich benutze den Browser IE und es klappt bei allen Mitgliedern tadellos. Im FF gehts auch, nur bei einem Mitglied von 24 wird nicht direkt zum Wohnort gesprungen. Hast Du auch mehrere Wohnorte getestet?

Gruß, Ulrike

Ich habe mich hier im Forum mal in die Landkarte eingetragen und wenn ich auf 'Wohnort in Landkarte anzeigen' gehe, dann wird direkt dorthin gezoomt. Mit deinem Namen (BOo°m) geht es bei mir auch im Internet Explorer. Im Firefox funktioniert dein Name nicht, da das ° in der Adressleiste durch %B0 ersetzt wird (das gleiche auch in Opera).
Das Zeichen müsste man noch vorher ersetzen:
query = query.replace(/%B0/,'°');

Das ist die Schwachstelle an dieser Methode, denn sämtliche Sonderzeichen einzeln zu ersetzen ist vielleicht etwas aufwendig. Theoretisch sollte es auch irgendwie automatisch gehen....

Ansonsten geht es natürlich auch nur wenn der betroffene User seine Adresse in der Landkarte hinterlegt hat. Da sollte man vielleicht noch eine Meldung ausgeben, falls dem nicht so ist.

Nachdenkliche Grüße
Sabine

Hmmm .....ja stimmt. Wenn ich auf andere Klicke funktioniert das.

Vielleicht hat ja der Support eine Lösung parat, da es für viele sicherlich eine nette Zusatzfunktion ist und Du schon eine Menge Programmierarbeit übernommen hast könnte ich mir eine Hilfe vom Support gut vorstellen.

So, die korrigierten Teile vom Template-Element Landkarte findet ihr jetzt direkt im Support:
http://www.hpm-support.de/topic-threaded...message=7096957

Wie man hier im Board sehen kann funktioniert alles einwandfrei.

Am besten und sichersten ist es das Template-Element Landkarte wieder zurückzusetzen wenn man es bereits verändert hat und dann die korrigierten Teile direkt aus dem Support nun zu übernehmen. Vielleicht hat Sabine aber auch lust das hier auch nochmal korrigiert reinzusetzen, wollte nun nicht vorgreifen da es ihre Entwicklung ist......


Nochmals meinen Dank Sabine.

Gruß, BOo°m

Ich zitiere mich jetzt einfach mal selbst, urheberrechtliche Probleme sollte es dabei ja nicht geben

Hier ist noch der Thread im HPM Forum: http://www.hpm-support.de/topic-threaded...message=7097014

Grüße
Sabine

Zitat von sabine99

---

Alles klar, dann also nochmal alle nötigen Änderungen im Landkarten-Template um einen Link aus dem Mitgliederprofil in die Landkarte zu setzen mit
<a href="geomap.php?userid={{userid}}">Wohnort in Landkarte anzeigen</a>
und des weitern ein Info-Fenster in der Landkarte zu öffnen.

[...]
<script type="text/javascript" defer="defer">

var select_userid = \\'\\';
var select_point1 = 0;
var select_point2 = 0;
var select_html = \\'\\';
var query = location.search;
if(query.length > 0) {
  query = query.substring(1, query.length);
  var elements = query.split(\\'&\\');
  for (i = 0; i < elements.length; i++) {
    var assign = elements[i].split(\\'=\\');
    if(assign[0] == \\'userid\\') {
      select_userid = assign[1];
      break;
    }
  }
}

[...]
function createUser(data)
{
[...]

var userid = data[8].substring(1, data[8].length).split(\\'_\\')[0];
if(select_userid == userid) {
  select_point1 = data[0];
  select_point2 = data[1];
  select_html = html;
}

[...]
return marker;
}
[...]

if(select_point1 > 0 && select_point2 > 0) {
  map.centerAndZoom(new GPoint(select_point1,select_point2),2);
  map.openInfoWindow(map.getCenter(),select_html);
}

</script>

Wichtig ist, dass der Mittelteil in der Funktion createUser HINTER der Zuweisung der Variable html steht aber VOR return marker!

---

alles sehr schön und gut nur klapt es bei mir net

ik poste ma alles was ik in dem template habe may be findet einer meinen fehler!!! es wird zwar in die landkarte verwiesen aber net genau die person angewählt zu der es gehen soll noch näher heran gezoomt!!!


{{today@dateformat.start}}Heute{{today@dateformat.end}}
{{yesterday@dateformat.start}}Gestern{{yesterday@dateformat.end}}
{{norm@dateformat.start}}%d.%m.%Y{{norm@dateformat.end}}


<table cellpadding=4 cellspacing=0 width=100%><tr><td class=ntit>&nbsp;{[map_title]}</td></tr>
<td class=nnor>
<div id="map" style="width: 100%; height: 650px"></div>
<br>
<img src="http://labs.google.com/ridefinder/images/mm_20_yellow.png"> {[map_location_special]}<br>
<img src="http://labs.google.com/ridefinder/images/mm_20_red.png"> {[map_location_members]}<br>
<small>{[map_info_mydata]}</small>

</td></tr></table>



{{endbody.start}}
<script src="http://maps.google.com/maps?file=api&v=2&key={{api}}" type="text/javascript"></script>
<script type="text/javascript" defer="defer">
var select_userid = '';
var select_point1 = 0;
var select_point2 = 0;
var select_html = '';
var query = location.search;
if(query.length > 0) {
query = query.substring(1, query.length);
var elements = query.split('&');
for (i = 0; i < elements.length; i++) {
var assign = elements[i].split('=');
if(assign[0] == 'userid') {
select_userid = assign[1];
break;
}
}
}
//<![CDATA[
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

var orticon = new GIcon();
orticon.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png";
orticon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
orticon.iconSize = new GSize(12, 20);
orticon.shadowSize = new GSize(22, 20);
orticon.iconAnchor = new GPoint(6, 20);
orticon.infoWindowAnchor = new GPoint(5, 1);

var map = new GMap(document.getElementById("map"));
map.setMapType(G_HYBRID_TYPE);
// map.addControl(new GSmallMapControl());
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint({{startX}},{{startY}}),{{startZoom}});

function createUser(data)
{
var point = new GPoint(data[0], data[1]);
var marker = new GMarker(point, icon);
var html = "<div style='width:280px;height:120px;color:#000000'>";
if(data[3].length>3) html += '<img src="'+data[3]+'" align=right width=65 height=75>';
if(data[8].length>2) html += '<a href="' + data[8] + '">';
if(data[5].length>2) html += '<span style="color:' + data[5] + '">';
html += '<b>' + data[2] + '</b>';
if(data[5].length>2) html += '</span>';
if(data[8].length>2) html += '</a>';
html += "<br>" + data[4] + "<br>";
html += '{[map_member_messages]} ' + data[6] + '<br>{[map_member_signup_date]} ' + data[7];
html += "</div>";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
var userid = data[8].substring(1, data[8].length).split('_')[0];
if(select_userid == userid) {
select_point1 = data[0];
select_point2 = data[1];
select_html = html;
}
});

return marker;
}
function createOrt(data)
{
var point = new GPoint(data[0], data[1]);
var marker = new GMarker(point, orticon);
var html = "<div style='width:280px;height:120px;overflow:auto;color:#000000'><b>" + data[2] + "</b><br>" + data[3];
html += "</div>";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
users = new Array(
{{users.startlist}}{{tr}}
new Array({{users:x}},{{users:y}},'{{users:username}}','{{users:userimage}}','{{users:usertitle}}','{{users:usercolor}}','{{users:messages}}','{{users:reged|dateformat}}','{{users:userlink}}') {{tr.start}},{{tr.end}}{{users.end}}
);
for (var i = 0; i < users.length; i++) {
var marker = createUser(users[i]);
map.addOverlay(marker);
}
orte = new Array(
{{orte.startlist}}
{{tr2}} new Array({{orte:x}},{{orte:y}},'{{orte:title}}','{{orte:text}}')
{{tr2.start}},{{tr2.end}}
{{orte.end}}
);
for (var i = 0; i < orte.length; i++) {
var marker = createOrt(orte[i]);
map.addOverlay(marker);
}

//]]>
if(select_point1 > 0 && select_point2 > 0) {
map.centerAndZoom(new GPoint(select_point1,select_point2),2);
map.openInfoWindow(map.getCenter(),select_html);
}
</script>
{{endbody.end}}

Hallo,
da ist nur ein kleiner Teil verrutscht:

in der Funktion createUser muss der neue Code direkt vor return marker. Im Moment steht er im Event-Listener drin.
Also richtig ist folgendes (rot markiert ist der korrigierte Teil):

function createUser(data)
{
var point = new GPoint(data[0], data[1]);
var marker = new GMarker(point, icon);
var html = "<div style='width:280px;height:120px;color:#000000'>";
if(data[3].length>3) html += '<img src="'+data[3]+'" align=right width=65 height=75>';
if(data[8].length>2) html += '<a href="' + data[8] + '">';
if(data[5].length>2) html += '<span style="color:' + data[5] + '">';
html += '<b>' + data[2] + '</b>';
if(data[5].length>2) html += '</span>';
if(data[8].length>2) html += '</a>';
html += "<br>" + data[4] + "<br>";
html += '{[map_member_messages]} ' + data[6] + '<br>{[map_member_signup_date]} ' + data[7];
html += "</div>";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
var userid = data[8].substring(1, data[8].length).split('_')[0];
if(select_userid == userid) {
select_point1 = data[0];
select_point2 = data[1];
select_html = html;
}
return marker;
}


Grüße

hmm habe es nun geändert wie du es mir beschrieben hast doch hat sich nix verändert!!!

function createUser(data)
{
var point = new GPoint(data[0], data[1]);
var marker = new GMarker(point, icon);
var html = "<div style='width:280px;height:120px;color:#000000'>";
if(data[3].length>3) html += '<img src="'+data[3]+'" align=right width=65 height=75>';
if(data[8].length>2) html += '<a href="' + data[8] + '">';
if(data[5].length>2) html += '<span style="color:' + data[5] + '">';
html += '<b>' + data[2] + '</b>';
if(data[5].length>2) html += '</span>';
if(data[8].length>2) html += '</a>';
html += "<br>" + data[4] + "<br>";
html += '{[map_member_messages]} ' + data[6] + '<br>{[map_member_signup_date]} ' + data[7];
html += "</div>";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
var userid = data[8].substring(1, data[8].length).split('_')[0];
if(select_userid == userid) {
select_point1 = data[0];
select_point2 = data[1];
select_html = html;
}

return marker;
}
function createOrt(data)

oder ist der link dorthin irgendwie falsch angegeben???


| <a href="geomap.php?username={{username}}">Wohnort in Landkarte anzeigen</a>

Ah ja, Tatsache das ist es. Der Link muss korrekt heißen: <a href="geomap.php?userid={{userid}}">Wohnort in Landkarte anzeigen</a>

Das mit dem username war noch vom ersten Versuch... Besser ist userid zu verwenden, um zu verhindern, dass Namen mit Umlauten in der Adresszeile des Browsers verschandelt werden.

jo super geil!!! thx jetzt haut es absolut hin!!!

Hallo Sabine,
mir ist aufgefallen, dass sich ein Rahmen in der Mitgliederinformation, breit gemacht hat (siehe Anhang).
Ich habe schon versucht im Profil den Rahmen weg zu bekommen. Funktioniert nicht.
Der Rahmen ist aber nur im IE7 vorhanden. Im FF wird alles korrekt angezeigt!!!

Muß wohl am Script liegen?
Weißt Du weiter?

Gruß
Wolf

He,
ich habe nochmal einiges ausprobiert. Mit Erfolg!
Wenn man sich den Rahmen ansieht, scheint immer die Landkarte durch!
Da habe ich mir gedacht, einfach ein farblich angepassten Hintergrund einzutragen.
Das funktioniert sogar.
Vielleicht gibt es auch andere Lösungen.

Hier die Änderungen unter "Admin > Template > Landkarte" in Rot:
Es sind 2 Änderungen notwendig, für "Wohnort(function createUser)" und "Besondere Orte(function createOrt)"!

Hallo wolf.andres,

dass mit dem Rahmen ist mir auch schon unangenehm aufgefallen. Vor kurzem wurden einige Änderungen an der Google Maps API vorgenommen, danach sah das Info-Fenster so unschön aus. Das hat aber nichts mit dem Skript zu tun, sondern ist ein 'Doctype' Problem. Es existiert in allen Landkarten von HPM und ich hatte das gleiche Problem auf einer anderen Website. Es hat sich in Luft aufgelöst, nachdem ich den doctype des Dokuments deklariert habe.
Dazu muss als ALLERERSTE ZEILE eines html-Dokuments, vor dem <html> folgendes eingefügt werden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
für strict, oder
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
für transitional.
Ich habe es bei meinem Forum nicht getestet. Aber da das Forum mit Sicherheit nicht 'strict' programmiert ist, würde ich die zweite Variante (transitional) empfehlen. In der strict Variante sind einige Elemente und Attribute nicht erlaubt, die im html vom Forum jedoch verwendet werden.

Grüße
Sabine

Hallo Sabine,
super Ideen hast du auf Lager.
Interessante Fehlerursache.

Nur der zweite "DOCTYPE" funktionert!