Google Maps EZ

With
Google Maps EZ
, you can embed a marked

map
with ease and include links, text and images (all via HTML) in the
captions associated with each marker (via).


EXTENT

A

Alliance Bank Stadium


B

Alliance Bank Stadium

We
started out in right field,
but as the sun set, it was too
much to bear. Couldn’t
see into the sun. So we switched seats.
Not like it was a
packed stadium that night.
Here’s the perspective from our first
seats at around 6:30 p.m.


C

Alliance Bank Stadium


D

Alliance Bank Stadium

When I first tried it out earlier today, I was having trouble with the EXTENT
definitions.  With EXTENT, you can establish the scale and map type
(hybrid, map or satellite), thereby giving the map a stable look. 
The fancy dropcaps feature that I added to the blog a few weeks ago were interfering with the
"E"–grabbing it away from "XTENT" and clouding up the whole process.  With
that resolved, I’ve tried to push just a bit farther to mark the photographed
spaces at a Syracuse Sky Chiefs game in late July (could be anything though). 
Basically, I wanted to integrate the Flickr image sources for the thumbnail
views with links to the larger versions of the photos.  Click on the each of the markers to see what I mean. You can navigate the map with the control buttons, too. In concept, it’s similar to geo-tagging in Flickr, except that it’s localized, speedier and needs
only to work with the images you involve.  I haven’t had much success with
geo-tagging, actually; even after I’ve tagged photos, they only sporadically
cycle into Mappr, and the KML bit with Google Earth doesn’t notice them after a
week.  Always possible that I’m doing something wrong, of course. 

Like some of the other stuff I’ve been casually piecing together this summer,
I can imagine EZ and Flickr
working with documentary projects as well as just about any kind of spatial or
space-conscious writing (especially w/ a local
photo-set).  In many ways, the combination of Google Maps EZ and Flickr is
an extension of the
photographemic map I
tried out in early June, but using Google Maps would make the project easy to
expand, to add to over time.  In this sample, I’ve lettered the markers (lettering can run A through J), but I
only tried to add a caption to the image associated with B.  I didn’t have
any luck getting the text to wrap in the bubble, nor could I get the image to
align differently (right, for example).  But that’s small stuff, really. 

Ready to try it out?  You’ll need a
Google Maps API key (it’s free, you know).  For the rest, you ought to follow the tutorial posted by Chris
Houser, the programmer who devised the javascript and who is generally hosting
it for widespread use (and yes, I’m doubly impressed bc Chris responded
helpfully to an email I sent earlier).  Worth noting, too, that I actually
used two different API keys–one for my main index and one for my ../archives/
directory.  With two API keys, the map will show on the weblog’s index and
on all of the various archives.  I’m dropping the code in here your for
reference.  It’s pretty much the same as what Chris has in the tutorial.

Into the page or template <head>:

<script src="http://maps.google.com/maps?file=api&v=1&key=YOURAPIKEYHERE"
type="text/javascript"></script>
<script src="http://bluweb.com/chouser/gmapez/gmapez.js" type="text/javascript"></script>

And into the <body>:

<div class="GMapEZ GSmallMapControl GSmallMapTypeControl"
style="width: 300px; height: 300px;">
<a href="http://maps.google.com/maps?ll=43.079256,-76.165402&spn=0.002844,0.010131&t=h&hl=en">
EXTENT </a>
<a href="http://maps.google.com/maps?ll=43.079029,-76.164715&spn=0.002844,0.010131&t=k&hl=en">
A
</a>
<div>
<a href="http://www.flickr.com/photos/33032196@N00/29733482/" target="blank"
title="Photo Sharing"><img src="http://photos23.flickr.com/29733482_808c36d52a_t.jpg"
width="100" height="72" alt="Alliance Bank Stadium" /></a>
</div>
<a href="http://maps.google.com/maps?ll=43.079695,-76.165863&spn=0.002844,0.010131&t=k&hl=en">
B
</a>
<div>
<a href="http://www.flickr.com/photos/33032196@N00/29733457/" target="blank"
title="Photo Sharing"><img src="http://photos21.flickr.com/29733457_987c98767d_t.jpg"
width="100" height="75" alt="Alliance Bank Stadium" align="right" /></a>We
started out in right field, but as the sun set, it was two much to bear.
Couldn’t see into the sun. So we switched seats. Not like it was a
packed stadium that night. Here’s the perspective from our first seats at
around 6:30 p.m.
</div>
<a href="http://maps.google.com/maps?ll=43.078966,-76.165338&spn=0.002844,0.010131&t=k&hl=en">
C
</a>
<div>
<a href="http://www.flickr.com/photos/33032196@N00/29733464/" target="blank"
title="Photo Sharing"><img src="http://photos21.flickr.com/29733464_110bb3e70c_t.jpg"
width="100" height="51" alt="Alliance Bank Stadium" /></a>
</div>
<a href="http://maps.google.com/maps?ll=43.079272,-76.164951&spn=0.002844,0.010131&t=k&hl=en">
D
</a>
<div>
<a href="http://www.flickr.com/photos/33032196@N00/29733470/" target="blank"
title="Photo Sharing"><img src="http://photos22.flickr.com/29733470_998985366d_t.jpg"
width="100" height="53" alt="Alliance Bank Stadium" /></a>
</div>
</div>

5 Comments

  1. I am going to display google API map with multiple markers by a different icon and I also want the list of links for these tags. If it’s possible, please let me get that code. I need all golf course communities in San Diego. If I can get it it will be really help full for me and my team.

  2. You should be able to build the code yourself by locating the golf courses you want using Google Maps to find the mark and incorporating the URLs in the code posted here. Beyond that, I’m no golfer, and I’ve never been to San Diego, so I’ve reached the limit of my usefullness in both of those areas. As for the custom markers, I’m sure it’s possible, but the jave developer would be the person to solicit for that kind of thing. Here, I’m only using the basic markers, and as far as I know, they only run A-J.

  3. I’m not sure where that is. If it’s in Sacramento, California, it should be visible from maps.google.com. If it’s in another Sacramento, the view from above might not be as detailed.

Comments are closed.