Google Map in Coppermine Gallery, version 2 (of mod and api)

[Tranz]

This mod will generate a map using the Google Maps API to show the locations where photos are taken. This is not limited to photos, though. Google Earth mod here: http://forum.coppermine-gallery.net/index.php?topic=26939.0. For reference, version 1 of the mod is here.

Here's a demo on my site: Location Map

Google released a new version of the Maps API and I have upgraded my maps mod to take advantage of version 2's new features/functions. To decide if this is the mod for you, check out the list below. If you used version 1 of the mod, the list differentiates features from the 2 versions so you can decide if you want to upgrade or not.

Features
* Show thumbnail sidebar (configurable)
* Show coordinates of double-clicked point (configurable)
* Supports Internationalization
* Show small map in displayimage, editpics, and editOnepic (configurable)
* Infowindow (popup window) matches the gallery's theme
* Easy data entry of coordinates by double-clicking map
* Map respects access privileges
* Works with bridged galleries
* Change default map displayed (configurable)

Features new in v2 of the mod
* Support for tabbed infowindow, when there are multiple points with the same coordinates
* Valid XHTML 1.0 Transitional
* Easier to add a map to different pages with new map.inc.php file
* Show Permalink to map (configurable)
* Option to choose between using development or stable version of API code (configurable)
* Option to use overview map
* Show markers for individual files or for albums
* Drop down menu to select album to view file markers from specific album
* Ability to add coordinate info in upload.php form

changes from v1 to v2
* The master template plugin is now required in order to place the javascript code correctly within the Coppermine template
* The latitude and longitude fields have been changed from Decimal to Tinytext types within the mysql database
* Numbered flags no longer supported (it got complicated due to the grouping of items to support tabbed infowindows)
* Custom sort orders no longer supported (the tabbed infotab feature relies on files with the same coordinates being sorted together)

I will put the instructions in different posts to make it easier to follow along. Since releasing the first map mod, there have been many changes to the mod and maybe more to come. Please make sure to read the posts and the notes before proceeding.

For those of you upgrading from the previous version, I'm sorry there are no upgrade-specific instructions. You will need to start over quite a bit. Even the map file is different so you will have to almost start from scratch. However, I have tried to keep upgraders in mind while working on the instructions, particularly changes to the database. Also, I have consolidated the code as much as possible to minimize the amount of search and edits. Please go through the instructions before making the edits because you might not have to make them. If you need unmodified versions of core files, please download them from the Coppermine site. Don't worry, your coordinate data will not be lost in the upgrade.

Please make sure to backup files and database.

[Tranz]

Create a new file that will display the map and call it whatever you want. If you are upgrading, you don't have to create the new file. Just replace its contents with the following.

In that file, put in this code:

Code Select Expand

<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2005 Coppermine Dev Team
  v1.1 originaly written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  ********************************************
  Coppermine version: 1.4.6
  $Revision: 2.1 $
  $Author: TranzNDance $
  $Date: 2006/05/31 $
  
  ************************
    Mod: Coppermine files mapped on Google Maps
Demo: http://TakeThu.com Location Map
**********************************************/
define('IN_COPPERMINE', true);
define('GMAP_PHP', true);
define('DISPLAYIMAGE_PHP', true);
define('REGISTER_PHP', true);
define('SEARCH_PHP', true);

require('include/init.inc.php');

$album = $_GET['album'];
pageheader($lang_gmap_php['title']);

if ($CONFIG['enable_smilies']) include("include/smilies.inc.php");

$map_key = $CONFIG['gmap_api_key'];
$default_zoom_level = $CONFIG['gmap_default_zoom'];
$title = $lang_gmap_php['title'];
if ($CONFIG['gmap_display_item_list'] == 1) {
$show_sidebar = TRUE;
}
if ($CONFIG['gmap_override_avg_coord'] == 0 || $CONFIG['gmap_default_center'] == NULL) {
$center_avg_coords = TRUE;
}

//for the album drop down menu
//get the url and all vars except $theme
$cpgCurrentAlbum = $_SERVER["SCRIPT_NAME"]."?";
foreach ($_GET as $key => $value) {
    if ($key!="album"){$cpgCurrentAlbum .= $key . "=" . $value . "&amp;";}
}
$cpgCurrentAlbum.="album=";
if(count($FORBIDDEN_SET_DATA) > 0 ){
    $forbidden_set_string =" AND albums.aid NOT IN (".implode(",", $FORBIDDEN_SET_DATA).")";
} else {
    $forbidden_set_string = '';
}

// get list of available albums
$albums = implode(",",$album_array);

$filter = "aid IN (" . $albums . ")";
$query = "SELECT albums.*, pictures.*, albums.title AS title, COUNT(*) AS n
FROM {$CONFIG['TABLE_ALBUMS']} AS albums, {$CONFIG['TABLE_PICTURES']} AS pictures
WHERE 
pictures.aid = albums.aid 
AND ABS(pictures.latitude) + ABS(pictures.longitude) > 0
$query $forbidden_set_string
GROUP BY albums.aid
ORDER BY albums.title
;";

$result = cpg_db_query($query);

//start the output
switch ($parameter) {
   case 'table':
       $return = 'not yet implemented';
       break;
   default:
       $return.= $lineBreak . '<form name="cpgChooseAlbum" action="' . $_SERVER['PHP_SELF'] . '" method="get" style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;display:inline">' . $lineBreak;
       $return.= '<select name="cpgThemeSelect" class="listbox_lang" onchange="if (this.options[this.selectedIndex].value) window.location.href=\'' . $cpgCurrentAlbum . '\' + this.options[this.selectedIndex].value;">' . $lineBreak;
       $return.='<option selected="selected">' . $lang_main_menu['alb_list_lnk'] . '</option>';
$count = 0; 
while($row = mysql_fetch_array($result))
{
$aid = $row['aid'];
$album_title = addslashes($row['title']);
// title string: If there is no title, use the number
if (strlen($row['title']) > 0) {
$album_title = $row['title'];
} else {
$album_title = 'Album: ' . $aid;
}
$return.= '<option value="' . $aid . '">' . $album_title . ' (' . $row['n'] . ')' . ($value == $aid ? '*' : ''). '</option>' . $lineBreak;
$count = $count + $row['n'];
}
          if ($CONFIG['theme_reset'] == 1){
              $return.=  '<option value="*">' . $lang_gmap_php['all_albums'] . ' (' . $count . ')' . '</option>' . $lineBreak;
          }
          $return.=  '</select>' . $lineBreak;
          $return.=  '</form>' . $lineBreak;
   }

// code below borrowed from modifyalb.php to show albums under categories. But the categories don't show in this menu
/*function alb_list_box()
{
    global $CONFIG, $album, $cpg_udb;

    if (GALLERY_ADMIN_MODE) {
        $result = cpg_db_query("SELECT albums.*, pictures.*, albums.title AS title, COUNT(*) AS n
FROM {$CONFIG['TABLE_ALBUMS']} AS albums, {$CONFIG['TABLE_PICTURES']} AS pictures
WHERE category < '" . FIRST_USER_CAT . "' 
AND pictures.aid = albums.aid 
AND ABS(pictures.latitude) + ABS(pictures.longitude) > 0
$query $forbidden_set_string
GROUP BY albums.aid
ORDER BY albums.title

");
        $rowset = cpg_db_fetch_rowset($result);
        mysql_free_result($result);

$sql = $cpg_udb->get_admin_album_list();
        $result = cpg_db_query($sql);
        while ($row = mysql_fetch_array($result)) $rowset[] = $row;
        mysql_free_result($result);
    } else {
        $result = cpg_db_query("SELECT aid, title FROM {$CONFIG['TABLE_ALBUMS']} WHERE category = '" . (FIRST_USER_CAT + USER_ID) . "' ORDER BY title");
        $rowset = cpg_db_fetch_rowset($result);
        mysql_free_result($result);
    }

    if (count($rowset)) {
        $lb = "<select name=\"album_listbox\" class=\"listbox\" onChange=\"if(this.options[this.selectedIndex].value) window.location.href='{$_SERVER['PHP_SELF']}?album='+this.options[this.selectedIndex].value;\">\n";
        foreach ($rowset as $row) {
            $selected = ($row['aid'] == $album) ? "SELECTED" : "";
            $lb .= "        <option value=\"" . $row['aid'] . "\" $selected>" . $row['title'] . "</option>\n";
        }
        $lb .= "</select>\n";
        return $lb;
    }
}
$album_lb = alb_list_box();
echo $album_lb;*/
include('include/map.inc.php');
pagefooter(); 
?>

2006-05-31: (1) Added ability to show album markers view, so that files in the same albums are grouped together. If the album doesn't have its own coordinates*, it will use the average of the file coordinates in the album. (2) Added ability to filter the files shown, by numbered albums. Includes dropdown box to choose albums
* Due to my difficulty getting modifyalb.php to work, there are two ways to have album coordinates. One is to assign coordinates to the files in the album, so the album will use the average coordinates. This can get silly if the files have very disparate coordinates. The other is to edit the albums table, using something like phpmyadmin. I am hoping to get this fixed.

[Tranz]

Create a new file called map.inc.php in the include folder. Put the following code:

Code Select Expand

