Hi,
I'm using coppermine for some time now and I'm actually building a theme, satisfying my needs... I learned a lot by reading this forum, so thank you all out there!
But, that's not what I wanted to share with you. I bought a
GPS-Data Logger and write the informations in my pictures EXIF-data... it was my goal to present visitors of my site these information, show them where a photo was taken.
There is this one huge google-maps plugin here, but this one is not using any EXIF-information afaik. I wanted a button/a link to the map, showing the pictures location... and if I'm not wrong, there is nothing like this here in this forum.
in a nutshell:
I placed a link to a new "map.php" in the image navigation bar, which opens the google-map with a marker on it in a new window. The geo-infos are passed to map.php via parameters.
For an example goto:
KLICK and press the Globe-button labeled "Landkarte"
Install:1. create a map.php in your gallery-folder.<?php
$latitude = $_GET["latitude"];
$longtude = $_GET["longtude"];
$image = $_GET["image"];
echo <<<EOT
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kartenansicht</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR GOOGLEMAPS KEY" type="text/javascript"></script>
<style type="text/css">
<!--
#map {
width:500px;
height:350px;
display:block;
}
-->
</style>
<script type="text/javascript">
//<![CDATA[
window.onload = function(){
load();
}
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.enableContinuousZoom();
map.enableDoubleClickZoom();
map.setCenter(new GLatLng({$latitude},{$longtude}), 13);
var center = map.getCenter();
var center_y = center.y
var center_x = center.x
GEvent.addListener(map, "mouseover", function(){
map.showControls();
});
GEvent.addListener(map, "mouseout", function(){
map.hideControls();
});
var infoTabs = [
new GInfoWindowTab("Standort"," <div style='text-align:center;'><img style='width:60px;vertical-align:middle;' src='{$image}'><\div>")
];
var marker = new GMarker(map.getCenter());
map.addOverlay(marker);
var windowOptions = {maxWidth: "95"};
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs,windowOptions);
});
}
}
//]]>
</script>
</head>
<body>
<center>
<div id="map"></div>
</center>
</body>
</html>
EOT;
?>IMPORTANT: you need your own Google-Api Key:
http://www.google.com/apis/maps/=> you have to replace "YOUR GOOGLEMAPS KEY" with the key, the map won't show up otherwise.
2. Read the Geo-InformationOpen your theme.phpIf you can't find
theme_html_img_nav_menu() or
$template_img_navbar in your theme.php, copy it from the
theme.php inside the sample-theme folder of your cpg installation.
AFAIK the cpg is not saving any Gps-information, please correct me, if I'm wrong. I found a code-snippet in a German forum:
klick and used it inside the theme.php.
IMPORTANT: I wanted a button/link placed in the image navigation bar, and I'm not very used to php, so adjust the code if you want the button to appear somewhere else...
So the following is for a link in the navigation bar:
Find:
function theme_html_img_nav_menu()
{
global $CONFIG, $CURRENT_PIC_DATA, $meta_nav, $THEME_DIR ; //$PHP_SELF,
global $album, $cat, $pos, $pic_count, $lang_img_nav_bar, $lang_text_dir, $template_img_navbar;And place the following code behind it:
//Read EXIF
$exif = exif_read_data(get_pic_url($CURRENT_PIC_DATA,'fullsize'), "IFD0");
$exif = exif_read_data(get_pic_url($CURRENT_PIC_DATA,'fullsize'),"",true,false);
$GPSLink = "";
foreach ($exif as $key => $section) {
foreach ($section as $name => $val) {
if ("$key.$name" == "GPS.GPSLongitude" )
{
$temp = explode("/", $val[0]);
$x = $temp[0] / $temp[1];
$temp2 = explode("/", $val[1]);
$y = $temp2[0] / $temp2[1];
$temp3 = explode("/", $val[2]);
$z = $temp3[0] / $temp3[1];
$GPSLongtude = ((($z / 60) + $y) /60) +$x;
}
if ("$key.$name" == "GPS.GPSLatitude" )
{
$temp = explode("/", $val[0]);
$x = $temp[0] / $temp[1];
$temp2 = explode("/", $val[1]);
$y = $temp2[0] / $temp2[1];
$temp3 = explode("/", $val[2]);
$z = $temp3[0] / $temp3[1];
$GPSLatitude = ((($z / 60) + $y) /60) +$x;
}
}
//If GPS-informations were found, create the link
}
if ($GPSLatitude != "" and $GPSLongtude != "") {
$imageurl=get_pic_url($CURRENT_PIC_DATA,'fullsize');
//create the link, edit title and img src.
$GPSLink = <<<EOT
<a href="map.php?longtude=$GPSLongtude&latitude=$GPSLatitude&image={$imageurl}" onclick="openMap(this.href); return false" title="Marker auf der Karte anzeigen"><img src="{$location}images/karte.png" border="0" align="middle"/></a>
EOT;
} Here, the EXIF is read, than searched for GPS-Information, and if some were found, a link to
map.php is generated. You
have to edit the link, to define your own image/text...
Find the params array inside
function theme_html_img_nav_menu() (before the closing bracket) and add a param for the template:
'{GPSLINK}' => $GPSLink,Perhaps something like this is the result:
$params = array('{THUMB_TGT}' => $thumb_tgt,
'{THUMB_TITLE}' => $lang_img_nav_bar['thumb_title'],
'{PIC_INFO_TITLE}' => $lang_img_nav_bar['pic_info_title'],
'{SLIDESHOW_TGT}' => $slideshow_tgt,
'{SLIDESHOW_TITLE}' => $lang_img_nav_bar['slideshow_title'],
'{PIC_POS}' => $pic_pos,
'{ECARD_TGT}' => $ecard_tgt,
'{ECARD_TITLE}' => $ecard_title,
'{PREV_TGT}' => $prev_tgt,
'{PREV_TITLE}' => $prev_title,
'{NEXT_TGT}' => $next_tgt,
'{NEXT_TITLE}' => $next_title,
'{PREV_IMAGE}' => ($lang_text_dir=='ltr') ? 'prev' : 'next',
'{NEXT_IMAGE}' => ($lang_text_dir=='ltr') ? 'next' : 'prev',
'{REPORT_TGT}' => $report_tgt,
'{REPORT_TITLE}' => $lang_img_nav_bar['report_title'],
'{LOCATION}' => $location,
'{GPSLINK}' => $GPSLink,
);3. Add the Link to the navigation barFind
$template_img_navbar = <<<EOT and add a new table-cell. The width depends on the image/text-size in the $GPSLink defined above.
<td align="center" valign="middle" class="navmenu" width="131">
{GPSLINK}
</td>.
I placed it next to the slideshow-button.
$template_img_navbar = <<<EOT
<tr>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}"><img src="{LOCATION}images/thumbnails.png" align="middle" border="0" alt="{THUMB_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="javascript:;" class="navmenu_pic" onclick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.png" border="0" align="middle" alt="{PIC_INFO_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{SLIDESHOW_TGT}" class="navmenu_pic" title="{SLIDESHOW_TITLE}"><img src="{LOCATION}images/slideshow.png" border="0" align="middle" alt="{SLIDESHOW_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="131">
{GPSLINK}
</td>
<td align="center" valign="middle" class="navmenu" width="100%">
{PIC_POS}
</td>4. Javascriptopen
template.html and add the following code to the <head> of your html.
<script type="text/javascript">
function openMap (Adresse) {
MeinFenster = window.open(Adresse, "Kartenansicht", "scrollbars=no,toolbar=no,status=no,resizable=no,width=500,height=350,left=100,top=200");
MeinFenster.focus();
}
</script>That's all... and i hope it works for you
This is the first time i share something like this, and i hope there are no errors in the code above. Better try this with a testserver
If you find anything wrong, tell me and I will correct it.
I hope someone can use it, because i love this geotagging-thing
Andreas
Author
Topic: Simple Google-Maps button (show photos on a map) (Read 32803 times)