A few words up-front...
This is my first MOD and I've just started with PHP - so... some of the coding could be much better, I'm sure.
Please feel free to correct anything 'stupid'
Most of the work is based on other webpages, where I found Google maps integrated - thanks to all (especially mawenzi!)
Please make a backup of your 4images installation - all changed files and the database
This MOD was written and tested with 4images V1.7.4
1. Changed files:/includes/
db_field_definitions.php/lang/
<your_language>/main.php/details.php/templates/default/
details.html2. Changed DB table4images_images
Step 1Add the following fields to the database table 4images_images
| image_gmap_longitude | varchar(20) |
| image_gmap_latitude | varchar(20) |
| image_gmap_zoom | char(2) |
| image_gmap_type | tinyint(1) |
| image_gmap_show | tinyint(1) |
Step 2Open
/includes/db_field_definitions.phpFind:
?>Add
before// >>>>>>>>>>>>>>>>>> [MOD] Google-Map >>>>>>>>>>>>>>>>>>
// Additional fields for Google-Maps:
$additional_image_fields['image_gmap_latitude'] = array($lang['image_gmap_latitude'], "text", 0);
$additional_image_fields['image_gmap_longitude'] = array($lang['image_gmap_longitude'], "text", 0);
$additional_image_fields['image_gmap_zoom'] = array($lang['image_gmap_zoom'], "text", 0);
$additional_image_fields['image_gmap_type'] = array($lang['image_gmap_type'], "text", 0);
$additional_image_fields['image_gmap_show'] = array($lang['image_gmap_show'], "radio", 1);
// <<<<<<<<<<<<<<<<<< [MOD] Google-Map <<<<<<<<<<<<<<<<<<
Step 3Open
/lang/<your_language>/main.phpFind:
?>Add
before// >>>>>>>>>>>>>>>>>> [MOD] Google-Map >>>>>>>>>>>>>>>>>>
//-----------------------------------------------------
//--- Google-Map---------------------------------------
//-----------------------------------------------------
$lang['image_gmap_longitude'] = "Longitude of the place (-180...+180)";
$lang['image_gmap_latitude'] = "Latitude of the place (-90...+90)";
$lang['image_gmap_zoom'] = "Zoom-level (1-20)";
$lang['image_gmap_type'] = "Type of Google Map <br /><span class=\"smalltext\">1: Map<br />2:Satellite<br />3:Hybrid</span>";
$lang['image_gmap_show'] = "Show Google Map?";
$lang['image_gmap_text1'] = "The picture";
$lang['image_gmap_text2'] = "was shot from here.";
// <<<<<<<<<<<<<<<<<< [MOD] Google-Map <<<<<<<<<<<<<<<<<<
Step 4Open
/details.phpFind:
unset($next_prev_cache);
Add
below// >>>>>>>>>>>>>>>>>> [MOD] Google-Map >>>>>>>>>>>>>>>>>>
$image_gmap_show = $image_row['image_gmap_show'];
if ($image_gmap_show == 1) {
$image_gmap_longitude = $image_row['image_gmap_longitude'];
$image_gmap_latitude = $image_row['image_gmap_latitude'];
$image_gmap_zoom = $image_row['image_gmap_zoom'];
$image_gmap_type = $image_row['image_gmap_type'];
$image_gmap_catid = $image_row['cat_id'];
$image_gmap_catname = $image_row['cat_name'];
$image_gmap_imgdate = $image_row['image_date'];
$image_gmap_thumb = $image_row['image_thumb_file'];
$image_gmap_thumb_file = get_file_path($image_gmap_thumb, "thumb", $image_gmap_catid, 0, 1);
$image_gmap_tab1 = "<table border='0' cellspacing='0' cellpadding='0'><tr><td><img src='"
.$image_gmap_thumb_file. "' border='1' width='100' height='75' alt='"
.$image_name. "' /></td><td> </td></td><td valign='top'>"
."<small>".$lang['image_gmap_text1']."<br><b>" .$image_name. "</b><br>".$lang['image_gmap_text2']
."</small><span style='font-size:8px;'><br><br><b>Lat:</b> "
.$image_gmap_latitude. "°<br><b>Lon:</b> ".$image_gmap_longitude."°</span>"
."</td></tr></table>";
if ($image_gmap_type == 1) {
$image_gmap_type2 = "G_NORMAL_MAP";
} elseif ($image_gmap_type == 2) {
$image_gmap_type2 = "G_SATELLITE_MAP";
} elseif ($image_gmap_type == 3) {
$image_gmap_type2 = "G_HYBRID_MAP";
}
if ($config['language_dir'] == "deutsch") {
$gmap_language = "de";
} else{
$gmap_language = "en";
}
$gmap = 1;
$gmap_java = "";
$gmap_java = "\n"
. "<script src=\"http://maps.google.com/maps?file=api&v=2&hl=".$gmap_language."&key=ABCDEFGH....XYZ\" type=\"text/javascript\"></script> \n"
. "<script type=\"text/javascript\"> \n"
. "\n"
. "//<![CDATA[ \n"
. "function load() { \n"
. " if (GBrowserIsCompatible()) { \n"
. " var map = new GMap2(document.getElementById(\"map\")); \n"
. " map.addControl(new GLargeMapControl()); \n"
. " map.addControl(new GMapTypeControl()); \n"
. " map.addControl(new GScaleControl()); \n"
. " map.addControl(new GOverviewMapControl()); \n"
. " map.setCenter(new GLatLng(" .$image_gmap_latitude. "," .$image_gmap_longitude. "), " .$image_gmap_zoom. ", " .$image_gmap_type2. "); \n"
. " var infoTabs = [ \n"
. " new GInfoWindowTab(\"Das Bild\", \"" .$image_gmap_tab1. "\") \n"
. " ]; \n"
. " var marker = new GMarker(map.getCenter()); \n"
. " GEvent.addListener(marker, \"click\", function() { \n"
. " marker.openInfoWindowTabsHtml(infoTabs); \n"
. " }); \n"
. " map.addOverlay(marker); \n"
. " marker.openInfoWindowTabsHtml(infoTabs); \n"
. " } \n"
. "} \n"
. "//]]> \n"
. "</script> \n";
$site_template->register_vars(array(
"gmap" => $gmap,
"gmap_java" => $gmap_java,
));
} else {
$gmap = 0;
$site_template->register_vars(array(
"gmap" => $gmap,
"gmap_java" => "",
));
}
unset($gmap_java);
// <<<<<<<<<<<<<<<<<< [MOD] Google-Map <<<<<<<<<<<<<<<<<<
in the line:
. "<script src=\"http://maps.google.com/maps?file=api&v=2&hl=".$gmap_language."&key=ABCDEFGH....XYZ\" type=\"text/javascript\"></script> \n"
you have to replace
ABCDEFGH....XYZ
with your key from google.
If you use more languages, you can add them here:
if ($config['language_dir'] == "deutsch") {
$gmap_language = "de";
} else{
$gmap_language = "en";
}
Step 5Open
/templates/default/details.htmlFind:
{header}
Add
below{if gmap}
{gmap_java}
<body onload="load()" onunload="GUnload()">
{endif gmap}
and
{if gmap}
<div align="center">
<div id="map" style="width: 600px; height: 400px"></div>
</div>
{endif gmap}
wherever you want to place the Google map o the page.
UsageFor every image you can now add the coordinates from google maps, the type of map and the zoom facor.
You can switch on/off this functionality with a radio button for every image.
Good luck - and hopefully I forgot nothingCheers
HoSt
Update (2007-02-12)Added language support for the maps
Useless coding in Step 4 ( setTimeout(...) ) removed
Update (2007-02-17)Small bug in details.php corrected (thx to ivan)
$image_gmap_thumb_file = get_file_path($image_gmap_thumb,
"thumb", $image_gmap_catid, 0, 1);
added installer, @Rembrandt
Show Posts
