Topics

1

Mods & Plugins (Releases & Support) / [MOD] Google-Maps Integration V.01

« on: February 11, 2007, 01:12:06 PM »

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]

?>
Add ^before

Code: [Select]

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

?>
Add ^before

Code: [Select]

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

unset($next_prev_cache);

Add _below

Code: [Select]

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

    . "<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]

ABCDEFGH....XYZ

with your key from google.

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

Code: [Select]

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


Step 5

Open /templates/default/details.html

Find:

Code: [Select]

{header}

Add _below

Code: [Select]

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

and

Code: [Select]

{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