<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2005 Coppermine Dev Team
  v1.1 originaly written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  ********************************************
  Coppermine version: 1.4.10
  $Mod Revision: 2.5 $
  $Author: TranzNDance $
  $Date: 2006/12/29 $
  
  ************************
    Mod: Coppermine files mapped on Google Maps
Demo: http://TakeThu.com Location Map
**********************************************/
if (!defined('IN_COPPERMINE')) { die('Not in Coppermine...');}

//Override the global setting if a theme has the define not to show the sidebar
if (defined('THEME_NO_GMAP_SIDEBAR')) {
$show_sidebar = FALSE;
}

/* This is commented out for the time being. If IE acts up again, I will use this.
$browser = $_SERVER["HTTP_USER_AGENT"];

if(eregi("MSIE",$browser)) {
$message = 'The developer of the Google Maps mod for Coppermine Photo Gallery got fed up spending extra time and effort so that cr@ppy IE can show the mashup. Please use another browser if you want to view the map of this gallery\'s photos. Firefox is recommended. If you can fix the issue <a href="http://groups.google.com/group/Google-Maps-API/browse_thread/thread/whatever">here</a>, please post a reply in that thread.';
msg_box('IE must die', $message, $lang_continue, $ref);
} else {
*/

$map_key = $CONFIG['gmap_api_key'];
$use_dev_version = $CONFIG['gmap_version'];
// if version config is set not to use development version, use 2 (current stable), otherwise, use 2.x (latest development)
if ($use_dev_version == 1) {
$version = '2.x';
} else {
$version = '2';
}

$view = isset($_GET['view']) ? $_GET['view'] : 'no view';

$default_zoom_level = $CONFIG['gmap_default_zoom'];

if ($CONFIG['gmap_display_overview_map'] == 1) {
$overview_map_size = $CONFIG['gmap_overview_map_size'];
$overview_map_size_array = explode(',',$overview_map_size);
$overview_map_width = $overview_map_size_array[0];
$overview_map .= 'gmap.addControl(new GOverviewMapControl(new GSize(' . $overview_map_size . ')));'. "\n";
$overview_map .= 'var CopyrightDiv = mapDiv.firstChild.nextSibling;'. "\n";
$overview_map .= 'CopyrightDiv.style.right = "' . $overview_map_width . 'px";'. "\n"; 

} else {
$overview_map = '';
}

$sum_latitude = array();
$sum_longitude = array();

$query=implode(' AND',$query);

if(count($FORBIDDEN_SET_DATA) > 0 ){
    $forbidden_set_string =" AND albums.aid NOT IN (".implode(",", $FORBIDDEN_SET_DATA).")";
} else {
    $forbidden_set_string = '';
}

//ordered by latitude so that the files are listed from north to south, in a way

if ($view == 'albums') {
 $view_param = '&view=albums';

$order = "ORDER BY albums.latitude DESC,albums.longitude";
$query = "SELECT avg(pictures.latitude) AS avg_latitude, avg(pictures.longitude) AS avg_longitude, albums.latitude AS album_latitude, albums.longitude AS album_longitude, pictures.*, albums.*, pictures.title AS pic_title, albums.thumb AS album_thumb, albums.description AS album_description
FROM {$CONFIG['TABLE_PICTURES']} AS pictures, {$CONFIG['TABLE_ALBUMS']} AS albums
WHERE pictures.aid = albums.aid 
AND ABS(pictures.latitude) + ABS(pictures.longitude) > 0
$query $forbidden_set_string
$query $album_set_string
GROUP by pictures.aid
$order;
";

} else {
if(is_numeric($album)) {
$album_filter = "AND albums.aid = " . $album;
$center_avg_coords = TRUE;
} else {
switch($album) {
        case 'lastcom': // Last comments
$addFrom = ',' . "{$CONFIG['TABLE_COMMENTS']}";
$album_filter = "AND {$CONFIG['TABLE_COMMENTS']}.pid = pictures.pid";
break;
case 'lastcomby': // Last comments by a specific user
if (isset($_GET['uid'])) {
                        $uid = (int)$_GET['uid'];
} else {
$uid = -1;
}
$addFrom = ',' . "{$CONFIG['TABLE_COMMENTS']}";
$album_filter = "AND author_id = " . $uid ." AND {$CONFIG['TABLE_COMMENTS']}.pid = pictures.pid";
break;
case 'lastupby': // Last uploads by a specific user
if (isset($_GET['uid'])) {
$uid = (int)$_GET['uid'];
} else {
$uid = -1;
}
$addFrom = ',' . "{$CONFIG['TABLE_COMMENTS']}";
$album_filter = "AND owner_id = " . $uid;
break;
case 'topn': // Most viewed pictures
$album_filter = "AND hits > 0";
break;
case 'toprated': // Top rated pictures
$album_filter = "AND pictures.votes >= '{$CONFIG['min_votes_for_rating']}'";
break;
        case 'favpics': // Favourite Pictures.
if (count($FAVPICS)>0){
                        $favs = implode(",",$FAVPICS);
$album_filter = "AND pictures.pid IN (" . $favs . ")";
}
break;


}
}
$order = "ORDER BY pictures.latitude DESC,pictures.longitude";

$query = "SELECT pictures.*, albums.*, pictures.title AS pic_title, pictures.latitude AS pic_latitude, pictures.longitude AS pic_longitude
FROM {$CONFIG['TABLE_PICTURES']} AS pictures, {$CONFIG['TABLE_ALBUMS']} AS albums
$addFrom
WHERE approved = 'YES'
AND pictures.aid = albums.aid 
AND ABS(pictures.latitude) + ABS(pictures.longitude) > 0
$album_filter
$query $forbidden_set_string
$query $album_set_string
$order
$limit
;";
}
$result = cpg_db_query($query);

