vinc/gmaps_items.html

## gmaps_items.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Items Map</title>

    <script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
    </script>
    <script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false">
    </script>

    <script type="text/javascript">
	// http://articles.sitepoint.com/article/google-maps-api-jquery
	var ItemMap = {
	    bounds: null,
	    map: null
	}
	ItemMap.init = function(selector, center, zoom) {
	    var map_options = {
		zoom: zoom,
		center: center,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	    }
	    this.map = new google.maps.Map($(selector)[0], map_options);
	    this.bounds = new google.maps.LatLngBounds();
	}
	ItemMap.draw = function(filename) {
	    $.get(filename, function(xml) {
		$(xml).find('item').each(function() {
		    var title = $(this).find('title').text();

		    // Create a new LatLng point
		    var lat = $(this).find('lat').text();
		    var lon = $(this).find('lon').text();
		    var point = new google.maps.LatLng(
			parseFloat(lat),
			parseFloat(lon)
		    );

		    // Extend the bounds to include the new point
		    ItemMap.bounds.extend(point);

		    // Add the marker itself
		    var marker = new google.maps.Marker({
			position: point,
			map: ItemMap.map
		    });

		    var circle = new google.maps.Circle({
			radius: 70*1000,
			center: point,
			map: ItemMap.map,
			fillColor: '#FF0000',
			fillOpacity: 0.2,
			strokeColor: '#FF0000',
			strokeOpacity: 0.6
		    });

		    // Create the tooltip and its text
		    var infoWindow = new google.maps.InfoWindow();
		    var html = title;

		    // Add a listener
		    google.maps.event.addListener(marker, 'click', function() {
			infoWindow.setContent(html);
			infoWindow.open(ItemMap.map, marker);
		    });
		    google.maps.event.addListener(circle, 'click', function() {
			infoWindow.setContent(html);
			infoWindow.open(ItemMap.map, circle);
		    });
		});

		// Fit the map around the markers we added:
		ItemMap.map.fitBounds(ItemMap.bounds);
	    });
	}
	$(document).ready(function() {
	    var center = new google.maps.LatLng(46.3, 3);
	    ItemMap.init('#map', center, 6);
	    ItemMap.draw('data.xml');
	});
    </script>
</head>
<body>
    <div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Items Map</title>

	<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
	</script>
	<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false">
	</script>

	<script type="text/javascript">
	// http://articles.sitepoint.com/article/google-maps-api-jquery
	var ItemMap = {
	bounds: null,
	map: null
	}
	ItemMap.init = function(selector, center, zoom) {
	var map_options = {
	zoom: zoom,
	center: center,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	this.map = new google.maps.Map($(selector)[0], map_options);
	this.bounds = new google.maps.LatLngBounds();
	}
	ItemMap.draw = function(filename) {
	$.get(filename, function(xml) {
	$(xml).find('item').each(function() {
	var title = $(this).find('title').text();

	// Create a new LatLng point
	var lat = $(this).find('lat').text();
	var lon = $(this).find('lon').text();
	var point = new google.maps.LatLng(
	parseFloat(lat),
	parseFloat(lon)
	);

	// Extend the bounds to include the new point
	ItemMap.bounds.extend(point);

	// Add the marker itself
	var marker = new google.maps.Marker({
	position: point,
	map: ItemMap.map
	});

	var circle = new google.maps.Circle({
	radius: 70*1000,
	center: point,
	map: ItemMap.map,
	fillColor: '#FF0000',
	fillOpacity: 0.2,
	strokeColor: '#FF0000',
	strokeOpacity: 0.6
	});

	// Create the tooltip and its text
	var infoWindow = new google.maps.InfoWindow();
	var html = title;

	// Add a listener
	google.maps.event.addListener(marker, 'click', function() {
	infoWindow.setContent(html);
	infoWindow.open(ItemMap.map, marker);
	});
	google.maps.event.addListener(circle, 'click', function() {
	infoWindow.setContent(html);
	infoWindow.open(ItemMap.map, circle);
	});
	});

	// Fit the map around the markers we added:
	ItemMap.map.fitBounds(ItemMap.bounds);
	});
	}
	$(document).ready(function() {
	var center = new google.maps.LatLng(46.3, 3);
	ItemMap.init('#map', center, 6);
	ItemMap.draw('data.xml');
	});
	</script>
	</head>
	<body>
	<div id="map" style="width: 800px; height: 600px"></div>
	</body>
	</html>