Author Topic: [MOD]Google Photomap (Read 113725 times)

rinaldos · « **on:** April 25, 2008, 12:35:33 PM »

Für diesen MOD/ADDON ist es zwingend erforderlich diesen [MOD-beta] Google-Maps Integration V.01 zu installieren. Den findet Ihr hier
http://www.4homepages.de/forum/index.php?topic=16533.0

CODEUPDATE (nun ohne Browserweiche)

Ich wollte eigentlich nur eine Photomap auf meiner Seite installieren, stiess dabei auf grosse Probleme. Durch viel Ausprobieren und lesen habe ich dann endlich meine Google Photomap realisieren können.
Ich bin den Anleitungen von Google gefolgt. Diese kann man im Englischen hier nachlesen.
http://code.google.com/support/bin/answer.py?answer=65622

Hier ist das DEMO.
http://rinaldos.homeip.net/google-photo-map-cgn-alt.html

Getestet mit dem IE6, Safari 3.0, FF 2.0.14 und Opera 9.20 für MAC. IE7 ungetestet!

Schritt 1:
erstelle die Dateien google-photo-map.php im root Verzeichnis von 4images. (Danke an IVAN für die modifizierte Version)

google-photo-map.php

Code: [Select]

<?php
/**************************************************************************
 *                                                                        *
 *    4images - A Web Based Image Gallery Management System               *
 *    ----------------------------------------------------------------    *
 *                                                                        *
 *             File: google-photo-map.php                                 *
 *        Copyright: (C) 2008 Ingo                                        *
 *            Email: jan@4homepages.de                                    *
 *              Web: http://www.4homepages.de                             *
 *    Scriptversion: 1.7.6                                                *
 *                                                                        *
 *    Never released without support from: Nicky (http://www.nicky.net)   *
 *                                                                        *
 **************************************************************************
 *                                                                        *
 *    Dieses Script ist KEINE Freeware. Bitte lesen Sie die Lizenz-       *
 *    bedingungen (Lizenz.txt) für weitere Informationen.                 *
 *    ---------------------------------------------------------------     *
 *    This script is NOT freeware! Please read the Copyright Notice       *
 *    (Licence.txt) for further information.                              *
 *                                                                        *
 *************************************************************************/

define('ROOT_PATH', './');
include(ROOT_PATH.'global.php');

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#38;#38;#38;#38;#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr; 
} 

// Select all the rows in the markers table
$query = "SELECT * FROM (".IMAGES_TABLE.") WHERE `image_gmap_show` = 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml ; charset=iso-8859-15");

// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['image_name']) . '" ';
  echo 'address="' . parseToXML($row['image_']) . '" ';
  echo 'lat="' . $row['image_gmap_latitude'] . '" ';
  echo 'lng="' . $row['image_gmap_longitude'] . '" ';
  echo 'kml="' . "".ROOT_PATH."data/kml/" . $row['image_id'] . ".kml" . '" ';
  $max_length = 100; // Max. Anzahl der Zeichen in der Bildbeschreibung
  $description = $row['image_description'];
  $description_short = $description;
         if (strlen($description) > $max_length) {
            $description_short = substr($description, 0, $max_length)." ... ";
         }
  echo 'desc="' . parseToXML($description_short) . '" ';
  echo 'type="' . "".ROOT_PATH."details.php?image_id=" . $row['image_id'] . '" ';
  echo 'thumb="' . "".ROOT_PATH."data/thumbnails/" . $row['cat_id'] . "/" . $row['image_media_file'] . '" ';
  echo 'cat="' . "".ROOT_PATH."categories.php?cat_id=" . $row['cat_id'] . '" ';
  echo '/>';
}
// End XML file
echo '</markers>';
?>

Schritt 2:
erstelle ein JavaScript in /js/gm.js und füge folgenden Text ein.

gm.js

Code: [Select]

    //<![CDATA[

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