if (mysql_num_rows($result) > 0) {
while($row = mysql_fetch_array($result))
{
$album_thumb = $row['album_thumb'];
$album_thumb_url = get_pic_url($album_thumb, 'thumb');
    $CURRENT_PIC_DATA = $row; //send a copy to get_pic_url it messes with the vars
    $thumb_link = $CONFIG['ecards_more_pic_target'].'displayimage.php?pos='.(-$row['pid']);
$thumb_url = get_pic_url($CURRENT_PIC_DATA, 'thumb');
$thumb_caption = bb_decode($row['caption'], $CONFIG['ecards_more_pic_target']);
$thumb_caption = addslashes(str_replace(array("\r\n","\r","\n"), "<br />", $thumb_caption));
if ($CONFIG['enable_smilies']) {
$thumb_caption = process_smilies($thumb_caption);
$album_caption = process_smilies(addslashes(str_replace(array("\r\n","\r","\n"), "<br />", strip_tags(bb_decode($row['album_description'], $CONFIG['ecards_more_pic_target'])))));
} else {
$thumb_caption = $thumb_caption;
$album_caption = addslashes(str_replace(array("\r\n","\r","\n"), "<br />", strip_tags(bb_decode($row['album_description'], $CONFIG['ecards_more_pic_target']))));
}
$album_title = addslashes($row['title']);
$album_link = $CONFIG['ecards_more_pic_target'].'thumbnails.php?album='.($row['aid']);
$album_link_title = sprintf($lang_gmap_php['view_album'], $album_title);
$owner_name = addslashes($row['owner_name']);
$owner_link = $CONFIG['ecards_more_pic_target'].'profile.php?uid='.($row['owner_id']);
$profile_link_title = sprintf($lang_gmap_php['view_profile'], $owner_name);
$permalink_link_title = $lang_gmap_php['map_permalink'];
$tab_max_char = $CONFIG['gmap_tab_max_char'];
// title string: If there is no title, use the filename
if (strlen($row['pic_title']) > 0) {
$thumb_title = $row['pic_title'];
} else {
$thumb_title = $row['filename'];
}


if ($view == 'albums') {
if (strlen($row['album_latitude']) == 0) {
$latitude = $row['avg_latitude'];
$longitude = $row['avg_longitude'];
} else {
$latitude = $row['album_latitude'];
$longitude = $row['album_longitude'];

}
array_push ($sum_latitude,$latitude);
array_push ($sum_longitude,$longitude);
$details = addslashes($lang_picinfo['Album name']) . ': <a href="' . $album_link . '" title="' . $album_link_title . '">' . $album_title . "</a><br/><br/>" .  $album_caption;
if (strlen($album_title) > $tab_max_char) {
$tab_title = substr($album_title, 0, $tab_max_char) . '...';
} else {
$tab_title = $album_title;
}

} else {
$latitude = $row['pic_latitude'];
$longitude = $row['pic_longitude'];

array_push ($sum_latitude,$latitude);
array_push ($sum_longitude,$longitude);
$details = "<a href=\"" . $thumb_link . '"><img src="' . $CONFIG['ecards_more_pic_target'].$thumb_url . '" class="image";></a><br/><b>' . $thumb_title . '</b><br/>' . $thumb_caption . '<br/><br/>' . addslashes($lang_picinfo['Album name']) . ': <a href="' . $album_link . '" title="' . $album_link_title . '">' . $album_title . "</a></i><br/>" .
$lang_adv_opts['owner_name'] . ': <a href="' . $owner_link . '" title="' . $profile_link_title . '">' . $owner_name . '</a>';
//generate code for the points
if (strlen($thumb_title) > $tab_max_char) {
$tab_title = substr($thumb_title, 0, $tab_max_char) . '...';
} else {
$tab_title = $thumb_title;
}
}

$point_code .= 'AddTab(' . $latitude . ',' . $longitude . ',"' . $tab_title . '",'
            . "TabContent('<div class=\"tableb_compact infowindow\" >" . $details . '</div>\'),' . "'<img src=\"" . $CONFIG['ecards_more_pic_target'].$thumb_url . '" border="0";><br/>\'' . ', gmap);' . "\n";
} //end while

$avg_latitude = array_sum($sum_latitude) / sizeof($sum_latitude);
$avg_longitude = array_sum($sum_longitude) / sizeof($sum_longitude);

// by default, the center coordinate is the average value of latitude and longitude
if ($center_avg_coords) {
$default_center_coords = $avg_latitude . ',' . $avg_longitude;
} else { //it can be overridden with a manual entry in Config
$def_coordinates = explode(',',$CONFIG['gmap_default_center']);
$default_center_coords = $def_coordinates[0] . ',' . $def_coordinates[1];
}

$default_center_coord = isset($_GET['ll']) ? $_GET['ll'] : $default_center_coords;
$zoom_level = isset($_GET['z']) ? $_GET['z'] : $default_zoom_level;

if($album){
 $album_param = '&album=' . $album;
}

if ($CONFIG['gmap_display_permalink'] == 1) {
$message = <<<EOT
var zoom = gmap.getZoom();
document.getElementById("message").innerHTML = 
' | <a href="{$CONFIG['gmap_filename']}?ll=' + latLngStr + '&z=' + zoom + '{$album_param}{$view_param}">{$permalink_link_title}</a>&nbsp; | ' + latLngStr;
EOT;
} else {
$message = <<<EOT
document.getElementById("message").innerHTML = ' | ' + latLngStr;
EOT;
}

mysql_close($link);

if ($CONFIG['gmap_display_coordinates'] == 1) {
//This is where the "message" goes. In this case, the message will be the coordinates of a point that is double-clicked on the map   
$coord_info = '<span id="message"></span>';
}
if ($PHP_SELF != 'thumbnails.php') {
if ($view != 'albums') {
$view_link = $lang_gmap_php['view_markers'] . ': ' . $lang_cat_list['pictures'] . ' | <a href="?view=albums">'. $lang_cat_list['albums'] . '</a>';
$nav_info = $return . ' [' . $view_link . '] ' . $coord_info;
} else {
$view_link = $lang_gmap_php['view_markers'] . ': <a href="' . $PHP_SELF . '">'. $lang_cat_list['pictures'] . '</a> | ' . $lang_cat_list['albums'];
$nav_info = '[' . $view_link . '] ' . $coord_info;
}
}
if ($show_sidebar) {
starttable('100%', $title,2); //two columns if there is a sidebar
echo <<<EOT
<tr><td colspan="2">$nav_info</td></tr>
EOT;
} else {
starttable('100%', $title);
echo <<<EOT
<tr><td align="center">$nav_info</td></tr>
EOT;
}
?>
<tr>
<td valign="top" align="center">
<noscript>
<?php echo $lang_gmap_php['no_javascript'] ?>
</noscript>

<!-- This is where the map goes -->   
<div id="gmap"></div>
</td>
<?php
if ($show_sidebar) {
//Based on Config setting, this displays a list of available items
echo <<<EOT
<td valign="top" width="{$CONFIG['gmap_sidebar_width']}">
<div id="gmap_sidebar" class="thumbnails"></div>
</td>
EOT;
}
echo '</tr>';
endtable();


$gmap_code =  <<<EOT
<script src="http://maps.google.com/maps?file=api&amp;v=$version&amp;key=$map_key" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
// Create two global variables, this makes things simpler.
lastmarker = null;
lastpoint = null;

function ShowContent() {
}

function TabContent(details) {
  return (details);
}

function AddTab(lat, lng, label, content, name, gmap) {
  
  if (lastpoint != null &&
      lastpoint.lat() == lat &&
      lastpoint.lng() == lng) {
    // Add a tab to the last marker since this new point is for the same
    // location
    lastmarker.tabs.push(new GInfoWindowTab(label, content));
  } else {
    lastpoint = new GLatLng(lat, lng);
    lastmarker = new GMarker(lastpoint);
    lastmarker.tabs = [];
    lastmarker.tabs.push(new GInfoWindowTab(label, content));
    GEvent.addListener(lastmarker, "click", function () {
if (this.tabs.length > 2) {
  this.tabs[0].contentElem.innerHTML = '<div style="width:'+this.tabs.length*88+'px">' + this.tabs[0].contentElem.innerHTML + '</div>';

} 
      var opts = new Object;
  this.openInfoWindowTabsHtml(this.tabs, opts);
    });
    gmap.addOverlay(lastmarker);
  }
  
  var sidebar = document.getElementById("gmap_sidebar");
  if (sidebar != null) {
   var tabblocks = sidebar.getElementsByTagName("div");
    var curblock = null;
if (tabblocks.length == 0 || lastmarker.tabs.length == 1) {
var separator = document.createElement("hr");
sidebar.appendChild(separator);
curblock = document.createElement("div");
curblock.setAttribute("class", "sidebar_group");
sidebar.appendChild(curblock);
} else {
   curblock = tabblocks[tabblocks.length - 1];
}
var thumb = document.createElement("a");
thumb.setAttribute("href", "javascript:ShowContent()");
thumb.innerHTML = name;
thumb.marker = lastmarker;
    thumb.tabs = [];
thumb.tab = lastmarker.tabs.length - 1;
GEvent.addDomListener(thumb, "click", function () {
if (this.marker.tabs.length > 2) {
  this.marker.tabs[0].contentElem = '<div style="width:'+this.marker.tabs.length*88+'px">' + this.marker.tabs[0].contentElem + '</div>';
} 

var opts = new Object;
opts.selectedTab = this.tab;
this.marker.openInfoWindowTabsHtml(this.marker.tabs, opts);
});
curblock.appendChild(thumb);
  }
}

  if (GBrowserIsCompatible()) {

    // Create a base icon for all of our markers that specifies the
    // shadow, icon dimensions, etc.
    var baseIcon = new GIcon();
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GLatLng(9, 34);
    baseIcon.infoWindowAnchor = new GLatLng(9, 2);
    baseIcon.infoShadowAnchor = new GLatLng(18, 25);

    //create the map, this is stored in a global variable for easy access
    var gmap = new GMap2(document.getElementById("gmap"));
var mapDiv = document.getElementById('gmap'); 
gmap.setCenter(new GLatLng({$default_center_coord}), {$zoom_level}, {$CONFIG['gmap_type']});
    gmap.addControl(new GLargeMapControl());
    gmap.addControl(new GMapTypeControl());
{$overview_map}
GEvent.addListener(gmap, "moveend", function() {
var center = gmap.getCenter();
var latLngStr = center.y + ',' + center.x;
{$message}
});
//add the points
{$point_code}
  } else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  }
//]]>
</script>
EOT;
}//end if
//} end browser check
?>

2006-05-27: edited so that the terms of use link is not blocked by the overview map. Works for the current 2.x and 2 versions of the api on this date.
2006-05-28: edited the above so that the code doesn't show if infowindow isn't configured to show.
2006-05-31: (1) Added ability to show album markers view, so that files in the same albums are grouped together. If the album doesn't have its own coordinates*, it will use the average of the file coordinates in the album. (2) Added ability to filter the files shown, by numbered albums. Includes dropdown box to choose albums when not in thumbnails.php. (3) Permalink and coordinates, when enabled, will show up next to the album drop down menu, above the map, instead of below.
* Due to my difficulty getting modifyalb.php to work, there are two ways to have album coordinates. One is to assign coordinates to the files in the album, so the album will use the average coordinates. This can get silly if the files have very disparate coordinates. The other is to edit the albums table, using something like phpmyadmin. I am hoping to get this fixed.
2006-06-01: Edited to make the table size dynamic, rather than fixed in css attribute width. Also, the link to switch between file and album view will show the text of the active version and a link to the other.
2006-08-08: Edited code to fix marker not working when there were more than two tabs in an infowindow.
2006-08-24: Put back block of code that got lost... probably from the last fix. Sorry!
2006-09-22:Added ability to add theme override in showing the sidebar. So you can set a global setting to display the sidebar and then modify individual themes to not display. This is useful for those narrow themes. Get the new copy of map.inc.php above, and add the following line to your theme's theme.php

Code Select Expand

define('THEME_NO_GMAP_SIDEBAR', 1);

2006-12-29: Updated to fix bb_decode support.

[Tranz]

Let's modify the database. If you are upgrading, replace the old gmap stuff with the following.

In sql/update.sql
ADD the following:

Code Select Expand

