My photos on a Google map [Archive] - Canon Digital Photography Forums

Speedie

12th of September 2005 (Mon), 05:29

I just finished integrating a Google map of the UK on my photo website. Clicking on a marker on the map brings up a sample thumbnail image, clicking on the image goes to the gallery for that location. I don't have many locations yet but they will increase over time. The map is here (http://www.mgpages.co.uk/digitalnature/map-uk.php). I learned how to do it with this article (http://www.developer.com/java/web/article.php/10935_3528381_1).

thebrewer

12th of September 2005 (Mon), 22:04

Very nice! I see a new project ahead.

Rich

Nidz

12th of September 2005 (Mon), 23:28

Hey I wanna do this.

Nidz

16th of September 2005 (Fri), 22:01

I gave it a go.. You will need some HTML knowledge.. I gave it a try and it's not as easy as it looks..

Speedie

17th of September 2005 (Sat), 05:56

If it's any help, here's the code that generates my map - you could maybe modify it to suit. You can see the different sections for each location (Tyneham, Weymouth etc.)

<div id="map" style="margin-left: auto; margin-right: auto; width: 600px; height: 800px;"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.centerAndZoom(new GPoint(-4, 55), 11);

// Create the marker and corresponding information window
function createInfoMarker(point, address) {

var marker = new GMarker(point);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml(address);
}
);
return marker;
}

// Tyneham
var point = new GPoint(-2.1728, 50.6209);
address = "<a href='http://www.mgpages.co.uk/digitalnature/tyneham.php'><img border='0' src='http://www.mgpages.co.uk/digitalnature/tyneham/fireplaces-thumb.jpg'</a> <a href='http://www.mgpages.co.uk/digitalnature/tyneham.php'>Tyneham</a>, Dorset - England's lost village.";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

// Weymouth
var point = new GPoint(-2.4591, 50.6138);
address = "<a href='http://www.mgpages.co.uk/digitalnature/weymouth.php'><img border='0' src='http://www.mgpages.co.uk/digitalnature/weymouth/weymouth014-thumb.jpg'</a> <a href='http://www.mgpages.co.uk/digitalnature/weymouth.php'>Weymouth & Portland</a>, Dorset.";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

// Bedfont Lakes
var point = new GPoint(-0.4543, 51.4426);
address = "<a href='http://www.mgpages.co.uk/digitalnature/bedfont.php'><img border='0' src='http://www.mgpages.co.uk/digitalnature/bedfont-lakes/bedfont-lakes023-thumb.jpg'</a> <a href='http://www.mgpages.co.uk/digitalnature/bedfont.php'>Bedfont Lakes Country Park</a>, Middlesex.";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

// Hastings Country Park
var point = new GPoint(0.6324, 50.8674);
address = "<a href='http://www.mgpages.co.uk/digitalnature/hastings.php'><img border='0' src='http://www.mgpages.co.uk/digitalnature/hastings/hastings041-thumb.jpg'</a> <a href='http://www.mgpages.co.uk/digitalnature/hastings.php'>Hastings Country Park</a>, East Sussex.";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

// Scottish Borders
var point = new GPoint(-2.6576, 55.3727);
address = "<a href='http://www.mgpages.co.uk/digitalnature/scot-borders.php'><img border='0' src='http://www.mgpages.co.uk/digitalnature/scottish-borders/Scot_Borders_IMG_0062_thumb.JPG'</a> <a href='http://www.mgpages.co.uk/digitalnature/scot-borders.php'>Scottish Borders</a>";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

// East Devon
var point = new GPoint(-3.4133, 50.5662);
address = "<a href='http://www.mgpages.co.uk/digitalnature/devon.php'><img border='0' src='http://www.mgpages.co.uk/digitalnature/devon/devon006-thumb.jpg'</a> <a href='http://www.mgpages.co.uk/digitalnature/devon.php'>East Devon</a>";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

// Leeds Castle
var point = new GPoint(0.6253, 51.2489);
address = "<a href='http://www.mgpages.co.uk/digitalnature/leeds-castle.php'><img border='0' src='http://www.mgpages.co.uk/digitalnature/leeds-castle/IMG_0567_thumb.JPG'</a> <a href='http://www.mgpages.co.uk/digitalnature/leeds-castle.php'>Leeds Castle</a>, Kent";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

// Sound Mirrors
var point = new GPoint(0.9520, 50.9572);
address = "<a href='http://www.mgpages.co.uk/digitalnature/sound-mirrors.php'><img border='0' src='http://www.mgpages.co.uk/digitalnature/sound-mirrors/sound_mirrors%20013_thumb.jpg'</a> <a href='http://www.mgpages.co.uk/digitalnature/sound-mirrors.php'>Sound Mirrors</a>, Kent";
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

//]]>
</script>

Crypto

17th of September 2005 (Sat), 06:37

very cool. Thanks for sharing

TSEE

17th of September 2005 (Sat), 09:44

Darn that's neat. I like it a lot. Neat "portfolio" idea for travel photographers. Nice, very nice.

tonytony

17th of September 2005 (Sat), 14:30

The map is here (http://www.mgpages.co.uk/digitalnature/map-uk.php). I learned how to do it with this article (http://www.developer.com/java/web/article.php/10935_3528381_1).

Really cool and thank-you for sharing. I am sure it will get popular soon :D

Cheers,
Antonio