// Set up our GMarkerOptions object literal
markerOptions = { icon:tinyIcon };

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.setCenter(new GLatLng(50.94160997, 6.96867943), 5);
        var Tsize = new GSize(200, 256);
        map.addControl(new GOverviewMapControl(Tsize));
        map.enableDoubleClickZoom();
        map.enableContinuousZoom();

        GDownloadUrl("/google-photo-map.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var thumb = markers[i].getAttribute("thumb");
            var kml = markers[i].getAttribute("kml");
            var desc = markers[i].getAttribute("desc");
            var cat = markers[i].getAttribute("cat");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type, thumb, kml, cat, desc);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, address, type, thumb, kml, cat, desc) {
      var marker = new GMarker(point, tinyIcon);
      var html = "<br/>" + "<table><tr>" + "<td width='100'>" + "<a href=" + type +">" + "<img src=" + thumb + ">" + "</a>" + "</td>" + "<td valign='top'>"+ "<b> <font color='black'>" + name + "</b> <br>" + "<a href=" + kml +">" + "Google Earth" + "</a>" +"<br>" +  "<a href=" + cat +">" + "zur Kategorie" + "</a></td></tr></table><table><tr><td><font color='black'>" + desc +"</td></tr></table>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>

Schritt 3:
erstelle in deinem template Verzeichnis die Datei google-photo-map.html mit folgendem Inhalt. Achte bitte darauf, dass Du die Codezeilen richtig einfügst und an dein DESIGN anpasst! Dieser Zeilen für das TEMPLATE dienen nur als ANHALT!!!!!! Ich nutze den MOD UNIVERSAL LAYOUT und dieser Einbau ist hier auch beschrieben!

Code: [Select]

{header}
<script src="http://maps.google.com/maps?file=api&v=2&key=DEIN GOOGLE API KEY"
 type="text/javascript"></script>
 
  <script type="text/javascript" src="js/gm.js"></script>
  <body onload="load()" onunload="GUnload()">
 
{ste_layout_top}
{ste_layout_left}
 
<table width="700px" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <div id="map" style="width: 700px; height: 700px"></div>
    </table>
   </td>
  </tr>
 </table>
{ste_layout_below}
{footer}

Schritt 4:
Nun kann das Template aufgerufen werden mit URL/google-photo-map.html oder mit URL/index.php?template=google-photo-map
Ich hoffe das es bei Euch funktioniert, denn bei mir klappt es. Die Beschreibung habe ich mit eingebunden, und dank Mawenzi's Lösung auf 100 Zeichen begrenzt.

Gruß
Ingo

kai · « **Reply #1 on:** April 25, 2008, 01:30:39 PM »

Quote from: rinaldos on April 25, 2008, 12:35:33 PM

Hier ist das DEMO.
http://rinaldos.homeip.net/google-photo-map-ny.html

Cool!

Thanks Rinaldos!

mawenzi · « **Reply #2 on:** April 25, 2008, 02:50:14 PM »

Hallo Ingo,
... das ging ja dann doch schneller als die Polizei erlaubt ... die Nacht war dann aber kurz ...

... deine Probleme mit den Browsern sind mir zwar immer noch nicht ganz klar bzw. wo die herstammen ...
... aber wenn deine Variante mit der Browserweiche nun so funktioniert, dann ist ja bestens ...
... willst du die Bild-Beschreibung noch in den Ballon einbinden und damit in der Länge beschränken ...
... so kannst du Folgendes verwenden ...

Code: [Select]

$max_length = 15; // Max. Anzahl der Zeichen in der Bildbeschreibung
$description_short = $description;
         if (strlen($description) > $max_length) {
            $description_short = substr($description, 0, $max_length)." ... ";
    }
...
$site_template->register_vars(array(
...
"image_description_short" => format_text( $description_short, $config['html_comments']),
...
));

... mit diesem Grundscript zur Erzeugung der eingebundenen xml-Dateien kann man ja nun alles Mögliche veranstalten ...

... z.B. Globale Google Photo Maps , Kategorie Google Photo Maps oder auch User Google Maps und noch einiges mehr ...

rinaldos · « **Reply #3 on:** April 25, 2008, 02:59:31 PM »

@Mawenzi,
danke für die Antwort, werde ich nachher mal versuchen umzusetzen. Derzeit habe ich auch noch diverse Probleme mit den Umlauten und Sonderzeichen, daher macht bei mir der IE6 ab und an die Grätsche

Kann aber vielelicht auch an meinen Webservereinstellungen liegen. habe eben gesehen, das ich mal UTF-8 nutze, dann UTF-15 und einmal sogar iso-8859-1. Muss diese auch mal alle auf einen Nenner bringen, vielleicht sind dann auch die Probleme mit meinen Umlauten weg....

Gruß
Ingo

rinaldos · « **Reply #4 on:** April 25, 2008, 03:32:37 PM »

Nun klappt es auch mit der Beschreibung. Als ich gerade die Antwort geschrieben hatte, da kam mir die Erleuchtung. Das XML File wird mit der falschen Kodierung erstellt. habe nun die Zeile in der php Datei wie folgt geändert

header("Content-type: text/xml ; charset=iso-8859-15");

Und schon klappt es auch mit dem IE6, also keine Browserweiche mehr nötig. Werde das Codeupdate und den überflüssigen Code oben rausnehmen!

Gruß
Ingo

P.S: Codeupdate wurde durchgeführt!

mawenzi · « **Reply #5 on:** April 25, 2008, 03:55:57 PM »

... teste mal Folgendes für die Kurzbeschreibung im Bereich <markers> ...

Code: [Select]

echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['image_name']) . '" ';
  echo 'address="' . parseToXML($row['image_']) . '" ';
  echo 'lat="' . $row['image_gmap_latitude'] . '" ';
  echo 'lng="' . $row['image_gmap_longitude'] . '" ';
  echo 'kml="' . "/data/kml/" . $row['image_id'] . ".kml" . '" ';
  $max_length = 15; // Max. Anzahl der Zeichen in der Bildbeschreibung
  $description = $row['image_description'];
  $description_short = $description;
         if (strlen($description) > $max_length) {
            $description_short = substr($description, 0, $max_length)." ... ";
         }
  echo 'desc="' . parseToXML($description_short) . '" ';
  echo 'type="' . "/details.php?image_id=" . $row['image_id'] . '" ';
  echo 'thumb="' . "/data/thumbnails/" . $row['cat_id'] . "/" . $row['image_media_file'] . '" ';
  echo 'cat="' . "/categories.php?cat_id=" . $row['cat_id'] . '" ';
  echo '/>';
}
// End XML file
echo '</markers>';