# Google Maps
INSERT INTO CPG_config VALUES ('gmap_api_key', '');
INSERT INTO CPG_config VALUES ('gmap_default_zoom', '8');
INSERT INTO CPG_config VALUES ('gmap_override_avg_coord', '0');
INSERT INTO CPG_config VALUES ('gmap_default_center', '');
INSERT INTO CPG_config VALUES ('gmap_display_coordinates', '1');
INSERT INTO CPG_config VALUES ('gmap_display_item_list', '1');
INSERT INTO CPG_config VALUES ('gmap_displayimage_map', '0');
INSERT INTO CPG_config VALUES ('gmap_editOnePic_map', '1');
INSERT INTO CPG_config VALUES ('gmap_editpics_map', '0');
INSERT INTO CPG_config VALUES ('gmap_type', 'G_MAP_TYPE');
INSERT INTO CPG_config VALUES ('gmap_small_type', 'G_MAP_TYPE');
INSERT INTO CPG_config VALUES ('gmap_icon', '208');
INSERT INTO CPG_config VALUES ('gmap_tab_max_char', '6');
INSERT INTO CPG_config VALUES ('gmap_display_permalink', '1');
INSERT INTO CPG_config VALUES ('disallowed_email_domains', '');
INSERT INTO CPG_config VALUES ('gmap_filename', '');
ALTER TABLE CPG_pictures ADD latitude DECIMAL(18,14) NULL;
ALTER TABLE CPG_pictures ADD longitude DECIMAL(18,14) NULL;
ALTER TABLE CPG_pictures ADD latitude TINYTEXT;
ALTER TABLE CPG_pictures ADD longitude TINYTEXT;
ALTER TABLE CPG_pictures CHANGE `latitude` `latitude` TINYTEXT DEFAULT NULL , CHANGE `longitude` `longitude` TINYTEXT DEFAULT NULL;
INSERT INTO CPG_config VALUES ('gmap_version', '0');
INSERT INTO CPG_config VALUES ('gmap_display_overview_map', '1');
INSERT INTO CPG_config VALUES ('gmap_overview_map_size', '100,100');
ALTER TABLE CPG_albums ADD latitude TINYTEXT;
ALTER TABLE CPG_albums ADD longitude TINYTEXT;
INSERT INTO CPG_config VALUES ('gmap_sidebar_width', '25%');


In your browser, run update.php so it will run the new mysql queries in update.sql.
2006-05-31: Added coordinates fields to album table.
2006-06-01: Added gmap sidebar width configuration. Only works with a percentage value. Pixel values throw IE and Opera into a tizzy.

[Tranz]

Open lang/english.php (or whatever language you want to use). If you are upgrading, replace the old gmap stuff with the following.

FIND:

Code Select Expand

?>

BEFORE it, ADD:

Code Select Expand

// ------------------------------------------------------------------------- //
// Google Maps API
// ------------------------------------------------------------------------- //

if (defined('GMAP_PHP')) {
$lang_gmap_php = array(
'title' => 'Gallery Map', //Google Maps API
'no_javascript' => '<b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.', //Google Maps API
'credit_tutorial' => 'This was made possible thanks to a tutorial on how to generate
<a href="http://www.map-server.com/googlemaps/tutorial.html" target="_blank">Google Maps via PHP/Mysql</a>', //Google Maps API
'latitude' => 'Latitude', //Google Maps API
'longitude' => 'Longitude', //Google Maps API
'coordinates' => 'Coordinates', //Google Maps API
'map_permalink' => 'Permalink to map', //Google Maps API
'coord_instructions' => 'the coordinates will automatically appear in the Coordinates field when you double-click on the map', //Google Maps API
'all_albums' => 'All Albums', //Google Maps API
'view_markers' => 'View Markers for', //Google Maps API
);
}

2006-05-31: Added text to support new album-related filtering features.
2006-06-01: Revised the text for the link that switched between showing files and album markers.

Edit include/langfallback.inc.php. If you already added this for the v1 mod, you can skip this.

FIND:

Code Select Expand

?>

BEFORE it, ADD:

Code Select Expand

// ------------------------------------------------------------------------- //
// Google Map text
// ------------------------------------------------------------------------- //

if (defined('GMAP_PHP')) {
  $lang_gmap_php_en = cpg_get_default_lang_var('lang_gmap_php','english');
  $lang_gmap_php = array_merge($lang_gmap_php_en, $lang_gmap_php);
}



We'll want to be able to modify some settings in Config.

Also, in the language file:

FIND:

Code Select Expand

  array('Gallery is offline', 'offline', 1, 'f=index.htm&as=admin_general_offline&ae=admin_general_offline_end'), //cpg1.4


AFTER it, ADD:

Code Select Expand

  'Google Maps API settings', //cpg1.4
  array('API key', 'gmap_api_key', 0), //Google Maps API
  array('Name of map file', 'gmap_filename', 0), //Google Maps API
  array('Default zoom level', 'gmap_default_zoom', 0), //Google Maps API
  array('For default center, override average coordinates with manual setting', 'gmap_override_avg_coord', 1), //Google Maps API
  array('Default center (format: latitude,longitude)', 'gmap_default_center', 0), //Google Maps API
  array('Display coordinates when double-click on map', 'gmap_display_coordinates', 1), //Google Maps API
  array('Display permalink with coordinates', 'gmap_display_permalink', 1), //Google Maps API
  array('Display sidebar (list of map items)', 'gmap_display_item_list', 1), //Google Maps API
  array('Width of the sidebar (% only or things go wacky in IE and O)', 'gmap_sidebar_width', 0), //Google Maps API
  array('Display map for individual files in displayimage', 'gmap_displayimage_map', 1), //Google Maps API
  array('Display map in editOnePic', 'gmap_editOnePic_map', 1), //Google Maps API
  array('Display map in editpics', 'gmap_editpics_map', 1), //Google Maps API
  array('Default type for large map','gmap_type', 50), //Google Maps API
  array('Default type for small map','gmap_small_type', 50), //Google Maps API
  array('Max number of characters in tab title', 'gmap_tab_max_char', 0), //Google Maps API
  array('Use the latest development version instead of current stable one?', 'gmap_version', 1), //Google Maps API
  array('Display overview map', 'gmap_display_overview_map', 1), //Google Maps API
  array('Overview map size (width, height)', 'gmap_overview_map_size', 0), //Google Maps API
  //array('Icon','gmap_icon', 51), //Google Maps API

2006-06-01: Added gmap sidebar width configuration. Only works with a percentage value. Pixel values throw IE and Opera into a tizzy.


edit admin.php

FIND:

Code Select Expand

function create_form(&$data)

BEFORE it, ADD:

Code Select Expand


function form_gmap_type($text, $name)
{
    global $CONFIG;
    $value = $CONFIG[$name];
    $normal_selected = ($value == 'G_NORMAL_MAP') ? 'selected="selected"' : '';
    $satellite_selected = ($value == 'G_SATELLITE_MAP') ? 'selected="selected"' : '';
    $hybrid_selected = ($value == 'G_HYBRID_MAP') ? 'selected="selected"' : '';

    echo <<<EOT
        <tr>
            <td class="tableb" width="60%">
                $text
            </td>
            <td class="tableb" valign="top" width="50%">
                <select name="$name" class="listbox">
                    <option value="G_NORMAL_MAP" $normal_selected>Normal</option>
                    <option value="G_SATELLITE_MAP" $satellite_selected>Satellite</option>
                    <option value="G_HYBRID_MAP" $hybrid_selected>Hybrid</option>
                </select>
            </td>
            <td class="tableb" width="10%">
                &nbsp;
            </td>
        </tr>
EOT;
}


FIND:

Code Select Expand

                case 17 :
                    form_asc_desc($element[0], $element[1], $element[3]);
                    break;

AFTER it, ADD:

Code Select Expand

                case 50 :
                    form_gmap_type($element[0], $element[1], $element[3]);
                    break;


Now go to Config and modify settings accordingly. The most important thing is the api key. To get one, sign up for a Google Maps API key. It is free and is unique to your site.

The setting, Name of map file, is necessary if another file, like thumbnails.php, needs to know where to find the map file.

[Tranz]

We'll want an easy way to add coordinates data to each file...

Edit editOnePic.php. If you used v1, you might not even need to edit this file. Please let me know if that is the case.

There is another version of this file where you get the coordinate values by dragging the marker, rather than double-click on the map: http://forum.coppermine-gallery.net/index.php?topic=31206.msg144681#msg144681

FIND:

Code Select Expand

define('EDITPICS_PHP', true);

ADD:

Code Select Expand

define('GMAP_PHP', true);
define('REGISTER_PHP', true);


FIND:

Code Select Expand

$user4        = $_POST['user4'];

after it, ADD:

Code Select Expand

    $coordinates = explode(',',$_POST['coordinates']);
    $latitude        = $coordinates[0];
    $longitude        = $coordinates[1];



FIND:

Code Select Expand

$update .= ", user4 = '".addslashes($user4)."'";

after it, ADD:

Code Select Expand

    $update .= ", latitude = '".addslashes($latitude)."'";
    $update .= ", longitude = '".addslashes($longitude)."'";



FIND:

Code Select Expand

if (GALLERY_ADMIN_MODE && $CURRENT_PIC['owner_id'] != USER_ID) {
  get_user_albums($CURRENT_PIC['owner_id']);
} else {
  get_user_albums();
}

AFTER it, ADD:

Code Select Expand


$map_key = $CONFIG['gmap_api_key'];
$default_zoom_level = $CONFIG['gmap_default_zoom'];

