Advertisement
gidmakus

Javascript Map API

Jul 5th, 2011
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  6.     <title>Google Maps JavaScript API Example</title>
  7.     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAXZV-zRxFr6EJ2d1v0lUK7RSjspX_WPlEeEONGeyst2upYYHfZRRSc773EaSN0vuMID_nnylSrb7BOg" type="text/javascript"></script>
  8.     <script type="text/javascript">
  9.  
  10.    function initialize() {
  11.   var map = new GMap2(document.getElementById("map_canvas"));
  12.   map.setCenter(new GLatLng(5.558560 ,-0.200924), 13);
  13.  // map.openInfoWindow(map.getCenter(),                   document.createTextNode("My world of Testing"));
  14. /*
  15.    // Create our "cafe" marker icon
  16.         var cafeIcon = new GIcon();
  17.         cafeIcon.image = "http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|996600";
  18.         cafeIcon.shadow = "http://chart.apis.google.com/chart?chst=d_map_pin_shadow";
  19.         cafeIcon.iconSize = new GSize(12, 20);
  20.         cafeIcon.shadowSize = new GSize(22, 20);
  21.         cafeIcon.iconAnchor = new GPoint(6, 20);
  22.         cafeIcon.infoWindowAnchor = new GPoint(5, 1);
  23.         // Set up our GMarkerOptions object literal
  24.         markerOptions = { icon:cafeIcon };
  25.  
  26.   // Add 10 markers to the map at random locations
  27.   var bounds = map.getBounds();
  28.   var southWest = bounds.getSouthWest();
  29.   var northEast = bounds.getNorthEast();
  30.   var lngSpan = northEast.lng() - southWest.lng();
  31.   var latSpan = northEast.lat() - southWest.lat();
  32.  
  33.   for (var i = 0; i < 10; i++) {
  34.     var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
  35.         southWest.lng() + lngSpan * Math.random());
  36.     map.addOverlay(new GMarker(point));
  37.   }
  38.   */
  39.  
  40.  
  41.    function createMarker(point, number) {
  42.   var marker = new GMarker(point);
  43.   var message = ["<div style='width:300px; height:120px;'><img src='footer_logo.gif' style='float:left; margin-right:5px; font-family:verdana; font-size:11px;'> 9tribe Websolution is launching <br>it operation fully this month. Launch Launch Launch. <a href='http://gidmakus.wordpress.com'>Gidmakus Wordpress</a></div>","is","the","secret","message"];
  44.   marker.value = number;
  45.   GEvent.addListener(marker, "click", function() {
  46.     var myHtml =  message[number -1];
  47.    // var myHtml = "<b>#" + number + "</b><br/>" + message[number -1];
  48.     map.openInfoWindowHtml(point, myHtml);
  49.   });
  50.   return marker;
  51. }
  52.  
  53. // Add 5 markers to the map at random locations
  54. var bounds = map.getBounds();
  55. var southWest = bounds.getSouthWest();
  56. var northEast = bounds.getNorthEast();
  57. var lngSpan = northEast.lng() - southWest.lng();
  58. var latSpan = northEast.lat() - southWest.lat();
  59. for (var i = 0; i < 5; i++) {
  60.   var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
  61.     southWest.lng() + lngSpan * Math.random());
  62.   map.addOverlay(createMarker(point, i + 1));
  63. }
  64.  
  65. }
  66.  
  67.     </script>
  68.   </head>
  69.   <body onload="initialize()" onunload="GUnload()">
  70.     <div id="map_canvas" style="width:500px; height:300px; font-family:tahoma; font-size:12px; line-height:20px;"></div>
  71.   </body>
  72. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement