Simple Google-Maps button (show photos on a map)

baerlichkeit · October 25, 2007, 04:54:36 PM

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.

Code Select

<?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&amp;v=2&amp;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-Information
Open your theme.php
If 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:

Code Select

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:

Code Select

//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:

Code Select

'{GPSLINK}' => $GPSLink,
Perhaps something like this is the result:

Code Select

$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 bar

Find

Code Select

$template_img_navbar = <<<EOT and add a new table-cell. The width depends on the image/text-size in the $GPSLink defined above.

Code Select

<td align="center" valign="middle" class="navmenu" width="131">
								{GPSLINK}
                </td>

.
I placed it next to the slideshow-button.

Code Select

$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. Javascript
open template.html and add the following code to the <head> of your html.

Code Select

<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

baerlichkeit · October 25, 2007, 09:01:29 PM

Ok,
here are some additional infos, I hope it's ok to answer and not to edit...

Geotagging

To get this "hack" working, you'll need pictures with location-data inside their EXIF. There are two ways to get images with these (well, perhaps there are some more):

1. You have some sort of GPS-data logger.
A device, capable of writing a tracklog. Then it's possible to "sync" your tracklog with your pictures taken during this time.
I use GPICsync, because this program can handle raw-files. GPICsync also exports your track to a google-earth file, if you wish.
IMPORTANT: make sure the clocks of your camera and your GPS-Device use the same timezone!

2. You have no GPS-device.
Than you have to assign your picture a location "by hand". That does not mean: "open your exif-editor and copy/past location variables from google"

You can use different programs to place the pictures on a map. (i tried two of them until now)

Robogeo: http://robogeo.com/home/ Shareware with many many options
Locr GPS Photo: http://www.locr.com/clients/downloads.php/ Drag 'n drop your images (jpg) onto the map

...
[/list]

Robogeo isn't for free, if you try it, the written gps-data will be wrong. Locr GPS is free an works (tried it a minute ago).
I attach a sample image and the fitting google-earth kml (rename the libelle.jpg.kml.txt to libelle.jpg.kml) to this post, so you have something to play with

Andreas

rubenix · October 26, 2007, 11:55:21 AM

Thank you baerlichkeit works fine for me I just neeed some kind of guide to use the locr GPS software pliz...

very nice contribution!

baerlichkeit · October 30, 2007, 02:38:02 PM

Uh,
forgot to answer

The Locr-Software is very easy to use.

1. Open it
2. drag and drop your photo from your computer/desktop/folder to the "Images" part of locr GPS Photo. Alternatively you can use the "add"-button
3. locate the position of the selected picture in the map and press the manual geotagging button

And, there is a help included with this software

have fun

baerlichkeit · November 12, 2007, 11:53:15 AM

Hello,
not really an update, but my theme works for me now (well, I'm still working on it

), and so you can see the button "in action" there.

For an example goto: KLICK and press the Globe-button labeled "Landkarte"

mfg Andreas

BorOl · November 15, 2007, 11:29:30 AM

Hi!
Thank you, baerlichkeit, for the great mod. I've modified it to use with Google Map in Coppermine Gallery ( http://forum.coppermine-gallery.net/index.php?topic=31206.0 ) mod, and I'm very happy with this. Thanks!

For those who want the same:
In theme.php I've REPLACED everything BETWEEN:

Code Select

//Read EXIF
(to clear things up you can change it to "read coordinates"

)
and

Code Select

if ($GPSLatitude != "" and $GPSLongtude != "") {
with the code reading coordinates from database:

Code Select

$query = "SELECT *
			FROM {$CONFIG['TABLE_PICTURES']}
			WHERE 
			pid = {$CURRENT_PIC_DATA['pid']}
			LIMIT 1;
			";
$result = cpg_db_query($query);

if($row = mysql_fetch_array($result))
{
    $CURRENT_PIC = $row; //send a copy to get_pic_url it messes with the vars
	$GPSLatitude = $row['latitude'];
	$GPSLongtude = $row['longitude'];
}

(Look out! There's a letter i missing in $GPSLongtude! It is used like this in baerlichkeit's code so I haven't changed it.

coppermine-gallery.com/forum

News:

Simple Google-Maps button (show photos on a map)

baerlichkeit

baerlichkeit

rubenix

baerlichkeit

baerlichkeit

BorOl