//Google Maps API mysql fun
$query = "SELECT pictures.*, pictures.title AS pic_title
FROM {$CONFIG['TABLE_PICTURES']} As pictures
WHERE
pictures.pid = {$CURRENT_PIC['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
    $thumb_link = $CONFIG['ecards_more_pic_target'].'displayimage.php?pos='.(-$row['pid']);
$thumb_url = get_pic_url($CURRENT_PIC, 'thumb');
$thumb_caption = $row['caption'];
$album_title = $row['title'];
$album_link = $CONFIG['ecards_more_pic_target'].'thumbnails.php?album='.($row['aid']);
$owner_name = $row['owner_name'];
$owner_link = $CONFIG['ecards_more_pic_target'].'profile.php?uid='.($row['owner_id']);
$latitude = $row['latitude'];
$longitude = $row['longitude'];
// by default, the center coordinate is the picture's latitude and longitude
if (abs($latitude) + abs($longitude) > 0) {
$default_center_coord = $latitude . ',' . $longitude;
$coordinates = $latitude . ',' . $longitude;
} elseif ($CONFIG['gmap_default_center'] != NULL) { //if the picture doesn't have lat/long info, use the default value
//$coordinates = 'no data';
$def_coordinates = explode(',',$CONFIG['gmap_default_center']);
$default_center_coord = $def_coordinates[0] . ',' . $def_coordinates[1];
} else { //if there is no default center, use Google, Inc address
$default_center_coord = '37.42225327545478,-122.0855712890625';
}
//generate code for the points
if (abs($latitude) + abs($longitude) > 0) {
$point_code .= "var point = new GLatLng(" . $default_center_coord . ");\n";
$point_code .= "var marker = createMarker(point, '<div class=\"infowindow\"><a href=\"" .
               $thumb_link . '"><img src="' . $CONFIG['ecards_more_pic_target'].$thumb_url .
   '" border="0";></a>' . "</div>');\n";
$point_code .= "map.addOverlay(marker);\n";
$point_code .= "\n";
}
}




FIND:

Code Select Expand

// If this is the users gallery icon then check it

BEFORE it, ADD:

Code Select Expand

//lat and long
echo <<<EOT
        <tr>
            <td class="tableb" style="white-space: nowrap;">
                {$lang_gmap_php['coordinates']}
                </td>
                <td width="100%" class="tableb" valign="top" colspan="2">
                <input type="text" style="width: 100%" name="coordinates" maxlength="255" value="{$coordinates}" class="textinput" id="coordinates"/>
                </td>
        </tr>
EOT;

//show map if configured
if ($CONFIG['gmap_editOnePic_map'] == 1) {

echo <<<EOT
        <tr>
            <td class="tableb" valign="top" style="white-space: nowrap;">
                {$lang_register_php['location']}
                </td>
                <td width="100%" class="tableb" valign="top" colspan="2">
<noscript>
{$lang_gmap_php['no_javascript']}
</noscript>
{$lang_gmap_php['coord_instructions']}
<div id="small_map"></div>
                </td>
        </tr>
EOT;
}


FIND:

Code Select Expand

pagefooter();

AFTER it, ADD:

Code Select Expand

if ($CONFIG['gmap_editOnePic_map'] == 1) {
$gmap_code = <<<EOT
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=$map_key" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {

//create map
var map = new GMap2(document.getElementById("small_map"));
map.setCenter(new GLatLng({$default_center_coord}), {$default_zoom_level});
map.setMapType({$CONFIG['gmap_small_type']});
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

GEvent.addListener(map, 'moveend', function() {
var center = map.getCenter();
var latLngStr = center.y + ', ' + center.x ;
document.editonepicform.coordinates.value = latLngStr;
});
GEvent.addListener(map, 'click', function(overlay, point) {
  if (overlay) {
map.removeOverlay(overlay);
  } else if (point) {
map.addOverlay(new GMarker(point));
  }
});
// Creates a marker whose info window displays the file info
function createMarker(point, number)
{
var marker = new GMarker(point);
// Show this markers index in the info window when it is clicked
var html = number;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
return marker;
};
//code output for points
$point_code;
}   else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
EOT;

}


IF you FIND:

Code Select Expand

$THUMB_ROWSPAN=5;

REPLACE with:

Code Select Expand

$THUMB_ROWSPAN=6;

2006-10-22: Updated to add type buttons in right top corner, and ability to change map type

[Tranz]

To modify multiple pics, edit editpics.php. If you used v1, you might not even need to edit this file. Please let me know if that is the case.

There is another version of this file where you get the coordinate values by dragging the marker, rather than double-click on the map: http://forum.coppermine-gallery.net/index.php?topic=31206.msg144683#msg144683

FIND:

Code Select Expand

define('EDITPICS_PHP', true);

ADD:

Code Select Expand

define('GMAP_PHP', true);
define('REGISTER_PHP', true);


FIND:

Code Select Expand

$THUMB_ROWSPAN=5;

REPLACE with:

Code Select Expand

$THUMB_ROWSPAN=6;


FIND:

Code Select Expand

array($CONFIG['user_field4_name'], 'user4', 0, 255),

after it, ADD:

Code Select Expand

        array($lang_gmap_php['coordinates'], 'coordinates', 10, 255, 'latitude', 'longitude'),


FIND:

Code Select Expand

$user4       = get_post_var('user4', $pid);

after it, ADD:

Code Select Expand

                $coordinates = get_post_var('coordinates', $pid);


FIND:

Code Select Expand

$update .= ", user4 = '".addslashes($user4)."'";

after it, ADD:

Code Select Expand

$coordinates = explode(',',$coordinates);
$latitude        = $coordinates[0];
$longitude        = $coordinates[1];
$update .= ", latitude = '".addslashes($latitude)."'";
$update .= ", longitude = '".addslashes($longitude)."'";


FIND:

Code Select Expand

                $isgalleryicon_disabled = ($CURRENT_PIC['category'] < FIRST_USER_CAT) ? 'disabled="disabled" ':'';

AFTER it, ADD:

Code Select Expand

    global $CONFIG, $pid, $map_key, $default_center_coord, $default_zoom_level, $point_code, $map_code, $coordinates, $lang_register_php, $lang_gmap_php;
    $pid = $CURRENT_PIC['pid'];
$coordinates = $latitude . ',' . $longitude;
$map_key = $CONFIG['gmap_api_key'];
$default_zoom_level = $CONFIG['gmap_default_zoom'];

//Google Maps API mysql fun
$query = "SELECT {$CONFIG['TABLE_PICTURES']}.*, {$CONFIG['TABLE_PICTURES']}.title AS pic_title
FROM {$CONFIG['TABLE_PICTURES']}
WHERE
{$CONFIG['TABLE_PICTURES']}.pid = {$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
    $thumb_link = $CONFIG['ecards_more_pic_target'].'displayimage.php?pos='.(-$row['pid']);
$thumb_url = get_pic_url($CURRENT_PIC, 'thumb');
$latitude = $row['latitude'];
$longitude = $row['longitude'];
$gallery_url = $CONFIG['ecards_more_pic_target'];
// by default, the center coordinate is the picture's latitude and longitude
if (abs($latitude) + abs($longitude) > 0) {
$default_center_coord = $latitude . ',' . $longitude;
$coordinates = $latitude . ',' . $longitude;
} elseif ($CONFIG['gmap_default_center'] != NULL) { //if the picture doesn't have lat/long info, use the default value
$def_coordinates = explode(',',$CONFIG['gmap_default_center']);
$default_center_coord = $def_coordinates[0] . ',' . $def_coordinates[1];
} else { //if there is no default center, use Google, Inc address
$default_center_coord = '37.42225327545478,-122.0855712890625';
}
$map_code .= <<<EOT

//create map
var map$pid = new GMap2(document.getElementById("small_map$pid"));
map$pid.setCenter(new GLatLng($default_center_coord),$default_zoom_level);
map$pid.addControl(new GSmallMapControl());
map$pid.setMapType({$CONFIG['gmap_small_type']});
map$pid.addControl(new GMapTypeControl());

GEvent.addListener(map$pid, 'moveend', function() {
var center$pid = map$pid.getCenter();
var latStr$pid = center$pid.y ;
var longStr$pid = center$pid.x ;
document.editForm.coordinates$pid.value = latStr$pid + ',' + longStr$pid;
document.editForm.latitude$pid.value = latStr$pid;
document.editForm.longitude$pid.value = longStr$pid;

});
GEvent.addListener(map$pid, 'click', function(overlay, point) {
  if (overlay) {
map$pid.removeOverlay(overlay);
  } else if (point) {
map$pid.addOverlay(new GMarker(point));
  }
});

EOT;

if (abs($latitude) + abs($longitude) > 0) {
$map_code .= <<<EOT
//code output for points
//generate code for the points
var point = new GLatLng($default_center_coord);
var marker = createMarker(point,
'<div class="infowindow"><a href="$thumb_link"><img src="$gallery_url$thumb_url" border="0";></a></div>');
map$pid.addOverlay(marker);
EOT;
}

}
//show map if configured
if ($CONFIG['gmap_editpics_map'] == 1) {
echo <<<EOT
        <tr>
            <td class="tableb" valign="top" style="white-space: nowrap;">
                {$lang_register_php['location']}
                </td>
                <td width="100%" class="tableb" valign="top" colspan="2">
<noscript>
{$lang_gmap_php['no_javascript']}
</noscript>
{$lang_gmap_php['coord_instructions']}
<div id="small_map$pid" style="width: 300px; height: 300px; color: black; margin: 5px auto;"></div>
                </td>
        </tr>
EOT;
}


FIND:

Code Select Expand

<input type="text" style="width: {$field_width}%" name="$name" maxlength="$max_length" value="$value" class="textinput" />

