Google Maps + Gallery

Thanks for the tip, valiant. I've done that and generally tried to clean things up a bit in my code. There is a simple admin interface that gives you control over some very basic parameters (e.g. map size, whether or not to display summaries, etc.). It seems to be working fairly well. If you'd like to try it out, you can get it here. Please read the included README file!

samkuhn2: Sounds like a good idea, but I do not have the time to devote to it at the moment.
--
http://severinghaus.org/gallery/

This isn't really a theme, is it? Could this not be rewritten so it can be plugged into any gallery, regardless of the theme?
I mean all I see here is the Matrix theme with the google map thing inside...

Sorry, I see HorsePunchKid already mentioned it and made it into a module...

Shocksll seems to suggest that the entire thing has not yet been put into a module, should it not? (see post below)
______________________
I made a theme for G2, try it

The way I set things up when I converted it to a module is fairly basic. I don't have a fresh install to try it out on, but all you should need to do is:

• Back up your files and database! I haven't had any problems at all, but I can't ask you to trust my code.
• Get your Google Maps API key
• Unzip this module and put the "map" directory into your "gallery2/modules/" directory.
• Go to your Site Admin page and install and activate the Map module.
• Go to "Map" under the Site Admin menu and enter your API key; configure other parameters as you see fit.
• Enable the "custom fields" module and create a "common field" called "GPS" (you may want to restrict this to just albums; the map module doesn't care).
• Enter GPS coordinates for items; I believe they're in "Longitude,Latitude" format, for example roughly "-87.6244160,41.8806700" for Chicago, IL.

The URL to access you map is http://yoursite/gallery2/main.php?g2_view=map.ShowMap, though it's easy enough to put a redirect in for it, as I have. I can detail that in another post if there is interest in it.

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

Ok, i've updated the map theme again.

Changes mainly include the popup box formatting:
1. Checkboxes in theme settings for whether to display summaries and/or descriptions
2. It now says Image or Album depending on item instead of always displaying image
3. It says Date on the next line instead of "was taken on"
4. All popup box contents are centered.

Steve Lineberry

dunno if it's anything I'm doing wrong here, but upon saving the config in the administration panel, g2 gives me this:

Warning: Cannot modify header information - headers already sent by (output started at /var/www/php_libs/gallery2/modules/map/MapSiteAdmin.inc:123) in /var/www/php_libs/gallery2/modules/core/classes/GalleryPhpVm.class on line 124

the settings are saved, nevertheless, so it's more of an annoyance than anything else..

(on another note, I'll try to hack together a way of linking to the map from the front page)

I was working on getting the module code modified to work in IE and I was going to post it, but shocksll beat me to the punch. I have, however, modified it slightly to expand the width of the map to fit the browser window. I had a really tough time trying to figure out how to make it auto-reszie for the height of the browser. If anyone knows how to accomplish this (for both firefox and IE) please let me know.

If you want to see another sample gallery using the map integration you can go to: http://billimek.com/jeff/gallery/map/

p.s. This is the .htaccess recipe I used to allow for the nicer URL:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /jeff/gallery/
    RewriteRule ^map(/)? main.php?g2_view=map:ShowMap
</IfModule>

Thanks,
Jeff

Thanks. Here's a new version.

This one you can now set the following defaults in the theme settings:
1. Center GPS position
2. Zoom level
3. Map Type (map, satellite, hybrid)

Steve Lineberry

Trying to keep up with things here! I've added shocksll's improvements to the module version and figured out how to get the Javascript into the footer ({g->addToTrailer}), which is what keeps IE from choking. You can see it in action here (don't worry; that paragraph above the map is in my "local" directory, which I have not included), and you can download the module here. (I'll also try to attach the zip file here.)

billimek, that's basically what my rewrite was, only I had to make sure that it occurred before the other rewrites so that G2 would not try to find an album called "map".

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

Also, can you please remove the extra carrage return or linefeed at the end of MapSiteAdmin.inc

That causes some of us when we save the settings to get a blank page or error. Thanks.

Steve Lineberry

Sweet, thanks man. Can you post a link to a map page where you have the long descriptions and I can take a look. Thanks.

Steve Lineberry

I'd send a link, but somehow it started working correctly, though I don't think the changes I made (see the diff) were responsible. I should try to write a description or summary that has particularly nasty characters in it and see what happens.

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

For what it's worth, swordfish, when I got my API key, I just asked for the root of my website instead of the directory that the map lives in. I could definitely picture problems if you've registered for "foo.com/bar/map" and you're trying to rewrite the URL to "foo.com/bar/main.php?show=map" (roughly speaking, of course).

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

Does this only happen when you have the theme or module enabled?

Steve Lineberry

Think I found bug with the map theme, map module, or combination of both.
The API key text block in the map theme by default is checked (Use global).
I inserted my API key in the map module form.
Goto my website and I get the Map API alert (twice) and the map never loads.
Viewing the page source and the map API key= is blank!
If I insert the same API key in the map theme API block then the Google map loads.
I still get the API key alert (only once though and yes I did try multiple urls including the root directory) but at least it loads and is functional.

If I leave the API key in the map theme and then change the API key in the map module form to something else then the API key in the map theme is taken and the API key inserted in the map module is ignored. Think this part is correct since the Global default is now unchecked and if leaving the MAP key blank in the module the map still loads.
I did ensure I cleared all cached/template files after each map key change.

So is this a bug?

billimek,

I'm looking at your map and trying to figure out how you linked all your pushpins to the various albums you have. I'm obviously missing a few steps and have not grasped the concept of this mapping. Other than the map album I created the rest of my G2 uses Matrix theme. Appreciate any hints.

Thanks!

swordfish: For what it's worth, I found these two sites very useful for finding the latitude and longitude of the cities I've taken photos in. Just note that they give you (latitude,longitude) when you need (longitude,latitude) for Google Maps (see here).

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

Thanks for the help, that error is gone now. Going to the map page now brings up a blank window, debugging didn't reveal any obvious problems.
It just looks like a normal gallery page with the words "Photo Map" and that's it.

Another question: Now that I can include the google key in the admin page for the module, do I still need the custom field? When I registered for the google API I registered it to http://mysite/gallery2 rather than a specific folder within the site, could this be the cause?

If you are using the theme version 1.0.0 or higher you don't need the custom field for the api key.

Steve Lineberry

What about creating an image block version of the map module too? Of course it would have to be relatively small (like 150px wide) but it would be nice if, for example, in an album of pictures from a trip to Japan to have a little mini-map on the left pointing out Kyoto in a sub-album of Kyoto pictures.

There were quite a few discussions on the GoogleMaps-API group about maps only showing markers at a certain degree of magnification too. This could work to help maintain only one map for all galleries but show different markers based on the center and magnification of the mini map.

Hi all ... loving this thread, got me really excited and I'm trying to install now for my gallery but boo hoo ... my ISP (great as they are) uses Microsoft Server so I'm having trouble figuring out how I get a nice friendly directory to feed the Google API Key generator ... I assume I can't use the ugly URL that Gallery2 is making? Or is this just impossible with IIS? (Please ... I hope not!)

Cheers
Mike

P.S. Ok so there is ISAPI_rewrite for IIS ... but I saw the post http://gallery.menalto.com/node/32793 and there was no conclusion whether this works or not ... anyone know if G2 can do URL re-writes with ISAPI_rewrite on M$ IIS? Ah ... hang on now I just found this too ... http://gallery.menalto.com/node/11275 ... lesson here is always search the forums for the answer before posting!

If anyone has some free time, I'd appreciate any help regarding my annoying problem. Attached is the source to my map page, and if anyone can see something wrong with it, please let me know.

Thanks

***FIXED*** Ah nevermind, My Map theme was in the wrong place due to carelessness. Thanks

File removed

And yes, I have the same API issue as the poster below me.

... strangley if I check he show descriptions box it fails totally and I just get the error box and a blank page when I check OK. Also, either way I am unable to set a highlight for the album Travel Places ... is this possible even though it has the map theme?

must go to bed ... zzzzzzz

Mike

i'v had the same prob.

Put your google javascript in a function. Call this function just below it self with window.onload = googlemap;

like:

<div style="border: 1px solid rgb(0, 0, 0); width: 500px; height: 400px;" id="map"></div>

<script type="text/javascript">
    //<![CDATA[
  function googlemap(){
     if (GBrowserIsCompatible()) {
      var map = new GMap(document.getElementById("map"));
      map.centerAndZoom(new GPoint(8.844938278198242, 47.54663986006874), 13);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl());
      var marker = new GMarker(new GPoint(8.844938278198242, 47.54663986006874));
      map.addOverlay(marker);     
      var html = "your text <br /> blablbabla ";
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
       });
     }
   }
  window.onload = googlemap;
    //]]>
