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.0CODEUPDATE (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=65622Hier ist das DEMO.
http://rinaldos.homeip.net/google-photo-map-cgn-alt.htmlGetestet 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
<?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('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",'&#38;#38;#38;#39;',$xmlStr);
$xmlStr=str_replace("&",'&',$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
//<![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!
{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