My photos on a Google map

[Speedie]

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. I learned how to do it with this article.

[thebrewer]

Very nice! I see a new project ahead.

Rich

[Nidz]

Hey I wanna do this.

[Nidz]

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]

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><br /><font face='Arial' size='2'><a href='http://www.mgpages.co.uk/digitalnature/tyneham.php'>Tyneham</a>, Dorset - England's<br />lost village.</font>";
    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><br /><font face='Arial' size='2'><a href='http://www.mgpages.co.uk/digitalnature/weymouth.php'>Weymouth & Portland</a>, Dorset.</font>";
    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><br /><font face='Arial' size='2'><a href='http://www.mgpages.co.uk/digitalnature/bedfont.php'>Bedfont Lakes Country Park</a>,<br />Middlesex.</font>";
    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><br /><font face='Arial' size='2'><a href='http://www.mgpages.co.uk/digitalnature/hastings.php'>Hastings Country Park</a>,<br />East Sussex.</font>";
    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><br /><font face='Arial' size='2'><a href='http://www.mgpages.co.uk/digitalnature/scot-borders.php'>Scottish Borders</a></font>";
    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><br /><font face='Arial' size='2'><a href='http://www.mgpages.co.uk/digitalnature/devon.php'>East Devon</a></font>";
    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><br /><font face='Arial' size='2'><a href='http://www.mgpages.co.uk/digitalnature/leeds-castle.php'>Leeds Castle</a>, Kent</font>";
    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><br /><font face='Arial' size='2'><a href='http://www.mgpages.co.uk/digitalnature/sound-mirrors.php'>Sound Mirrors</a>, Kent</font>";
    var marker = createInfoMarker(point, address);
	 map.addOverlay(marker);


    //]]>
    </script>

[Crypto]

very cool. Thanks for sharing

[TSEE]

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

[tonytony]

Originally Posted by Speedie

The map is here. I learned how to do it with this article.

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

Cheers,
Antonio