</script>

may it helps!!

regards roman

Update on my long drawn out dilemma...
Map loads fine when G2 is NOT embedded - http://my.site/gallery2/main.php?g2_view=map:ShowMap

When G2 embedded w/ WordPress - http://my.site/blog/wp-gallery2.php?g2_view=map:ShowMap
I get the operation aborted error in IE. Works fine in Firefox.

Any ideas on a workaround or fix?
If it helps anyone the below code is the bottom portion of my Google Map page (view page source)
using Firefox.

<div id="gsContent" class="gcBorder1">

    <h2>Photo Map</h2>

    <div id="map" class="gbBlock" style="width: 740px; height: 600px">
    
    </div>

</div><!-- #gsContent -->    </td>
  </tr>
</table>

      
      <div id="gsFooter">
        <a href="http://gallery.sourceforge.net"><img src="http://my.site/gallery2/images/gallery.gif" alt="Gallery 2.0" title="Gallery 2.0" style="border-style: none" width="80" height="15"/></a>
        <a href="http://my.site/gallery2/modules/core/data/g2-unpossible.mp3"><img src="http://my.site/gallery2/modules/core/data/g2-unpossible.png" alt="G2.0: Unpossible!" title="G2.0: Unpossible!" style="border-style: none" width="80" height="15"/></a>

      </div>
            </div>

        <script type="text/javascript">
  // <![CDATA[
  var search_SearchBlock_searchDefault = 'Search the Gallery';
  var search_SearchBlock_input = document.getElementById('search_SearchBlock').searchCriteria;
  function search_SearchBlock_checkForm() {
    var sc = search_SearchBlock_input.value;
    if (sc == searchDefault || sc == '') {
      alert('Please enter keywords to search.');
      return false;
    } else {
      document.getElementById('search_SearchBlock').submit();
    }
  }

  function search_SearchBlock_focus() {
    if (search_SearchBlock_input.value == search_SearchBlock_searchDefault) {
      search_SearchBlock_input.value = '';
    }
  }

  function search_SearchBlock_blur() {
    if (search_SearchBlock_input.value == '') {
      search_SearchBlock_input.value = search_SearchBlock_searchDefault;
    }
  }
  // ]]>
