Sunday, August 7, 2005

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>
Bookmark and Share Posted by at August 7, 2005 9:00 PM to Distances
Comments

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.

Posted by: Prithwish Biswas at August 17, 2005 3:35 PM

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.

Posted by: Derek at August 17, 2005 4:50 PM

i dont know how to use it because this is just my first time to log in earthgoogle.com i just wish to see the polace of sacramento because it is where my father lived...

Posted by: mary sheila may sayson at August 26, 2005 1:34 AM

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.

Posted by: Derek at August 26, 2005 8:11 AM

it's good

Posted by: jim at September 5, 2005 10:31 AM