[MOD] Google-Maps Integration V.01

[host]

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.html

2. Changed DB table
4images_images


Step 1

Add 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 2

Open /includes/db_field_definitions.php

Find:

Code:  [Select]  [Expand]  [Hide line numbers]

1

?>

Add ^before

Code:  [Select]  [Expand]  [Hide line numbers]

1 2 3 4 5 6 7 8

// >>>>>>>>>>>>>>>>>> [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 3

Open /lang/<your_language>/main.php

Find:

Code:  [Select]  [Expand]  [Hide line numbers]

1

?>

Add ^before

Code:  [Select]  [Expand]  [Hide line numbers]

1 2 3 4 5 6 7 8 9 10 11 12

// >>>>>>>>>>>>>>>>>> [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 4

Open /details.php

Find:

Code:  [Select]  [Expand]  [Hide line numbers]

1	unset($next_prev_cache);

Add _below

Code:  [Select]  [Expand]  [Hide line numbers]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

// >>>>>>>>>>>>>>>>>> [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>&nbsp;&nbsp;</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&amp;v=2&amp;hl=".$gmap_language."&amp;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:

Code:  [Select]  [Expand]  [Hide line numbers]

1	. "<script src=\"http://maps.google.com/maps?file=api&amp;v=2&amp;hl=".$gmap_language."&amp;key=ABCDEFGH....XYZ\" type=\"text/javascript\"></script> \n"

you have to replace

Code:  [Select]  [Expand]  [Hide line numbers]

1	ABCDEFGH....XYZ

with your key from google.

If you use more languages, you can add them here:

Code:  [Select]  [Expand]  [Hide line numbers]

1 2 3 4 5

if ($config['language_dir'] == "deutsch") {     $gmap_language = "de";   } else{     $gmap_language = "en";   }

Step 5

Open /templates/default/details.html

Find:

Code:  [Select]  [Expand]  [Hide line numbers]

1

{header}

Add _below

Code:  [Select]  [Expand]  [Hide line numbers]

1 2 3 4

{if gmap} {gmap_java} <body onload="load()" onunload="GUnload()"> {endif gmap}

and

Code:  [Select]  [Expand]  [Hide line numbers]

1 2 3 4 5

{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.


Usage

For 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 nothing

Cheers
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

[ivan]

hi holger,
vielen dank für die super integration in 4images.
ich habe mir das ganze mal installiert, bekomme aber bei der details seite nur
einen weissen inhalt dort wo die map sein sollte, es kommt auch keine fehlermeldung.

der key ist installiert, nach der anmeldung habe ich mit dem angezeigten html code
eine map aufrufen können.

wo könnte hier der fehler sein?

gruss ivan

[host]

hi holger,
vielen dank für die super integration in 4images.
ich habe mir das ganze mal installiert, bekomme aber bei der details seite nur
einen weissen inhalt dort wo die map sein sollte, es kommt auch keine fehlermeldung.

der key ist installiert, nach der anmeldung habe ich mit dem angezeigten html code
eine map aufrufen können.

wo könnte hier der fehler sein?

gruss ivan

Hi Ivan,

hast Du mal nen Link auf ein Bild wo das passiert?

Grüsse Holger

[ivan]

hi holger, ich glaube es hat sich mit einem mod geschnitten
nun dein mod läuft einwandfrei.

echt genial
nochmals danke!!

[host]

hi holger, ich glaube es hat sich mit einem mod geschnitten
nun dein mod läuft einwandfrei.

echt genial
nochmals danke!!

Dann ist ja gut - Danke für ausprobieren
Holger

[Loda]

hallo!
ich habe es eben für die version 1.7 getestet... und läuft!
vielen lieben dank, holger!!

[JensF]

Hat da jemand mal nen Link für mich? Würde mir das gerne mal anschauen...

Danke!!!

[host]

Hat da jemand mal nen Link für mich? Würde mir das gerne mal anschauen...

Danke!!!

z.B. hier   http://gallery.holger-stroeder.de/img241.htm
(nach unten scrollen und bei Google-Maps rechts "anzeigen" anklicken...)

Holger

[COMmander]

Hallo,

coool! 

Gibt's eine Möglichkeit, die Koordinaten direkt aus den EXIF-Daten zu beziehen (ein gecodetes Bild natürlich vorausgesetzt).

Mein Plan: wenn ein Bild angezeigt wird, bei dem die GPS-Daten integriert sind, dann soll die GoogleMap angezeigt werden - wenn keine diesbezüglichen Daten da sind, soll das Fenster wegbleiben.

Geht das was??

[mawenzi]

Geht das was??

... ich denke schon ... etwa wie hier ... (Exif-Photo-Google-Map) ...

[COMmander]

Hi mawenzi,

jaaa - Deine Lösung ist mir bekannt, wir hatten schon mal PN-Kontakt dazu.

Allerdings bietest Du Deinen MOD ja nur kostenpflichtig an und ich kann diesen Preis leider nicht bezahlen. 

Deswegen bin ich auf der Suche, wie ich Deine (geniale) Funktionalität irgendwie anderweitig hinbekomme - gern auch mit Mitarbeit daran.

Grüße
COMmander

[host]

Hallo,

coool! 

Gibt's eine Möglichkeit, die Koordinaten direkt aus den EXIF-Daten zu beziehen (ein gecodetes Bild natürlich vorausgesetzt).

Mein Plan: wenn ein Bild angezeigt wird, bei dem die GPS-Daten integriert sind, dann soll die GoogleMap angezeigt werden - wenn keine diesbezüglichen Daten da sind, soll das Fenster wegbleiben.

Geht das was??

Mit den EXIFs habe ich mich noch nicht beschäftigt... kann Dir also leider nicht weiterhelfen

Grüße
Holger

[COMmander]

Hi Holger,


Danke für Deine Antwort.

Schade - aber vielleicht findet sich ja jemand, der die auch schon bestehende EXIF-Funktionalität mit Deiner Google-Maps-Einblenung zusammenführen kann.

Mawenzi hat das Ganze ja schon am Laufen, aber leider nur kostenpflichtig.

Andere Galerien updaten schon auf ähnliche Funktionalitäten. Ich glaube, das wird ein killerfeature in nächster Zukunft und es wäre für 4images langsam an der Zeit...
Leider schaffe ich es selbst nicht. 


Grüße
COMmander

[Loda]

hallo!
vielleicht benutzt du mal die suchfunktion..
und gebe "exif" und "google" ein.. vielleicht findest du hier im forum ja etwas.. 

[COMmander]

hallo!
vielleicht benutzt du mal die suchfunktion..
und gebe "exif" und "google" ein.. vielleicht findest du hier im forum ja etwas.. 

Hey Loda,

sorry, aber diese ständigen Hinweise auf die Suchfunktion nerven gewaltig. Ich WEISS, dass es eine solche Funktion gibt.

Wenn Du mal Deinen Vorschlag ausprobiert hättest, würdest Du sehen, dass es eben keine adäquate Ergebnisse gibt.

Nix für ungut