rinaldos · « **Reply #6 on:** April 25, 2008, 04:04:48 PM »

Wow, das ist ja einfach, da wäre ich nie drauf gekommen das ich es da einfügen müsste:-)

Es funktioniert! Danke Dir .......

Gruß
Ingo

Werden das Codeupdate direkt vornehmen!

ivan · « **Reply #7 on:** April 25, 2008, 04:48:07 PM »

hallo ingo,
bei mir werden nur xml daten beim aufruf von google-photo-map.php ausgegeben
wenn ich index.php?template=google-photo-map aufrufe, wird die karte gezeigt aber
keine marker drauf.

hier lief der code

Code: [Select]

<div id="map" style="width: 700; height: 700"></div>
nur mit

Code: [Select]

<div id="map" style="width: 700px; height: 700px"></div>
dies

Code: [Select]

$username="Nutzername";
$password="Passwort";
$database="4images";

könnte man direkt in die google-photo... integrieren

Code: [Select]

<?php

$username="root";
$password="";
$database="images";

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr);

man spart dann eine datei

rinaldos · « **Reply #8 on:** April 25, 2008, 04:52:17 PM »

@IVAN
ok, eine Datei weniger

Hätte ich auch drauf kommen können. Denn am besten ist, keep it simple. Das beim Aufruf der PHP nur XML Daten ausgegeben werden ist richtig. daher muss ja auch die html Datei aufgerufen werden.
Sehe ich das richtig, das es bei Dir auch funktioniert?
Gruß
Ingo

