Test of Google Map API (testgmap.js) - JavaScript Snipplr Social Repository

Revision: 482

at July 18, 2006 10:38 by tomute

Updated Code

// Main
function load() {
	// Check compatibility
	if (GBrowserIsCompatible()) {
		gmap2 = new GMap2(document.getElementById("map"));
		gmap2.setCenter(new GLatLng(37.4419, -122.1419), 13);
		
		// Adding controls to the map
		gmap2.addControl(new GLargeMapControl());
		gmap2.addControl(new GMapTypeControl());
		
		// Register an event listener to display the latitude and longitude
		GEvent.addListener(gmap2, "moveend", function() {
			var center = gmap2.getCenter();
			document.getElementById("gmessage").innerHTML = center.toString();
		});
	} else {
		var map = document.getElementById("map");
		map.innerHTML = "You cannot use this browser.<br />";
	}
}

// Move map
function moveMap() {
	window.setTimeout(
		function() { gmap2.panTo(new GLatLng(37.4569, -122.1569)); },
		1000
	);
}

// Opening an info window
function displayInfoWindow() {
	gmap2.openInfoWindow(gmap2.getCenter(), document.createTextNode("Hello, world"));
}

// Opening an info window with HTML
function displayInfoWindowHtml() {
	var msg = "<div style='width:250px'><a href='http://www.yahoo.com/'><b>Yahoo!.com</b></a></div>";
	gmap2.openInfoWindowHtml(gmap2.getCenter(), msg);
}

// Displays a polyline
// you must include the VML namespace and CSS in your HTML document
// to view polylines in IE.
function mapOverlaysPolyline() {
	var points = [];
	points.push(new GLatLng(37.4219, -122.1119));
	points.push(new GLatLng(37.4419, -122.1619));
	points.push(new GLatLng(37.4719, -122.1319));
	gmap2.addOverlay(new GPolyline(points, '#000000', 5, 0.7));
}

// Creating icon
function mapOverlaysIcon() {
	var icon = new GIcon();
	icon.image = "http://xoops.ikinuku.com/images/gmap/yazirusi.png";
	icon.shadow = "http://xoops.ikinuku.com/images/gmap/shadow.png";
	icon.iconSize = new GSize(20, 34);
	icon.shadowSize = new GSize(37, 34);
	icon.iconAnchor = new GPoint(20, 34);
	
	var marker = new GMarker(gmap2.getCenter(), icon);
	gmap2.addOverlay(marker);
}

// Creating icon which are always shown at center of the map
function mapOverlaysCrossIcon() {
	var icon = new GIcon();
	icon.image = "http://xoops.ikinuku.com/images/gmap/cross.png";
	icon.iconSize = new GSize(100, 100);
	icon.iconAnchor = new GPoint(50, 50);
	
	var marker = new GMarker(gmap2.getCenter(), icon);
	gmap2.addOverlay(marker);
	
	GEvent.addListener(gmap2, "move", function() {
		gmap2.clearOverlays();
		marker = new GMarker(gmap2.getCenter(), icon);
		gmap2.addOverlay(marker);
	});
}

// Display info windows above marker
// This uses simple api to show a thumbnail of web page.
function mapOverlaysMarker1() {
	var point = new GLatLng(37.4285, -122.1293);
	var marker = new GMarker(point);
	gmap2.addOverlay(marker);
	
	var html = '<div style="width:300px"><a href="http://blog.ikinuku.com/">'
			+ '<img src="http://img.simpleapi.net/small/http://blog.ikinuku.com/"'
			+ ' alt="" width="128" height="128" hspace="4" vspace="4" align="left" border="0"></a><br />'
			+ '<a href="http://blog.ikinuku.com/"><b>My Blog</b></a></div>';
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
}

