index.html

16-1 index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>

   <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAiaUztwQS-JKG0vf5W_QNPhRjgqXnQAbwVQohZoocwCPRm4POpxSO7Yb0Dfgh3asVzIS3quES0hQflA"></script>

   <script type="text/javascript">
       google.load("maps", "2");

       //頁面載入完成後，執行以下函數（定位地圖起點）
       function initialize() {
           var map = new google.maps.Map2(document.getElementById("mymap"));
           //定義一個標記
           var point = new GLatLng(23.005438745204096, 120.20259618759155);
           //設定中心點
           map.setCenter(point, 17);
           //定義標記圖示
           var myIcon = new GIcon(G_DEFAULT_ICON);
           //圖示的前景圖片網址。
           myIcon.image = "icons/shoppingmall.png";
           //圖示的前景圖片大小（以像素為單位）。
           myIcon.iconSize = new GSize(32, 37);             //此圖示錨定至地圖的位置（相對於圖示圖片左上角）
           myIcon.iconAnchor = new GPoint(16, 37); //資訊視窗錨定至此圖示的位置（相對於圖示圖片左上角）
           myIcon.infoWindowAnchor = new GPoint(16,37);

           markerOptions = { icon: myIcon ,draggable: true };

           var marker = new GMarker(point , markerOptions);
           //插入標記
           map.addOverlay(marker);

           GEvent.addListener(marker, "click", function() {
               //移動後要做的事情
               var marker_point = marker.getLatLng();
               map.openInfoWindowHtml(marker_point, "目前標記位置：<br />" + marker_point.toString());
           });

           GEvent.addListener(marker, "dragend", function() {
               //移動後要做的事情
               var marker_point = marker.getLatLng();
               map.openInfoWindowHtml(marker_point, "目前標記位置：<br />" + marker_point.toString());
           });

           //地圖屬性
           //map.setMapType(G_HYBRID_MAP);
           //開啟說明視窗
           //map.openInfoWindowHtml(point, "<b>這裡就是延平國中啦～<b>");

           InfoWindowOptions={maxWidth:150}

           var tab1 = new GInfoWindowTab("名稱", "這是7-11");
           var tab2 = new GInfoWindowTab("座標", "目前標記位置：<br />" + point.toString());
           var infoTabs = [tab1,tab2];

           marker.openInfoWindowTabsHtml(infoTabs,InfoWindowOptions);

           //縮放控件
           map.addControl(new GLargeMapControl());
           //比例尺
           map.addControl(new GScaleControl());
           //縮圖
           map.addControl(new GOverviewMapControl());

           var topleft=new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(50,5));
           //地圖切換
           map.addControl(new GMapTypeControl());

           map.removeMapType(G_SATELLITE_MAP);

           map.addMapType(G_PHYSICAL_MAP);

           GEvent.addListener(map, "moveend", function() {
               var center = map.getCenter();
               document.getElementById("message").innerHTML = center.toString();
           });

       }

       google.setOnLoadCallback(initialize);
   </script>

</head>
<body onunload="GUnload()">
   <div id="mymap" style="width:750px;height:350px;"></div>
   <div id='message'></div>

</body>
</html>