Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/outsourc/public_html/connection.php on line 2
Using Google Maps With a Photo Album:: :: Articles News Information

Offshore Outsourcing will help you to reduce cost and enhance your productivity

Home About Us Services Partners Articles Classifieds Directory Contact Us
Computers Networks
Operating Systems
Data Storage
Software Engineering
Information Technology
Online Rights - Law
IT Outsourcing
Business Consulting
Finance & Accounting
Graphic Design
Web Services
Search Engine Optimization
Open Source

Using Google Maps With a Photo Album

Essentially, it's a map of all the albums I've got pictures for, mapped out all over the world, with little links at the top to zoom into specific areas where there's some detail to be seen. :)

It uses Google Maps API for the map drawing, and otherwise is a pretty simple little site that links into my simple (yet elegant?) photo gallery I made a few weeks before I added the maps. I had to get the lat/long for all the places I've taken pictures by using If you double click a spot on Google Maps, it'll zoom and center on that spot. Then by copying and pasting the "Link to this page" link, you can see the lat/long of where you double clicked... for some random double click in Montana gives me:,-109.599609&spn=20.043173,40.78125&om=1

There's your latitude and longitude. There'd be many ways to tag my albums with these, but for speed (and potential digg effect), I just chose a flat file, written out like this:

52.372874 4.894753  2003_08_11_europe/02_paris 48.857261 2.344551  
2003_08_11_europe/03_toulouse 43.603267 1.442986  2003_08_11_europe/04_carcassonne 
43.211682 2.355537  2003_08_11_europe/05_sete 43.40405 
3.69175  2003_08_11_europe/06_agde 43.309191 3.473053  .. etc
Then here are the important little pieces of map.php:
$locations = array();  
$lines = file("locs_flat_file");  
$count = 0;  foreach ($lines as $line) 
		list($gallery,$lat,$long) = split(" ", $line);       
		$long = trim($long);       
	   if (!array_key_exists($lat . "," . $long,$locations)
	) {                  $locations[$lat . "," . $long] = array();          }          
array_push($locations[$lat . "," . $long],$gallery);  }  
foreach ($locations as $latlong => $galleries) {          
$size = count($galleries);          
$count = $count + 1;          
print "var marker$count = new GMarker(new GLatLng($latlong));\n";          
$tooltip = "<div style='width: 205px; height: " . (55 * $size) . ";'>";          
foreach ($galleries as $gallery) {                  
$tooltip = $tooltip . "<div style='width: 205px; height: 55px;'><table width='100%'>
<tr><td valign='middle'><a href='/g/$gallery'>";
$tooltip = $tooltip . "<img border='2' src='images/$gallery/.thumb50'></a>
</td><td align='center' valign='middle'>
<font size='-2'>";  		
$tooltip = $tooltip . str_replace("_"," ",$gallery) . "</font></td></tr></table></div>";}
$tooltip = $tooltip . "</div>";          
print "GEvent.addListener(marker$count, 'click', function() { 
marker$count.openInfoWindowHtml(\"$tooltip\"); });\n";          
print "map.addOverlay(marker$count);\n";  }
Basically what's happen here, is that it's reading all the albums in with the lat and long, then the second foreach loop is checking for multiple albums having the
same location, and then writing out a little <div> for the tool tip for when you click on the marker, which has a pre-generated thumbnail and
the album title for all albums at that pin. Neat, eh?