ivan · « **Reply #9 on:** April 25, 2008, 04:54:17 PM »

nein, es wird nur eine leere karte angezeigt (ohne marker)

ivan · « **Reply #10 on:** April 25, 2008, 05:07:14 PM »

vielleicht könnte man den abruf der db so lösen....
funktioniert bei mir auch

Code: [Select]

<?php
/**************************************************************************
 *                                                                        *
 *    4images - A Web Based Image Gallery Management System               *
 *    ----------------------------------------------------------------    *
 *                                                                        *
 *             File: google-photo-map.php                                 *
 *        Copyright: (C) 2008 Ingo		                                  *
 *            Email: jan@4homepages.de                                    *
 *              Web: http://www.4homepages.de                             *
 *    Scriptversion: 1.7.6                                                *
 *                                                                        *
 *    Never released without support from: Nicky (http://www.nicky.net)   *
 *                                                                        *
 **************************************************************************
 *                                                                        *
 *    Dieses Script ist KEINE Freeware. Bitte lesen Sie die Lizenz-       *
 *    bedingungen (Lizenz.txt) für weitere Informationen.                 *
 *    ---------------------------------------------------------------     *
 *    This script is NOT freeware! Please read the Copyright Notice       *
 *    (Licence.txt) for further information.                              *
 *                                                                        *
 *************************************************************************/

define('ROOT_PATH', './');
include(ROOT_PATH.'global.php');

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#38;#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr; 
} 

// Select all the rows in the markers table
$query = "SELECT * FROM (".IMAGES_TABLE.") WHERE `image_gmap_show` = 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

rinaldos · « **Reply #11 on:** April 25, 2008, 05:15:32 PM »

@IVAN
Checke doch bitte mal die Pfade, ob die bei Dir passen? In einem anderen MOD funktionierte es bei einigen nur, wenn sie die Pfade ein wenig abgeändert hatten. Aus "/" mussten die ein "./" machen oder mussten sogar den kompletten html Pfad "http://......" angeben. Kann sein das er das Javascript nicht findet.
Google Maps ist auch sehr empfindlich wenn "</div>" nicht richtig geschlossen ist.
Vielleicht hilft ja dieses hier um den Fehler besser zu finden:
https://addons.mozilla.org/en-US/firefox/addon/1843
http://code.google.com/support/bin/answer.py?answer=87133&topic=11364

@KAI oder ein anderer Admin

Der PHP-header klappt bei mir auch. Kann ich den so nun in mein PHP Code reinsetzen, da ja das dann so ausschaut als würde es offiziell unter 4homepages laufen?

Gruß
Ingo

ivan · « **Reply #12 on:** April 25, 2008, 05:26:00 PM »

hallo ingo,
versuche mal diese php dies

das problem lag am pfad... da oben ja der root pfad definiert ist, wird nun alles sauber aufgerufen..
inkl. datenbank

p.s vielleicht könnte uns kurt, mawenzi, nicky etc helfen den code zu optimieren...
ist echt eine toole sache....

z.b das wenn man in eine kategorie springt, dann nur eine kategorie angezeigt wird.

google-photo-map.php

Code: [Select]