REPLACE with:

Code Select Expand

                <input type="text" style="width: {$field_width}%" name="$name" maxlength="$max_length" value="$value" class="textinput" id="$name" />
                </td>
        </tr>

EOT;
}       

//array($lang_gmap_php['coordinates'], 10, 255, 'latitude', 'longitude'),
//function form_input($text, $name, $max_length)

function form_input_gmap($text, $name, $max_length, $latitude, $longitude,$field_width=100)
{
    global $CURRENT_PIC, $coordinates;

    $latitude = $CURRENT_PIC[$latitude];
    $longitude = $CURRENT_PIC[$longitude];
if (abs($latitude) + abs($longitude) > 0) {
$coordinates = $latitude . ',' . $longitude;
} else {
$coordinates = '';
}
    $value = $coordinates;
    $name .= $CURRENT_PIC['pid'];
    if ($text == '') {
        echo "        <input type=\"hidden\" name=\"$name\" value=\"\" />\n";
        return;
    }

    echo <<<EOT
        <tr>
            <td class="tableb" style="white-space: nowrap;">
                        $text
        </td>
        <td width="100%" class="tableb" valign="top">
                <input type="text" style="width: {$field_width}%" name="$name" maxlength="$max_length" value="$value" class="textinput" id="$name" />


FIND:

Code Select Expand

                            case 4 :
                                    form_options();
                                    break;

AFTER it, ADD:

Code Select Expand

case 10 :
                                    form_input_gmap($element[0], $element[1], $element[3], $element[4], $element[5]);
                                    break;



FIND:

Code Select Expand

pagefooter();

AFTER it, ADD:

Code Select Expand

if ($CONFIG['gmap_editpics_map'] == 1) {
$gmap_code =  <<<EOT
<!-- The javascript script code was placed at the very bottom, outside of the html tag, because the original attempt where the script tags were within the body tags prevented the map from working in IE. There are probably better ways to deal with integrating javascript code into a php template, but this was the easiest for my limited skill set. -->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=$map_key" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// Creates a marker whose info window displays the file info
function createMarker(point, number)
{
var marker = new GMarker(point);
// Show this markers index in the info window when it is clicked
var html = number;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
return marker;
};

$map_code;
}   else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
EOT;
}

2006-10-22: Updated to add type buttons in right top corner, and ability to change map type

[Tranz]

We're going to use the Master Template plugin to place the map code in the pages that we've edited, along with the CSS styles.

After installing the plugin (if you hadn't already done so), open plugins/master_template/codebase.php


CSS Stuff

If you have used version 1 of this mod and pasted the css in your theme style.css, and only use one theme and/or are content with just modifying that theme, you can replace the old gmap CSS code in your style.css with the CSS below. Otherwise, using master template to handle the css will enable all your themes to show the gmap.

FIND:

Code Select Expand

$add_html .= <<<EOT

AFTER it, ADD:

Code Select Expand

<style type="text/css">

#gmap {
width: 100%;
height: 500px;
border: outset thick gray;
}

#small_map { /* for maps in editOnePic.php, displayimage.php, and editpics.php */
width: 300px;
height: 300px;
color: black;
margin: 5px auto;
}

.infowindow { /* styling for map popup  */
width: 300px;
height: 200px;
overflow: auto;
text-align: left;
}

#gmap_sidebar { /* contains thumbnails that link to points on the map. scrollbar appears if the content is too long */
background-color: black;
width: 100%;
height: 500px;
overflow:auto;
text-align: center;
/*
padding: 0 10px 0 15px;
background-image:url(../../images/tile.gif) ;
background-repeat: repeat-y;
background-position: left;
*/
}

#gmap_sidebar img { /* adds spacing around thumbnails in the sidebar */
margin: 10px 0 0 0;
border: 2px solid black;
}

#gmap_sidebar a:hover img { /* highlights hovered thumbnails in the sidebar */
border: 2px solid silver;
}

#gmap_sidebar a:hover { /* hand cursor shows when hovered over thumbnails in the sidebar */
cursor: pointer;
}

#gmap_sidebar hr { /* style for the horizontal rule that separates groups of images in the sidebar */
width: 60%;
}

</style>

2006-06-01:  Edited to make the table size dynamic, rather than fixed in css attribute width. The tile background was commented out because it makes it more complicated to deal with the changing sidebar width. You can uncomment it if you want to keep it and have a static setup.


The code below will place the javascript code before the </body> tag, to make IE happy and for code validation.


FIND:

Code Select Expand

$thisplugin->add_filter('template_html','change_template_html');


AFTER it, ADD:

Code Select Expand

// Add a filter
$thisplugin->add_filter('page_html','add_gmap_html');


FIND:

Code Select Expand

?>

BEFORE it, ADD:

Code Select Expand

function add_gmap_html($html)
{
global $gmap_code;

$add_gmap_api = <<<EOT
{$gmap_code}
</body>
EOT;
return str_replace('</body>',$add_gmap_api,$html);
}


If you are not using Google Analytics, you can remove the stuff between the two pairs of <script> tags in codebase.php that has to do with it. Also:

Find:

Code Select Expand

$uacct='NN-NNNNNN-N';

Comment it like this:

Code Select Expand

//$uacct='NN-NNNNNN-N';


2006-05-18: Added instructions to remove Google Analytics code in codebase.php, as it could cause issues for people who are not using it.

[Tranz]

Those were the required edits to get the basics of the map mod so we can take a break now. You can start to add coordinates to your files and check them out on your new shiny map.

Notes:

• In editpics.php and editOnePic.php, if you double-click on a point on the map, the coordinates field will automatically be populated. There is another version of each file that will populate the coordinates field based on where you drag and drop the pin.
• I forgot which of the above files in v1 showed the coordinates as two separate fields, latitude and longitude. Could someone using v1 let me know? In v2, both of the files combine the fields for easy copy and pasting of coordinates in multiple files.
• Yeah, I know, I should have done something with EXIF but I don't know how. Oh well.

Known issues:

• The code to edit coordinates in Album Properties (modifyalb.php) is not ready. Album view still works if files in albums have coordinates, or if you edit the albums table in the database.
• If you use the overview map, there is a bug in the current api version so that the map is not correctly placed in Firefox. If you go into config and switch to the dev version of the maps api, that should fix it. Of course, it's not perfect because it covers the ToU, but that's Google's problem. fixed
• If thumbnails.php is set to show a map, meta albums like top rated will have a map that shows all markers, instead of those pertaining to the album. fixed

Wish List (stuff I would do if I could but I can't (now) so I welcome contributions)

• support album coordinates on the map done
• enable editing of coordinates in the upload file done

Special thanks to

• Google Maps via PHP/Mysql Tutorial. It's thanks to that tutorial that I learned how to generate the javascript code using php and mysql data in my first version of the map mod.
• Google Groups for Google Maps API
• Matt Rosencrantz for helping me get the bulk of the version 1 code converted to version 2 to support the tabbed infowindow function. He is so l33t that he was able to help without even knowing PHP beforehand.
• The numerous Maps mod users who provided valuable feedback in the form of suggestions and bug reports and/or fixes. You know who you are.  

[Tranz]

Below are instructions on how to display a small map in displayimage.php when the file has map info. Here's how it will look: http://takethu.com/displayimage.php?pos=-467

If you used v1, you might not even need to edit this file. Please let me know if that is the case.

FIND:

Code Select Expand

define('INDEX_PHP', true);

ADD:

Code Select Expand

define('GMAP_PHP', true);
define('REGISTER_PHP', true);


FIND:

Code Select Expand

    if (!in_array($CURRENT_PIC_DATA['pid'], $FAVPICS)) {
        $info[$lang_picinfo['addFavPhrase']] = "<a href=\"addfav.php?pid=" . $CURRENT_PIC_DATA['pid'] . $ref . "\" >" . $lang_picinfo['addFav'] . '</a>';
    } else {
        $info[$lang_picinfo['addFavPhrase']] = "<a href=\"addfav.php?pid=" . $CURRENT_PIC_DATA['pid']  . $ref . "\" >" . $lang_picinfo['remFav'] . '</a>';
}

AFTER it, ADD:

Code Select Expand

//Google Maps API mysql fun
if ($CONFIG['gmap_displayimage_map'] == 1) {
global $latitude, $longitude, $point_code, $map_info_exists, $lang_register_php, $lang_gmap_php;
global $map_key, $default_zoom_level;

$map_key = $CONFIG['gmap_api_key'];
$use_dev_version = $CONFIG['gmap_version'];
// if version config is set not to use development version, use 2 (current stable), otherwise, use 2.x (latest development)
if ($use_dev_version == 1) {
$version = '2.x';
} else {
$version = '2';
}

$default_zoom_level = $CONFIG['gmap_default_zoom'];

//ABS(pictures.latitude) + ABS(pictures.longitude) > 0  AND
$query = "SELECT pictures.*, albums.*, pictures.latitude AS pic_latitude, pictures.longitude AS pic_longitude
FROM {$CONFIG['TABLE_PICTURES']} AS pictures, {$CONFIG['TABLE_ALBUMS']} AS albums
WHERE pictures.aid = albums.aid AND
pictures.latitude != ''  AND
pictures.longitude != ''  AND
pictures.pid = {$CURRENT_PIC_DATA['pid']}
LIMIT 1;
";
$result = cpg_db_query($query);
if($row = mysql_fetch_array($result))
{
$CURRENT_PIC_DATA = $row; //send a copy to get_pic_url it messes with the vars
$thumb_link = $CONFIG['ecards_more_pic_target'].'displayimage.php?pos='.(-$row['pid']);
$thumb_url = get_pic_url($CURRENT_PIC_DATA, 'thumb');
$latitude = $row['pic_latitude'];
$longitude = $row['pic_longitude'];

//generate code for the points
$point_code .= "var point = new GLatLng(" . $latitude . "," . $longitude . ");\n";
$point_code .= "var marker = createMarker(point, '<div class=\"infowindow\"><a href=\"" . $thumb_link . '"><img src="' . $CONFIG['ecards_more_pic_target'].$thumb_url . '" border="0";></a>' . "</div>');\n";
$point_code .= "map.addOverlay(marker);\n";
$point_code .= "\n";
$map_info_exists = TRUE;
}
}
if ($map_info_exists) {
global $gmap_code;
$info[$lang_register_php['location']] = '
<noscript>' .
$lang_gmap_php['no_javascript'] .
    '</noscript><div id="small_map"></div>';
if ($CONFIG['gmap_displayimage_map'] == 1 && $map_info_exists) {
$gmap_code =  <<<EOT
<script src="http://maps.google.com/maps?file=api&amp;v=$version&amp;key=$map_key" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {

//create map
var map = new GMap2(document.getElementById("small_map"));
map.setCenter(new GLatLng($latitude,$longitude), {$default_zoom_level});
map.setMapType({$CONFIG['gmap_small_type']});
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
// Creates a marker whose info window displays the file info
function createMarker(point, content)
{
var marker = new GMarker(point);
// Show this markers index in the info window when it is clicked
var html = content;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(content);});
return marker;
};
//code output for points
$point_code;
}   else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
EOT;
}
}