</script>
        <!-- This is mostly boilerplate code from Google.
            See: http://www.google.com/apis/maps/documentation/ -->
        <script type="text/javascript">
            //<![CDATA[

            var map = new GMap(document.getElementById("map"));
            map.addControl(new GSmallMapControl());
                            map.addControl(new GMapTypeControl());
                        map.setMapType(G_MAP_TYPE);
            map.centerAndZoom(new GPoint(-87.6244160,41.8806700), 15);
            var icon = new GIcon();
            icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
            icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
            icon.iconSize = new GSize(12, 20);
            icon.shadowSize = new GSize(22, 20);
            icon.iconAnchor = new GPoint(6, 20);
            icon.infoWindowAnchor = new GPoint(5, 1); 

            
            function createMarker(point,comment) {
              var marker = new GMarker(point, icon);
              map.addOverlay(marker);
              GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(comment);
              });
            }
            

            /* Loop over gallery items that have GPS coordinates
                and output code to add them to the map. */
                            createMarker(new GPoint(-121.272841,43.510031),''
                    +'<a href="http://my.site/blog/wp-gallery2.php?g2_view=core.ShowItem&amp;g2_itemId=8737">Sunriver, OR Vacation</a><br/>'
                    +'<a href="http://my.site/blog/wp-gallery2.php?g2_view=core.ShowItem&amp;g2_itemId=8737">'
                        +'<img src="http://my.site/d/8745-2/2005_Summer-Vacation.jpe" alt="Sunriver, OR Vacation"/>'
                    +'</a>'
                    +'<br/><b>Date:</b> 2005-08-17'
                                                        );
                            createMarker(new GPoint(-121.272841,43.510031),''
                    +'<a href="http://my.site/blog/wp-gallery2.php?g2_view=core.ShowItem&amp;g2_itemId=9065">DCP_3121</a><br/>'
                    +'<a href="http://my.site/blog/wp-gallery2.php?g2_view=core.ShowItem&amp;g2_itemId=9065">'
                        +'<img src="http://my.site/d/9067-2/DCP_3121.JPG" alt="DCP_3121"/>'
                    +'</a>'
                    +'<br/><b>Date:</b> 2005-08-11'
                                                        );
                            createMarker(new GPoint(-87.6244160,41.8806700),''
                    +'<a href="http://my.site/blog/wp-gallery2.php?g2_view=core.ShowItem&amp;g2_itemId=10101">Google Travel Map</a><br/>'
                    +'<a href="http://my.site/blog/wp-gallery2.php?g2_view=core.ShowItem&amp;g2_itemId=10101">'
                        +'<img src="http://my.site/d/10105-4/map.png" alt="Google Travel Map"/>'
                    +'</a>'
                    +'<br/><b>Date:</b> 2005-09-29'
                                                        );
            
            //]]>
        </script>
    

        
  </div><!-- begin footer -->


<div id="clearer">&nbsp;</div>
<div id="footer"> <!--div footer starts-->

<p class="credit"><!--11 queries-->Page created in 0.293 seconds and powered by <a href='http://gallery.menalto.com/' target='_blank'><strong>Gallery2</strong></a> | 
<a href='http://wordpress.org' target='_blank' title='Powered by WordPress, state-of-the-art semantic personal publishing platform.'><strong>WordPress</strong></a><br /> All Photos &copy; 2005 <strong> John Michaels</strong></a></p>

</div> <!--div footer ends-->
</div> <!--div rap ends-->

</body>
</html>

FYI, if you have any type of quotes in your albums title or comments you will get an error. I just spent the last 2 hours of my life trying to figure this out!