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

0 Members and 1 Guest are viewing this topic.

rinaldos

  • Guest
[MOD]Google Photomap
« 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($description0$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
« Last Edit: July 31, 2009, 12:26:25 PM by rinaldos »

Offline kai

  • Administrator
  • Addicted member
  • *****
  • Posts: 1.421
    • View Profile
    • 4images - Image Gallery Management System
Re: Google Photomap erstellen
« Reply #1 on: April 25, 2008, 01:30:39 PM »
Your first three "must do" before you ask a question:
1. Forum rules
2. FAQ
3. Search

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Google Photomap erstellen
« 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 ...  :wink:
... z.B. Globale Google Photo Maps , Kategorie Google Photo Maps oder auch User Google Maps und noch einiges mehr ... 
« Last Edit: April 25, 2008, 06:03:45 PM by mawenzi »
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

rinaldos

  • Guest
Re: Google Photomap erstellen
« 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

  • Guest
Re: Google Photomap erstellen
« 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!

Offline mawenzi

  • Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Google Photomap erstellen
« 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>';
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

rinaldos

  • Guest
Re: Google Photomap erstellen
« 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!

rinaldos

  • Guest
Re: Google Photomap erstellen
« Reply #7 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

rinaldos

  • Guest
Re: Google Photomap erstellen
« Reply #8 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

rinaldos

  • Guest
Re: Google Photomap erstellen
« Reply #9 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

rinaldos

  • Guest
Re: Google Photomap erstellen
« Reply #10 on: April 25, 2008, 08:51:13 PM »
Nun fehlten noch die kml Dateien auf die hier im MOD verlinkt wird.
Erstellt im 4images data Verzeichnis das Verzeichnis kml. Es sollte dann so aussehen

/data
/data/media
/data/thumbnails
/data/kml

erstellt eine Datei "kml.php" im 4images plugin Verzeichnis (/admin/plugins/) und tragt Eure Webadresse in der Zeile $URL ein

Code: [Select]
<?php // PLUGIN_TITLE: Rebuild kml files
/**************************************************************************
 *                                                                        *
 *    4images - A Web Based Image Gallery Management System               *
 *    ----------------------------------------------------------------    *
 *                                                                        *
 *             File: kml.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.                              *
 *                                                                        *
 *************************************************************************/

$nozip 1;
define('IN_CP'1);
$root_path = (!eregi("\/plugins\/"$_SERVER['PHP_SELF'])) ? "./../" "./../../";
define('ROOT_PATH'$root_path);
require(
ROOT_PATH.'admin/admin_global.php');
include(
ROOT_PATH.'includes/search_utils.php');

$URL "HIER EURE WEBADRESSE EINTRAGEN";
// example: http://rinaldos.homeip.net without trailing slash

$query "SELECT * FROM (".IMAGES_TABLE.") WHERE `image_gmap_show` = 1";
$result mysql_query($query);
if (!
$result) {
  die(
'Invalid query: ' mysql_error());
}
$row $site_db->query_firstrow($sql);

while (
$row $site_db->fetch_array($result)) {
    echo 
"Processing image <b>".$row['image_name']."</b>, ID ".$row['image_id']." ...<br>";

$fp fopen("./../../data/kml/".$row['image_id'].".kml""w+");
 
$text1 "<?xml version='1.0' encoding='UTF-8'?>

<kml xmlns='http://earth.google.com/kml/2.1'>
<Document>
  <name>".$row['image_name']."</name>
  <open>1</open>
  <Style id='exampleBalloonStyle'>
    <BalloonStyle>
      <!-- a background color for the balloon -->
      <bgColor>ffffffbb</bgColor>
      <!-- styling of the balloon text -->
      <text><![CDATA[
      <b><font color='#CC0000' size='+3'>$[name]</font></b>
      <br/><br/>
      <font face='Courier'>".$row['image_description']."</font>
      <br/><br/>
      Suchw&ouml;rter:".$row['image_keywords']."
      <br/>
      Kategorie:<a href='$URL/categories.php?cat_id=".$row['cat_id']."'>".$row['cat_name']."</a>
      <br/><br/>
      <!-- insert the to/from hyperlinks -->
      <a href='$URL/details.php?image_id=".$row['image_id']."'><img src='$URL/data/thumbnails/".$row['cat_id']."/".$row['image_media_file']."'></a>
      ]]></text>
    </BalloonStyle>
  </Style>
  <Placemark>
    <name>".$row['image_name']."</name>
    <description>".$row['image_description']."</description>
    <styleUrl>#exampleBalloonStyle</styleUrl>
      <LookAt>
 <longitude>".$row['image_gmap_longitude']."</longitude>
 <latitude>".$row['image_gmap_latitude']."</latitude>
 <range>500.00</range>
 <tilt>0.00</tilt>
 <heading>0</heading>
 <visibility>1</visibility>
 </LookAt>
    <Point>
      <coordinates>".$row['image_gmap_longitude'].",".$row['image_gmap_latitude']."</coordinates>
    </Point>
  </Placemark>
</Document>
</kml>";
 fwrite($fp, $text1);
 fclose($fp);
    @set_time_limit(90);
}

?>

Nun kann man unter ACP/PLUGINS die fehlenden KML Dateien für Google Earth erstellen.
Viel Spass
Ingo

P.S. Checkt bei Fehlermeldungen erstmal die Pfadangaben

rinaldos

  • Guest
Re: Google Photomap erstellen
« Reply #11 on: April 25, 2008, 09:11:37 PM »
@IVAN :-)
gesagt getan, Schritt eins wurde entfernt und eben ein neuer Schritt eins hinzugefügt (Nur neu durchnummeriert) :-)

Danke Euch nochmal für die Hilfe......

Gruß
Ingo

Offline bacterio

  • Jr. Member
  • **
  • Posts: 82
    • View Profile
Re: Google Photomap erstellen
« Reply #12 on: April 29, 2008, 12:53:24 PM »
I installed:

galeria/google-photo-map.php
galeria/js/gm.js
galeria/templates/default/google-photo-map.html

Executive: www.misitio.com/galeria/google-photo-map.php  but it does not work ....

We need to install something else?

------------------------------------

Ich installiert:

galeria/google-photo-map.php
galeria/js/gm.js
galeria/templates/default/google-photo-map.html

Exekutive: www.misitio.com/galeria/google-photo-map.php aber es funktioniert nicht ....

Wir müssen etwas anderes installieren?

rinaldos

  • Guest
Re: Google Photomap erstellen
« Reply #13 on: April 29, 2008, 05:38:03 PM »
Hi,
you have to check the path. I have installed my 4images Galerie in the root path

example http://url/.... and you have installed in http://galeria/....
Now you have to change  in all files you have installed the path. In gm.js  to
 GDownloadUrl("/galeria/google-photo-map.php", function(data) {

in google-photo-map.html
  <script type="text/javascript" src="galeria/js/gm.js"></script>

I hope that's all. Your only Problem is the path :-)

Ingo


Offline Cornsnake30

  • Newbie
  • *
  • Posts: 13
    • View Profile
Re: Google Photomap erstellen
« Reply #14 on: May 05, 2008, 10:07:32 PM »
Leider bekomme ich keine Marker bei mir auf der Karte.

Ich habe auch schon alles von euch hier probiert aber die Marker bleiben fort.

Wie man hier sieht: http://www.stammtisch-plauderei.de/galerie/index.php?template=google-photo-map