2006-06-02: Fixed issue where maps didn't show up on the page due to ambiguity of lat/long values after their addition to album table. Also added ability for the map to be using dev or stable version of api via config.

[Tranz]

To show a map of images in the thumbnail page of an album, like here, edit thumbnails.php

FIND:

Code Select Expand

define('THUMBNAILS_PHP', true);

AFTER it, ADD:

Code Select Expand

define('GMAP_PHP', true);
define('DISPLAYIMAGE_PHP', true);
define('REGISTER_PHP', true);
define('SEARCH_PHP', true);


FIND:

Code Select Expand

    display_thumbnails($album, (isset($cat) ? $cat : 0), $page, $CONFIG['thumbcols'], $CONFIG['thumbrows'], true);


AFTER it, ADD:

Code Select Expand

$center_avg_coords = TRUE;
include('include/map.inc.php');


[Tranz]

If you are currently using v1 of the API from this mod and are content with it, you only need to change the version number in the map file, editpics.php, editOnePic.php, displayimage.php.

FIND:

Code Select Expand

<script src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=$map_key" type="text/javascript">

REPLACE with:

Code Select Expand

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=$map_key" type="text/javascript">

You won't get new features but the map quality is better.

[pelhrimak]

This is super, now I have a problem with a css ... a havent the old version.

Code Select Expand

http://svet.pelhrim.cz/mapy.php

[Tranz]

This is super, now I have a problem with a css ... a havent the old version.

Code Select Expand

http://svet.pelhrim.cz/mapy.php

Yes, you have the old version. #map has been changed to #gmap, and there are many more selectors.

[Tranz]

I'm sorry, I left out the language code. I have posted it here if you have already gone through the instructions: http://forum.coppermine-gallery.net/index.php?topic=31206.msg144442#msg144442

[pelhrimak]

I dont understand you, why lang file edit ?
...................
I have done it, but out of order.
my CSS is here (i am using SMF_1-1_rc2 theme)

Code Select Expand

/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2006 Coppermine Dev Team
  v1.1 originally written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  ********************************************
  Coppermine version: 1.4.4
  $Source:
  $Revision:
  $Author:
  $Date:
**********************************************/

/* SMF_1-1_rc2 theme designed by Billy Bullock

Colors used in this style sheet:
   Hex 000000 = RBG   0,   0,   0 = black
   Hex FFFFFF = RBG 255, 255, 255 = white
   Hex E5E5E8 = RGB 229, 229, 232 = off-white
   Hex 999999 = RBG 153, 153, 153 = gray
   Hex 828181 = RBG 130, 129, 129 = dark gray
   Hex CCCCCC = RBG 204, 204, 204 = light gray
*/

body
{
background-color: #E5E5E8;
margin: 0px;
padding: 12px 30px 4px 30px;
}

table {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        }

h1{
        font-weight: bold;
        font-size: 22px;
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        text-decoration: none;
        line-height : 120%;
        color : #000000;
        margin: 2px;
}

h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        margin: 0px;
}

h3 {
        font-weight: normal;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        margin: 2px;
}

p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
        margin: 2px 0px;
}

ul {
        margin-left: 5px;
        padding: 0px;
}

li {
        margin-left: 10px;
        margin-top: 4px;
        margin-bottom: 4px;
        padding: 0px;
        list-style-position: outside;
        list-style-type: disc;
}

.textinput {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: 1px solid #828181;
        padding-right: 3px;
        padding-left: 3px;
}

.listbox {
        font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: 1px solid #D1D7DC;
        vertical-align : middle;
}

.button {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: 1px solid #828181;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
}

.comment_button {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 85%;
        border: 1px solid #828181;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        padding-left: 3px;
        padding-right: 3px;
}

.radio {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        vertical-align : middle;
}

.checkbox {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        vertical-align : middle;
}

a {
        color: Black;
        text-decoration: underline;
        font-family: Arial, Verdana, "MS Sans Serif";
}

a:hover {
        color: Black;
        text-decoration: underline;
}

bblink a {
        color: Black;
        text-decoration: underline;
}

bblink a:hover {
        color: Black;
        text-decoration: underline;
}

.maintable {
        border: 1px solid #828181;
        background-color: #EFEFEF;
        margin-top: 1px;
}


.tableh1 {
  background-image: url(images/catbg2.jpg);
  background-color: #A1BFD9;
  color: #ffffff;
        padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
        padding-bottom: 0px;
}

.tableh1_compact {
        color : White;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
        background-color: #6b8eae;
}

.tableh2, .catrow_noalb {
        background: #D1D7DC ;
        color : #000000;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableh2_compact {
        background: #D1D7DC ;
        color : #000000;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tableb , .display_media , .catrow {
        background: #EFEFEF ;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableb_compact {
        background: #EFEFEF ;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tablef {
        background: #D1D7DC;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
}

.album_stat {
        font-size: 85%;
        margin: 5px 0px;
}

.thumb_title {
        font-weight : bold;
        font-size: 80%;
        padding: 2px;
        display : block;
}

.thumb_caption {
        font-size: 80%;
        padding: 1px;
        display : block;
}

.thumb_caption a {
        text-decoration: underline;
        color: #000000;
}

.thumb_num_comments {
        font-weight: normal;
        font-size: 80%;
        padding: 2px;
        font-style : italic;
        display : block;
}

.user_thumb_infobox {
        margin-top: 1px;
        margin-bottom: 1px;
}