// Display tabbed info windows Above marker
function mapOverlaysMarker2withTab() {
	var point = new GLatLng(37.4348, -122.1568);
	var marker = new GMarker(point);
	gmap2.addOverlay(marker);
	
	var img = new Image();
	img.src = 'http://xoops.ikinuku.com/images/gmap/daibutu01.gif';
	
	var html = '<div style="width:300px"><img src="' + img.src + '" align="left"/>'
			+ '<b>[[Display image test]]</b><br />'
			+ 'Sample image<br />'
			+ 'Big Buddha</div>';
	
	var infoTabs = [
		new GInfoWindowTab("Tab 1", html),
		new GInfoWindowTab("Tab 2", "Tab test")
	];
	
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowTabsHtml(infoTabs);
	});
}

// Display info windows with music link above markers
function mapOverlaysMarker3withPodcast() {
	var point = new GLatLng(37.4356, -122.1380);
	var marker = new GMarker(point);
	gmap2.addOverlay(marker);
	
	var html = '<div style="width:300px"><a href="http://mt.ikinuku.com/podcast/test.mp3">Test music</a></div>';
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
}

// Download a csv file by using GDownloadUrl class
function downloadCsvCoordinateFile() {
	GDownloadUrl('http://xoops.ikinuku.com/misc/ajax/sample.csv', function(data, responseCode) {
		var rows = data.split('\n');
		for (var i = 0; i < rows.length; i++) {
			var lat = rows[i].split(',')[0];
			var lon = rows[i].split(',')[1];
			var point = new GLatLng(lat, lon);
			var marker = new GMarker(point);
			gmap2.addOverlay(marker);
			
			var music = rows[i].split(',')[2];
			var title = rows[i].split(',')[3];
			createInfoWindow(marker, music, title);
		}
	});
}

// Click handling
function mapOverlaysMarkerShowHide() {
	GEvent.addListener(gmap2, "click", function(overlay, point) {
		if (overlay) {
			gmap2.removeOverlay(overlay);
		} else {
			gmap2.addOverlay(new GMarker(point));
		}
	});
}

// Clear all overlays
function clearOverlays() {
	gmap2.clearOverlays();
	GEvent.clearListeners(gmap2, "click");
	GEvent.clearListeners(gmap2, "move");
}

Revision: 481

at July 15, 2006 17:00 by tomute

Initial Code

// Main
function load() {
	// Check compatibility
	if (GBrowserIsCompatible()) {
		gmap2 = new GMap2(document.getElementById("map"));
		gmap2.setCenter(new GLatLng(37.4419, -122.1419), 13);
		
		// Adding controls to the map
		gmap2.addControl(new GLargeMapControl());
		gmap2.addControl(new GMapTypeControl());
		
		// Register an event listener to display the latitude and longitude
		GEvent.addListener(gmap2, "moveend", function() {
			var center = gmap2.getCenter();
			document.getElementById("gmessage").innerHTML = center.toString();
		});
	} else {
		var map = document.getElementById("map");
		map.innerHTML = "You cannot use this browser.<br />";
	}
}

// Move map
function moveMap() {
	window.setTimeout(
		function() { gmap2.panTo(new GLatLng(37.4569, -122.1569)); },
		1000
	);
}

// Opening an info window
function displayInfoWindow() {
	gmap2.openInfoWindow(gmap2.getCenter(), document.createTextNode("Hello, world"));
}

// Opening an info window with HTML
function displayInfoWindowHtml() {
	var msg = "<div style='width:250px'><a href='http://www.yahoo.com/'><b>Yahoo!.com</b></a></div>";
	gmap2.openInfoWindowHtml(gmap2.getCenter(), msg);
}

// Displays a polyline
// you must include the VML namespace and CSS in your HTML document
// to view polylines in IE.
function mapOverlaysPolyline() {
	var points = [];
	points.push(new GLatLng(37.4219, -122.1119));
	points.push(new GLatLng(37.4419, -122.1619));
	points.push(new GLatLng(37.4719, -122.1319));
	gmap2.addOverlay(new GPolyline(points, '#000000', 5, 0.7));
}

// Creating icon
function mapOverlaysIcon() {
	var icon = new GIcon();
	icon.image = "http://xoops.ikinuku.com/images/gmap/yazirusi.png";
	icon.shadow = "http://xoops.ikinuku.com/images/gmap/shadow.png";
	icon.iconSize = new GSize(20, 34);
	icon.shadowSize = new GSize(37, 34);
	icon.iconAnchor = new GPoint(20, 34);
	
	var marker = new GMarker(gmap2.getCenter(), icon);
	gmap2.addOverlay(marker);
}