<?php
/**************************************************************************
 *                                                                        *
 *    4images - A Web Based Image Gallery Management System               *
 *    ----------------------------------------------------------------    *
 *                                                                        *
 *             File: google-photo-map.php                                 *
 *        Copyright: (C) 2008 Ingo                                        *
 *            Email: jan@4homepages.de                                    *
 *              Web: http://www.4homepages.de                             *
 *    Scriptversion: 1.7.6                                                *
 *                                                                        *
 *    Never released without support from: Nicky (http://www.nicky.net)   *
 *                                                                        *
 **************************************************************************
 *                                                                        *
 *    Dieses Script ist KEINE Freeware. Bitte lesen Sie die Lizenz-       *
 *    bedingungen (Lizenz.txt) für weitere Informationen.                 *
 *    ---------------------------------------------------------------     *
 *    This script is NOT freeware! Please read the Copyright Notice       *
 *    (Licence.txt) for further information.                              *
 *                                                                        *
 *************************************************************************/

define('ROOT_PATH', './');
include(ROOT_PATH.'global.php');

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#38;#38;#38;#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr; 
} 

// Select all the rows in the markers table
$query = "SELECT * FROM (".IMAGES_TABLE.") WHERE `image_gmap_show` = 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml ; charset=iso-8859-15");

// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['image_name']) . '" ';
  echo 'address="' . parseToXML($row['image_']) . '" ';
  echo 'lat="' . $row['image_gmap_latitude'] . '" ';
  echo 'lng="' . $row['image_gmap_longitude'] . '" ';
  echo 'kml="' . "".ROOT_PATH."data/kml/" . $row['image_id'] . ".kml" . '" ';
  $max_length = 100; // Max. Anzahl der Zeichen in der Bildbeschreibung
  $description = $row['image_description'];
  $description_short = $description;
         if (strlen($description) > $max_length) {
            $description_short = substr($description, 0, $max_length)." ... ";
         }
  echo 'desc="' . parseToXML($description_short) . '" ';
  echo 'type="' . "".ROOT_PATH."details.php?image_id=" . $row['image_id'] . '" ';
  echo 'thumb="' . "".ROOT_PATH."data/thumbnails/" . $row['cat_id'] . "/" . $row['image_media_file'] . '" ';
  echo 'cat="' . "".ROOT_PATH."categories.php?cat_id=" . $row['cat_id'] . '" ';
  echo '/>';
}
// End XML file
echo '</markers>';
?>

rinaldos · « **Reply #13 on:** April 25, 2008, 05:33:51 PM »

@IVAN,
habe nun mal Deine PHP Datei genommen und sie funktioniert mit den Browsern Safari 3.1, Opera 9.2 (Mac) IE6 (Win) und FF 2.0.0.14 einwandfrei. Wenn du nichts dagegen hast werde ich die oben austauschen.
Gruß
Ingo

ivan · « **Reply #14 on:** April 25, 2008, 05:43:32 PM »

kein problem ingo...
es gäbte schon noch das eine oder andere wie z.b hoer

Code: [Select]

  echo 'type="' . "".ROOT_PATH."details.php?image_id=" . $row['image_id'] . '" ';
  echo 'thumb="' . "".ROOT_PATH."data/thumbnails/" . $row['cat_id'] . "/" . $row['image_media_file'] . '" ';
  echo 'cat="' . "".ROOT_PATH."categories.php?cat_id=" . $row['cat_id'] . '" '

vielleicht könne unsere forum freunde noch ein bisschen nachhelfen ;o)

gruss und erst einmal danke, ivan

4images Forum & Community

News:

Author Topic: [MOD]Google Photomap (Read 113725 times)

rinaldos

[MOD]Google Photomap

kai

Re: Google Photomap erstellen

mawenzi

Re: Google Photomap erstellen

rinaldos

Re: Google Photomap erstellen

rinaldos

Re: Google Photomap erstellen

mawenzi

Re: Google Photomap erstellen

rinaldos

Re: Google Photomap erstellen

ivan

Re: Google Photomap erstellen

rinaldos

Re: Google Photomap erstellen

ivan

Re: Google Photomap erstellen

ivan

Re: Google Photomap erstellen

rinaldos

Re: Google Photomap erstellen

ivan

Re: Google Photomap erstellen

rinaldos

Re: Google Photomap erstellen

ivan

Re: Google Photomap erstellen