Google Maps + Gallery

Summary:
This forum thread if about a Google Maps module and a Google Maps theme.
It started as a google maps theme for G2 which is still available, but soon a Goolge Maps module was born which has now much more features than the theme.

For more information, you don't need to read the 500+ posts in this thread. There's a projection page on:

http://codex.gallery2.org/index.php/Gallery2:Modules:Map

Discussion and Support
If you want to discuss this module, please create a topic with [Maps Module] in its title in the Gallery 2 General Discussion Forum: http://gallery.menalto.com/forum/75

Bugs and Feature Requests
If you found a bug or if you would like to file a feature request, please do so on the official project page at:
https://sourceforge.net/projects/gmap-module/

The Admins for the project are Galmoid and myself (let us know if something isn't quite right)
Currently there are 4 developers
The WIKI will remain the principal source for documentation

Thanks !

-------------------------
The Termite

____________________________________________________________________
original first post of this topic:
--------------------------------------------------------------------
Topic title:
Challenge & Marry Google Maps and Gallery!

Imagine if you had the gps coordinates for the pictures you took, and added them either in the tag in the image, or into the gallery, and for each album, you can have a map that would show where each image was taken... and you can click on each marker to bring you to other images from the same area. Now that would be sweet, way above my skills, but what a sweet add on it would be.

Is it possible with the new Google Maps APIs released?

Heres a link to somtething like I'm thinking, but the gallery version would have more photos.

Click on the red marker near Paraguay.
http://www.junto.co.uk/Album/Maps/SouthAmerica.aspx

This is indeed a great idea!

This would be great, someone please do this.

Got it working!!!
http://tautologous.com/gallery2/travel/

This takes two custom fields:
GoogleMapKey (which is assigned to a folder)
GPS (assigned to photos in the folder mentioned above)

kinda clunky, and not 100% what I wanted (to be able to see children and grandchildren items), but it works.

album file attached.

LarryDoliver, super cool!

That rocks, although I prefer the version that shows an image, with a link to the associated gallery, rather then directly to the image.

That's totally possible, just use ablums instead of images with the GPS data:

http://tautologous.com/gallery2/travel/

THis one has some linking to images, some to ablums. I don't handle permissions well, so you fine folks out there will be lock out of some of these...
(edit) actually - that seems to be working too. Kewl

I've added your mod to the User Contribution page, http://codex.gallery2.org/index.php/Gallery2:UserContributions#Mods.2FPatches

Here's one place to start, check out the Developer section here, http://codex.gallery2.org/index.php/Main_Page

As well as here, http://gallery.menalto.com/modules.php?op=modload&name=phpWiki&file=index&pagename=Development%20Documents

(I don't know if everything has been ported over to the new site yet)

Sure - should have done this is the first place.

There are two parts to this: (1) setting up a new theme (clone of matrix) and making some tweaks and (2) getting the google mapkey and GPS data attached to albums and images.

So (1):
a) copy the matrix theme folder and call the new one 'map' (clever name, right?)
b) edit theme.inc and change all 'matrix' references to 'map'
c) copy the file I attached a couple posts back in this thread into a folder called 'local' in the templates folder
(me thinks that's it...)

then (2):
a)turn on the customfield module, add two custom fields:
*GoogleMapKey (which is assigned to an album
*GPS (assigned to photos and sub-albums in the folder mentioned above)
b)Go sign up with google to get a mapkey for each album you want to map and stick this in the album's GoogleMapKey custom field
c)Add GPS data to the images' custom fields: "Longitude,Latidude" - no quotes
d)Turn on the map theme a let 'er rip

that's how I remember it. Let me know if it works, and post a link, too...

Nice work Larry!

I have a few requests/suggestions.
1) Have different pushpin icons for albums vs. photos
2) Have different colors available for album/photo pushpins
3) When an album pushpin is clicked on, have gmaps zoom to display pushpins for all the items within that gallery (photos and albums). A given album could be assigned a master pushpin color.
4) Allow toggle display of all items in a given gmap view (the pushpins would be color coded to allow different albums of photos to be distinguished)

Okay, so I followed the instructions (I already had a number of mapkeys which work in static html files), so I generated the mapkey for images.vanbrecht.com/jason/kim

I modified the theme.
I went into the album I was interested in using, edited that specific album, an album custom field of GoogleMapKey and dropped the key into the custom field area.
When I attempt to use the above url, I get the key is registered for a different url. I guess my question is.. when the template is called, does it take into account the URL redirect, or does it want the original path that gallery would use if URL rewrite was turned off.

I'm content with not differentiating albums and photo's, but it would be trivial to make that improvement.

For #3, that's a really good idea - but I don't tag each photo in an album with gps data from exactly where the photo was taken. Just city-level resolution on the pins. If I do head this way, then your #1 comment would be a good idea...

Here's my idea for an improvement: add a world map on the edit photo page to click to add GPS data...

No - you are not alone. Can you get to this site (another, very slick, google map photo implementation)

Doesn't seem to be a URL_rewrite issue (it's broken in both cases)
Might be a 'cross-site scripting' security thing? I tried a few settings on a windows machine's IE Security options, but that didn't help. I'm not sure how to really test this, though. My page needs to download javascript and images from various google.com domains - but all google maps sites do that as well...

kinda stuck here...

I get the same apache requests from both IE and firefox (from the same machine):

IE:

"GET /gallery2/v/travel HTTP/1.1" 200 11538 "-"
"GET /gallery2/themes/map/theme.css HTTP/1.1" 200 11978 "http://tautologous.com/gallery2/v/travel"
"GET /gallery2/images/galleryLogo_sm.gif HTTP/1.1" 200 3488 "http://tautologous.com/gallery2/v/travel"
"GET /gallery2/main.php?g2_view=imageframe.CSS&g2_frames=none HTTP/1.1" 200 171 "http://tautologous.com/gallery2/v/travel"
"GET /gallery2/themes/map/images/icon_path_separator.gif HTTP/1.1" 200 106 "http://tautologous.com/gallery2/v/travel"