// Creating icon which are always shown at center of the map
function mapOverlaysCrossIcon() {
	var icon = new GIcon();
	icon.image = "http://xoops.ikinuku.com/images/gmap/cross.png";
	icon.iconSize = new GSize(100, 100);
	icon.iconAnchor = new GPoint(50, 50);
	
	var marker = new GMarker(gmap2.getCenter(), icon);
	gmap2.addOverlay(marker);
	
	GEvent.addListener(gmap2, "move", function() {
		gmap2.clearOverlays();
		marker = new GMarker(gmap2.getCenter(), icon);
		gmap2.addOverlay(marker);
	});
}

// Display info windows above marker
// This uses simple api to show a thumbnail of web page.
function mapOverlaysMarker1() {
	var point = new GLatLng(37.4285, -122.1293);
	var marker = new GMarker(point);
	gmap2.addOverlay(marker);
	
	var html = '<div style="width:300px"><a href="http://blog.ikinuku.com/">'
			+ '<img src="http://img.simpleapi.net/small/http://blog.ikinuku.com/"'
			+ ' alt="" width="128" height="128" hspace="4" vspace="4" align="left" border="0"></a><br />'
			+ '<a href="http://blog.ikinuku.com/"><b>My Blog</b></a></div>';
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
}

// Display tabbed info windows Above marker
function mapOverlaysMarker2withTab() {
	var point = new GLatLng(37.4348, -122.1568);
	var marker = new GMarker(point);
	gmap2.addOverlay(marker);
	
	var img = new Image();
	img.src = 'http://xoops.ikinuku.com/images/gmap/daibutu01.gif';
	
	var html = '<div style="width:300px"><img src="' + img.src + '" align="left"/>'
			+ '<b>[[Display image test]]</b><br />'
			+ 'Sample image<br />'
			+ 'Big Buddha</div>';
	
	var infoTabs = [
		new GInfoWindowTab("Tab 1", html),
		new GInfoWindowTab("Tab 2", "Tab test")
	];
	
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowTabsHtml(infoTabs);
	});
}

// Display info windows with music link above markers
function mapOverlaysMarker3withPodcast() {
	var point = new GLatLng(37.4356, -122.1380);
	var marker = new GMarker(point);
	gmap2.addOverlay(marker);
	
	var html = '<div style="width:300px"><a href="http://mt.ikinuku.com/podcast/test.mp3">Test music</a></div>';
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
}

// Click handling
function mapOverlaysMarkerShowHide() {
	GEvent.addListener(gmap2, "click", function(overlay, point) {
		if (overlay) {
			gmap2.removeOverlay(overlay);
		} else {
			gmap2.addOverlay(new GMarker(point));
		}
	});
}

// Clear all overlays
function clearOverlays() {
	gmap2.clearOverlays();
	GEvent.clearListeners(gmap2, "click");
	GEvent.clearListeners(gmap2, "move");
}

Initial URL

http://mt.ikinuku.com/archives/2006/07/google_map_1.html

Initial Description

This is test script of Google Map API.
How to use this script is as follows.
&lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
v\:* {
	behavior:url(#default#VML);
}
&lt;/style&gt;
&lt;script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXXX" charset="UTF-8"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://xxxxx/testgmap.js" charset="UTF-8"&gt;&lt;/script&gt;
&lt;script&gt;
window.onload = load;
window.unload = GUnload;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table border=1&gt;&lt;tr&gt;&lt;td&gt;&lt;div id="map" style="width: 700px; height: 600px"&gt;&lt;/div&gt;
&lt;div id="gmessage"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;
&lt;a href="javascript:moveMap()"&gt;Test 1&lt;/a&gt;&lt;br /&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/body&gt;

Initial Title

Test of Google Map API (testgmap.js)

Initial Tags

javascript

Initial Language

JavaScript

Choose a language for easy browsing: