/ Published in: JavaScript
This is test script of Google Map API.
How to use this script is as follows.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=XXXXX" charset="UTF-8"></script>
<script type="text/javascript" src="http://xxxxx/testgmap.js" charset="UTF-8"></script>
<script>
window.onload = load;
window.unload = GUnload;
</script>
</head>
<body>
<table border=1><tr><td><div id="map" style="width: 700px; height: 600px"></div>
<div id="gmessage"></div></td><td>
<a href="javascript:moveMap()">Test 1</a><br />
</td></tr></table>
</body>
How to use this script is as follows.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=XXXXX" charset="UTF-8"></script>
<script type="text/javascript" src="http://xxxxx/testgmap.js" charset="UTF-8"></script>
<script>
window.onload = load;
window.unload = GUnload;
</script>
</head>
<body>
<table border=1><tr><td><div id="map" style="width: 700px; height: 600px"></div>
<div id="gmessage"></div></td><td>
<a href="javascript:moveMap()">Test 1</a><br />
</td></tr></table>
</body>
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
// 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"); }
URL: http://mt.ikinuku.com/archives/2006/07/google_map_1.html