mariusneo/markers.html

## markers.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Adding Markers to the Google Map</title>
<link
	href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
	rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'},{'name':'jquery','version':'1.4.2'}]}"></script>
<script type="text/javascript">
	var map;
	var profileMarkers = [];

	function clearMarkers() {
		if (profileMarkers) {
		    for (i in profileMarkers) {
		    	profileMarkers[i].setMap(null);
		    }
		}
	}

	function initialize() {
		var newyorkLocation = new google.maps.LatLng(40.708, -73.99);
		var myOptions = {
			zoom : 15,
			center : newyorkLocation,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};

		map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);

		clearMarkers();
		var url = 'http://localhost:8080/mapsearch/rest/placemarks';
		$.getJSON(url, addResults);

	}

	function showInContentWindow(text) {
		var sidediv = document.getElementById('content_window');
		sidediv.innerHTML = text;
	}

	function addResults(json) {
		if (json.results && json.results.length) {
			for (var i = 0, placemark; placemark = json.results[i]; i++) {
				var pos = new google.maps.LatLng(parseFloat(placemark.point.latitude, 10),
			            parseFloat(placemark.point.longitude, 10));
				var marker = new google.maps.Marker({
			          map: map,
			          title : placemark.name,
			          position: pos
			     	});

				attachEvent(marker);

			    profileMarkers.push(marker);
			}
		}
	}


	function attachEvent(marker){
		google.maps.event.addListener(marker, 'click', function(){
			var text = marker.getTitle();
			showInContentWindow(text);
		});
	}

</script>
</head>
<body onload="initialize()">
	<div id="map_canvas" style="width: 79%; height: 100%; float: left"></div>
	<div id="content_window" style="width: 19%; height: 100%; float: left"></div>
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Adding Markers to the Google Map</title>
	<link
	href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
	rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="//www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'},{'name':'jquery','version':'1.4.2'}]}"></script>
	<script type="text/javascript">
	var map;
	var profileMarkers = [];

	function clearMarkers() {
	if (profileMarkers) {
	for (i in profileMarkers) {
	profileMarkers[i].setMap(null);
	}
	}
	}

	function initialize() {
	var newyorkLocation = new google.maps.LatLng(40.708, -73.99);
	var myOptions = {
	zoom : 15,
	center : newyorkLocation,
	mapTypeId : google.maps.MapTypeId.ROADMAP
	};

	map = new google.maps.Map(document.getElementById("map_canvas"),
	myOptions);

	clearMarkers();
	var url = 'http://localhost:8080/mapsearch/rest/placemarks';
	$.getJSON(url, addResults);

	}

	function showInContentWindow(text) {
	var sidediv = document.getElementById('content_window');
	sidediv.innerHTML = text;
	}

	function addResults(json) {
	if (json.results && json.results.length) {
	for (var i = 0, placemark; placemark = json.results[i]; i++) {
	var pos = new google.maps.LatLng(parseFloat(placemark.point.latitude, 10),
	parseFloat(placemark.point.longitude, 10));
	var marker = new google.maps.Marker({
	map: map,
	title : placemark.name,
	position: pos
	});

	attachEvent(marker);

	profileMarkers.push(marker);
	}
	}
	}


	function attachEvent(marker){
	google.maps.event.addListener(marker, 'click', function(){
	var text = marker.getTitle();
	showInContentWindow(text);
	});
	}

	</script>
	</head>
	<body onload="initialize()">
	<div id="map_canvas" style="width: 79%; height: 100%; float: left"></div>
	<div id="content_window" style="width: 19%; height: 100%; float: left"></div>
	</body>
	</html>