firefox:

"GET /gallery2/main.php?g2_view=imageframe.CSS&g2_frames=none HTTP/1.1" 200 171 "http://tautologous.com/gallery2/v/travel/"
"GET /gallery2/themes/map/theme.css HTTP/1.1" 200 11978 "http://tautologous.com/gallery2/v/travel/"
"GET /gallery2/v/travel/ HTTP/1.1" 200 21008 "-"
"GET /gallery2/images/galleryLogo_sm.gif HTTP/1.1" 200 3488 "http://tautologous.com/gallery2/v/travel/"
"GET /gallery2/themes/map/images/icon_path_separator.gif HTTP/1.1" 200 106 "http://tautologous.com/gallery2/v/travel/"

The only difference seems to be the order...

Looks like the script issue may just be a typo:
http://validator.w3.org/check?uri=http%3A%2F%2Ftautologous.com%2Fgallery2%2Ftravel

You have a script tag starting and never ending in the document on line 12

Here's the CSS validator results too:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftautologous.com%2Fgallery2%2Ftravel&usermedium=all

Probably get something better once the page validates to XHTML strict.

ahh - total rookie mistakes. I validated on Sunday, but guess I made changes since then. All seems to be working now...

latest source attached

Swordfish this is what Larry posted before:
There are two parts to this: (1) setting up a new theme (clone of matrix) and making some tweaks and (2) getting the google mapkey and GPS data attached to albums and images.

So (1):
a) copy the matrix theme folder and call the new one 'map' (clever name, right?)
b) edit theme.inc and change all 'matrix' references to 'map'
c) copy the file I attached a couple posts back in this thread into a folder called 'local' in the templates folder
(me thinks that's it...)

then (2):
a)turn on the customfield module, add two custom fields:
*GoogleMapKey (which is assigned to an album
*GPS (assigned to photos and sub-albums in the folder mentioned above)
b)Go sign up with google to get a mapkey for each album you want to map and stick this in the album's GoogleMapKey custom field
c)Add GPS data to the images' custom fields: "Longitude,Latidude" - no quotes
d)Turn on the map theme a let 'er rip

that's how I remember it. Let me know if it works, and post a link, too...

Hope that helps.

http://www.google.com/apis/maps/signup.html
that's the signup page where you enter your url. the key generated at signup isn't valid [thus, you need to make a new one for each dir on your server].

It's quite a hack, but I've got a map working here. I'm going to try to turn it into a module, though, since that will probably match my needs better. Can anyone here give me a clue on how to:

• Retrieve a list of entity (item?) IDs that have a non-blank custom field called "GPS"
• Fetch relevant data for these entities into a PHP data structure
• Get this data into a structure accessible in the Smarty template that renders an album-like page

I figure the fetching IDs should be easy, but I'm having trouble even finding code that does something similar. I could write the SQL if I knew where to send it. Getting the data for the IDs can be done through something in GalleryCoreApi, I think, but I'm not sure what exactly (maybe tracing LoadCommonTemplateData will give me an idea). The last step I've got more ore less figured out, I think.

--
http://severinghaus.org/gallery2/

This code iterates through all children looking for nonempty custom fields called GPS...

{foreach from=$theme.children item=child}
    {g->callback type="customfield.LoadCustomFields" itemId=$child.id}
    {if isset($block.customfield.LoadCustomFields.fields.GPS)}
         var comment = 'Image: {$child.title|markup} taken on {g->date timestamp=$child.originationTimestamp}<br><a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}"> {g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"} </a>';
      {if $child.canContainChildren}
         createMarker(new GPoint({$block.customfield.LoadCustomFields.fields.GPS}),comment,Redicon);
      {else}
         createMarker(new GPoint({$block.customfield.LoadCustomFields.fields.GPS}),comment,Greenicon);
      {/if}
   {/if}
{/foreach}

Is that what you're looking for?

Yeah - I see where you're going. If you want the map to be the starting point for all navigation - just use what I posted, and have all albums as children to a single parent. That's what I do, and it works pretty well - I had to move oodles of albums around to flatten the tree to get rid of grandchildren and great-grandchildren (I'm not totally done with this - but it got me where I'm happy with it...)

On the API key, what I did was edit the URL rewrite rules from "v/album" to just "album" - that way http://tautologous.com/gallery2/travel is the same directory (to google) as any other top-level album. Not a perfect solution, but it works for me since I flattened out my map (travel) area anyway...

On another note, I'm thinking about having tiny (50x50?) thumbnails of images/albums along the right or bottom of the map. Click a thumbnail, the map scroll/zooms in to that area. Should be trivial to implement, just need to get around to it...

done. check it out at http://tautologous.com/gallery2/travel and the new zip file http://tautologous.com/map.zip

Yea, very cool! Think I'd prefer some white space in between the tiny thumbs or some type of mini
frame border but, yea this rocks!! Thanks for the updated map theme.

Another thing I haven't figured out is how to get my "ShowMap" template to be able to insert content into the page's head tag. For example, there are a few CSS rules and a script tag that should really be there instead of in the body. If anyone can shed some light on this, I would greatly appreciate it!

--
http://severinghaus.org/gallery/

Hey HorsepunchKid, anychance you would implement thsi feature in your module?
When an album pushpin is clicked on, have gmaps zoom to display pushpins for all the items within that gallery (photos and albums). A given album could be assigned a master pushpin color. If there are children items with GPS coords, just display the thumbnail popup.