.user_thumb_infobox th {
        font-weight : bold;
        font-size: 100%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox td {
        font-size: 80%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox a {
        text-decoration: none;
        color: #000000;
}

.user_thumb_infobox a:hover {
        color: #000000;
        text-decoration: underline;
}

.sortorder_cell {
                color : White;
        padding: 0px;
        margin: 0px;
}

.smalltext {
  font-family: Georgia, Serif;
  font-size: 10px;
}

.sortorder_options {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color : White;
        padding: 0px;
        margin: 0px;
        font-weight: normal;
        font-size: 80%;
        white-space: nowrap;
}

.navmenu {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: White;
        font-size: 100%;
        font-weight: bold;
        border-style: none;
        background: #6b8eae;
}

.navmenu img {
        margin-top: 1px;
        margin-right: 5px;
        margin-bottom: 1px;
        margin-left: 5px;
}

.navmenu a {
        position: relative;
        display: block;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
        text-decoration: none;
        color: White;
}

.navmenu a:hover {
        background : #EFEFEF ;
        text-decoration: none;
        color: White;
}

.admin_menu_thumb {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 85%;
        border: 1px solid #828181;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        color: #000000;
        font-weight: bold;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 85px;
}

.admin_menu_thumb a {
        color: #000000;
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 10px;
        padding-right: 10px;
}


.admin_menu_thumb a:hover {
        color: #000000;
        text-decoration: underline;
}

.admin_menu {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 85%;
        border: 1px solid #828181;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        color: #000000;
        margin-top: 0px;
        margin-bottom: 0px;
        text-align: center;
}

.admin_menu a {
        color: #000000;
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 2px;
        padding-right: 2px;
}

.admin_menu a:hover {
        color: #000000;
        text-decoration: underline;
}

td #admin_menu_anim {
        background-image : url(images/button_bg_anim.gif);
}

.comment_date{
        color : #5F5F5F;
        font-size : 90%;
        vertical-align : middle;
}

.image {
        border-style: solid;
        border-width:1px;
        border-color: #000000;
        margin: 2px;
}

.imageborder {
        border: 1px solid #000000;
        background-color: #FFFFFF;
        margin-top: 30px;
        margin-bottom: 30px;
}

.thumb_filename {
        font-size: 80%;
        display: block;
}

.thumbnails {
        background: #EFEFEF ;
        padding: 5px;
}

.footer {
        font-size : 9px;
}

.footer a {
        text-decoration: none;
        color: #000000;
}

.footer a:hover {
        color: #000000;
        text-decoration: underline;
}

.statlink {
        color: White;
}

.statlink a {
        text-decoration: none;
        color: White;
}

.statlink a:hover {
        color: White;
        text-decoration: underline;
}

.alblink a {
        text-decoration: underline;
        color: White;
}

.alblink a:hover {
        color: White;
        text-decoration: underline;
}

.catlink {
        display: block;
        margin-bottom: 2px;
}

.catlink a {
        text-decoration: underline;
        color: Gray;
}

.catlink a:hover {
        color: Gray;
        text-decoration: underline;
}

.topmenu {
        line-height : 130%;
        font-size: 12px;
        color: Black;
}

.topmenu a {
        color: Black;
        text-decoration : none;
}

.topmenu a:hover  {
        color: Black;
        text-decoration : underline;
}

.img_caption_table {
        border: none;
        background-color: Black;
        width : 100%;
        margin : 0px;
}

.img_caption_table th {
        background: #e1e1e1;
        font-size: 100%;
        color : #000000;
        padding-top: 4px;
        padding-right: 10px;
        padding-bottom: 4px;
        padding-left: 10px;
        border-top : 1px solid #FFFFFF;
}

.img_caption_table td {
        background: #EFEFEF ;
        padding-top: 6px;
        padding-right: 10px;
        padding-bottom: 6px;
        padding-left: 10px;
        border-top : 1px solid #FFFFFF;
}

.debug_text {
        border: #BDBEBD;
        background-color: #EFEFEF;
        width : 100%;
        margin : 0px;
}

.clickable_option {
        border-bottom : 1px dotted blue;
        cursor : default;
}


.listbox_lang {
        color: #000000;
        background-color: #D1D7DC;
        border: 1px solid #D1D7DC;
        font-size: 80%;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align : middle;

}

/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
background-position: left bottom;
color: white;
text-transform: uppercase;
vertical-align: top;

}
.maintab_back, .maintab_active_back
{
color: white;
text-decoration: none;
font-size:  9px;
vertical-align: top;
padding: 2px 6px 6px 6px;
font-family: tahoma, sans-serif;
}

.maintab_first
{
background-image: url(images/maintab_first.gif);
background-repeat: no-repeat;
width: 10px;
}
.maintab_back
{
background-image: url(images/maintab_back.gif);
background-repeat: repeat-x;
}
.maintab_last
{
background-image: url(images/maintab_last.gif);
background-repeat: no-repeat;
width: 8px;
}
.maintab_active_first
{
background-image: url(images/maintab_active_first.gif);
background-repeat: no-repeat;
width: 6px;
}
.maintab_active_back
{
background-image: url(images/maintab_active_back.gif);
background-repeat: repeat-x;
}
.maintab_active_last
{
background-image: url(images/maintab_active_last.gif);
background-repeat: no-repeat;
width: 8px;
}

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
color: white;
text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
padding: 1px;
border: 1px solid #696969;
background-color: #FFFFFF;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: black;
font-style: normal;
background-color: #E9F0F6;
background-image: url(images/titlebg.jpg);
border-bottom: solid 1px #9BAEBF;
border-top: solid 1px #FFFFFF;
background-repeat: repeat-x;
padding-left: 10px;
padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: black;
font-style: normal;
}

.titlebg a:hover
{
color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
color: black;
font-style: normal;
text-decoration: underline;
}

.titlebg2 a:hover
{
text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
background-image: url(images/catbg.jpg);
background-color: #88A6C0;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
background-image: url(images/catbg2.jpg);
background-color: #A1BFD9;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
border-bottom: solid 1px #375576;
background-repeat: repeat-x;
}
.catbg, .catbg2
{
font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
font-size: 95%;
color: white;
text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
color: white;
text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
color: #e0e0ff;
}

/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
background-color: #ADADAD;
padding: 0px;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
color: #000000;
background-color: #ECEDF3;
}
.windowbg2
{
color: #000000;
background-color: #F6F6F6;
}
.windowbg3
{
color: #000000;
background-color: #E0E1E8;
}
/* the today container in calendar */
.calendar_today
{
background-color: #FFFFFF;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
font-size: x-small;
font-family: verdana, sans-serif;
}
.middletext
{
font-size: 90%;
}
.normaltext
{
font-size: small;
}
.largetext
{
font-size: large;
}

#vanity a {
        display:block;
        width:57px;
        height:20px;
        margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover  {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}


#brdheader DIV.box {BORDER-TOP-WIDTH: 4px}

DIV.box {OVERFLOW: hidden;
border: 1px solid #0066B9;
BACKGROUND-COLOR: #F1F1F1}
DIV.blockpost>DIV>DIV.inbox {PADDING-BOTTOM: 1px}

DIV.block DIV.inbox, DIV.blockmenu DIV.inbox {PADDING: 3px 6px}


#brdmenu {BACKGROUND-COLOR: #0066B9; COLOR: #FFF; PADDING: 6px;}
#brdmenu A:link, #brdmenu A:visited {COLOR: #FFF; TEXT-DECORATION: none;}
#brdmenu A:hover {COLOR: #FFF; TEXT-DECORATION: underline}

#brdwelcome  {LINE-HEIGHT: 1.4em; PADDING: 5px;PADDING-BOTTOM: 7px;}
#brdwelcome A:link, #brwelcome A:visited {TEXT-DECORATION:underline}
#brdwelcome A:hover {TEXT-DECORATION: underline}

DIV.blockpost>DIV>DIV.inbox {PADDING-BOTTOM: 1px}

DIV.block DIV.inbox, DIV.blockmenu DIV.inbox {PADDING: 3px 6px}
#announce DIV.inbox DIV {PADDING: 3px 0}
.clearer {
HEIGHT: 0;
WIDTH: 0;
LINE-HEIGHT: 0;
FONT-SIZE: 0;
OVERFLOW: hidden
}
.clearer, .clearb {CLEAR: both}
.conr {
FLOAT: right;
TEXT-ALIGN: right;
CLEAR: right;
WIDTH: 40%
}
.infowindow { /* styling for map popup  */
white-space: normal;
width: 200px;
padding: 10px;
overflow: auto;
}

#gmap {
width: 600px;
height: 500px;
border: outset thick gray;
}

#small_map { /* for maps in editOnePic.php, displayimage.php, and editpics.php */
width: 300px;
height: 300px;
color: black;
margin: 5px auto;
}

#gmap_sidebar { /* contains thumbnails that link to points on the map. Includes filmstrip tile. scrollbar appears if the content is too long */
background-color: black;
width: 155px;
height:500px;
overflow:auto;
background-image:url(../../images/tile.gif) ;
background-repeat: repeat-y;
background-position: left;
padding-left:25px;
padding-right: 5px;
color: silver;
text-align: center;
}

#gmap_sidebar img { /* adds spacing around thumbnails in the sidebar */
margin: 3px 0 0 0;
border: 2px solid black;
}

#gmap_sidebar a:hover img { /* highlights hovered thumbnails in the sidebar */
border: 2px solid silver;
}

....
http://svet.pelhrim.cz/mapy.php

[Tranz]

I dont understand you, why lang file edit ?
...................
I have done it, but out of order.
my CSS is here (i am using SMF_1-1_rc2 theme)

Code Select Expand

.infowindow { /* styling for map popup  */
white-space: normal;
width: 200px;
padding: 10px;
overflow: auto;
}

#gmap {
width: 600px;
height: 500px;
border: outset thick gray;
}

#small_map { /* for maps in editOnePic.php, displayimage.php, and editpics.php */
width: 300px;
height: 300px;
color: black;
margin: 5px auto;
}

#gmap_sidebar { /* contains thumbnails that link to points on the map. Includes filmstrip tile. scrollbar appears if the content is too long */
background-color: black;
width: 155px;
height:500px;
overflow:auto;
background-image:url(../../images/tile.gif) ;
background-repeat: repeat-y;
background-position: left;
padding-left:25px;
padding-right: 5px;
color: silver;
text-align: center;
}

#gmap_sidebar img { /* adds spacing around thumbnails in the sidebar */
margin: 3px 0 0 0;
border: 2px solid black;
}

#gmap_sidebar a:hover img { /* highlights hovered thumbnails in the sidebar */
border: 2px solid silver;
}

You need to edit the lang file because there are some text strings that the mod displays. You can see the code I posted what the text is. If you don't add it, the text won't display.

You need to follow the instructions here about using master template: http://forum.coppermine-gallery.net/index.php?topic=31206.msg144446#msg144446

With the previous mod, I had to maintain a separate version for valid and invalid versions of the code. Using master template allows for valid code. So I opted for the version that produces valid code, even if it requires that you install another plugin.

[pelhrimak]

All is ok, but nothing happened http://svet.pelhrim.cz/mapy.php

[Tranz]

I looked at the source code and I don't see the gmap javacript code. Did you go into plugin manager and install the master template plugin?

[pelhrimak]

I cannot upload plugins, dont know why, I have chmod 777 ant  :'(