Test of Google Map API (testgmap.js)


/ Published in: JavaScript
Save to your folder(s)

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>


Copy this code and paste it in your HTML
  1. // Main
  2. function load() {
  3. // Check compatibility
  4. if (GBrowserIsCompatible()) {
  5. gmap2 = new GMap2(document.getElementById("map"));
  6. gmap2.setCenter(new GLatLng(37.4419, -122.1419), 13);
  7.  
  8. // Adding controls to the map
  9. gmap2.addControl(new GLargeMapControl());
  10. gmap2.addControl(new GMapTypeControl());
  11.  
  12. // Register an event listener to display the latitude and longitude
  13. GEvent.addListener(gmap2, "moveend", function() {
  14. var center = gmap2.getCenter();
  15. document.getElementById("gmessage").innerHTML = center.toString();
  16. });
  17. } else {
  18. var map = document.getElementById("map");
  19. map.innerHTML = "You cannot use this browser.<br />";
  20. }
  21. }
  22.  
  23. // Move map
  24. function moveMap() {
  25. window.setTimeout(
  26. function() { gmap2.panTo(new GLatLng(37.4569, -122.1569)); },
  27. 1000
  28. );
  29. }
  30.  
  31. // Opening an info window
  32. function displayInfoWindow() {
  33. gmap2.openInfoWindow(gmap2.getCenter(), document.createTextNode("Hello, world"));
  34. }
  35.  
  36. // Opening an info window with HTML
  37. function displayInfoWindowHtml() {
  38. var msg = "<div style='width:250px'><a href='http://www.yahoo.com/'><b>Yahoo!.com</b></a></div>";
  39. gmap2.openInfoWindowHtml(gmap2.getCenter(), msg);
  40. }
  41.  
  42. // Displays a polyline
  43. // you must include the VML namespace and CSS in your HTML document
  44. // to view polylines in IE.
  45. function mapOverlaysPolyline() {
  46. var points = [];
  47. points.push(new GLatLng(37.4219, -122.1119));
  48. points.push(new GLatLng(37.4419, -122.1619));
  49. points.push(new GLatLng(37.4719, -122.1319));
  50. gmap2.addOverlay(new GPolyline(points, '#000000', 5, 0.7));
  51. }
  52.  
  53. // Creating icon
  54. function mapOverlaysIcon() {
  55. var icon = new GIcon();
  56. icon.image = "http://xoops.ikinuku.com/images/gmap/yazirusi.png";
  57. icon.shadow = "http://xoops.ikinuku.com/images/gmap/shadow.png";
  58. icon.iconSize = new GSize(20, 34);
  59. icon.shadowSize = new GSize(37, 34);
  60. icon.iconAnchor = new GPoint(20, 34);
  61.  
  62. var marker = new GMarker(gmap2.getCenter(), icon);
  63. gmap2.addOverlay(marker);
  64. }
  65.  
  66. // Creating icon which are always shown at center of the map
  67. function mapOverlaysCrossIcon() {
  68. var icon = new GIcon();
  69. icon.image = "http://xoops.ikinuku.com/images/gmap/cross.png";
  70. icon.iconSize = new GSize(100, 100);
  71. icon.iconAnchor = new GPoint(50, 50);
  72.  
  73. var marker = new GMarker(gmap2.getCenter(), icon);
  74. gmap2.addOverlay(marker);
  75.  
  76. GEvent.addListener(gmap2, "move", function() {
  77. gmap2.clearOverlays();
  78. marker = new GMarker(gmap2.getCenter(), icon);
  79. gmap2.addOverlay(marker);
  80. });
  81. }
  82.  
  83. // Display info windows above marker
  84. // This uses simple api to show a thumbnail of web page.
  85. function mapOverlaysMarker1() {
  86. var point = new GLatLng(37.4285, -122.1293);
  87. var marker = new GMarker(point);
  88. gmap2.addOverlay(marker);
  89.  
  90. var html = '<div style="width:300px"><a href="http://blog.ikinuku.com/">'
  91. + '<img src="http://img.simpleapi.net/small/http://blog.ikinuku.com/"'
  92. + ' alt="" width="128" height="128" hspace="4" vspace="4" align="left" border="0"></a><br />'
  93. + '<a href="http://blog.ikinuku.com/"><b>My Blog</b></a></div>';
  94. GEvent.addListener(marker, "click", function() {
  95. marker.openInfoWindowHtml(html);
  96. });
  97. }
  98.  
  99. // Display tabbed info windows Above marker
  100. function mapOverlaysMarker2withTab() {
  101. var point = new GLatLng(37.4348, -122.1568);
  102. var marker = new GMarker(point);
  103. gmap2.addOverlay(marker);
  104.  
  105. var img = new Image();
  106. img.src = 'http://xoops.ikinuku.com/images/gmap/daibutu01.gif';
  107.  
  108. var html = '<div style="width:300px"><img src="' + img.src + '" align="left"/>'
  109. + '<b>[[Display image test]]</b><br />'
  110. + 'Sample image<br />'
  111. + 'Big Buddha</div>';
  112.  
  113. var infoTabs = [
  114. new GInfoWindowTab("Tab 1", html),
  115. new GInfoWindowTab("Tab 2", "Tab test")
  116. ];
  117.  
  118. GEvent.addListener(marker, "click", function() {
  119. marker.openInfoWindowTabsHtml(infoTabs);
  120. });
  121. }
  122.  
  123. // Display info windows with music link above markers
  124. function mapOverlaysMarker3withPodcast() {
  125. var point = new GLatLng(37.4356, -122.1380);
  126. var marker = new GMarker(point);
  127. gmap2.addOverlay(marker);
  128.  
  129. var html = '<div style="width:300px"><a href="http://mt.ikinuku.com/podcast/test.mp3">Test music</a></div>';
  130. GEvent.addListener(marker, "click", function() {
  131. marker.openInfoWindowHtml(html);
  132. });
  133. }
  134.  
  135. // Download a csv file by using GDownloadUrl class
  136. function downloadCsvCoordinateFile() {
  137. GDownloadUrl('http://xoops.ikinuku.com/misc/ajax/sample.csv', function(data, responseCode) {
  138. var rows = data.split('\n');
  139. for (var i = 0; i < rows.length; i++) {
  140. var lat = rows[i].split(',')[0];
  141. var lon = rows[i].split(',')[1];
  142. var point = new GLatLng(lat, lon);
  143. var marker = new GMarker(point);
  144. gmap2.addOverlay(marker);
  145.  
  146. var music = rows[i].split(',')[2];
  147. var title = rows[i].split(',')[3];
  148. createInfoWindow(marker, music, title);
  149. }
  150. });
  151. }
  152.  
  153. // Click handling
  154. function mapOverlaysMarkerShowHide() {
  155. GEvent.addListener(gmap2, "click", function(overlay, point) {
  156. if (overlay) {
  157. gmap2.removeOverlay(overlay);
  158. } else {
  159. gmap2.addOverlay(new GMarker(point));
  160. }
  161. });
  162. }
  163.  
  164. // Clear all overlays
  165. function clearOverlays() {
  166. gmap2.clearOverlays();
  167. GEvent.clearListeners(gmap2, "click");
  168. GEvent.clearListeners(gmap2, "move");
  169. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.