[Mobile]Windows Mobile 6.5 Widget - Widget 結合 Google Maps JavaScript API V3

今天介紹大家如何結合Widget與Google Maps JavaScript API V3

首先可以到下列網址,去了解一下目 前最新版的Google Maps V3
http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/

有 玩過google map的人一定有玩過用地址,來查地圖這個功能

這個範例主要就是利用Widget載入Google map,然後可以做簡單的地址查詢功能

直接看範例

< html >
< head >
     < meta  name ="viewport"  content ="initial-scale=1.0, user-scalable=no"   />

     < script  type ="text/javascript"  src ="http://maps.google.com/maps/api/js?sensor=false" ></ script >

</ head >
< body  style ="padding: 0px; margin: 0px" >
     < div  id ="map_canvas"  style ="width: 100%; height: 100%; display: block" >
     </ div >
     < div  id ="map_search"  style ="width: 100%; height: 100%; display: none" >
         < input  id ="address"  type ="text"  value =""   />
         < input  type ="button"  value ="Geocode"  onclick ="Search()"   />
         < input  type ="button"  value ="Back to map"  onclick ="ChangeMap()"   />
     </ div >
</ body >
</ html >

< script  type ="text/javascript" >
     // 載入地圖 sample code
     // 參考：http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/examples/map-simple.html
     var  latlng  =   new  google.maps.LatLng( - 34.397 ,  150.644 );
     var  myOptions  =  {
        zoom:  8 ,
        center: latlng,
        navigationControl:  true ,
        mapTypeControl:  false ,
        scaleControl:  false ,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
     var  map  =   new  google.maps.Map(document.getElementById( " map_canvas " ), myOptions);
     var  geocoder  =   new  google.maps.Geocoder();
</ script >

< script  type ="text/javascript" >

     function  SetMapType(type) {
         // 改變MapType
        map.set_mapTypeId(type);
        ChangeMap();
    }

     function  ChangeMap() {
         // 切換到Map模式
        map_canvas.style.display  =   " block " ;
        map_search.style.display  =   " none " ;
    }

     function  ChangeSearch() {
         // 切換到Search模式
        map_canvas.style.display  =   " none " ;
        map_search.style.display  =   " block " ;
    }

</ script >


< script  type ="text/javascript" >

     // 地址搜索 sample code
     // 參考：http://code.google.com/intl/zh-TW/apis/maps/documentation/v3/examples/geocoding-simple.html
     function  Search() {
        ChangeMap();
         var  address  =  document.getElementById( " address " ).value;
         if  (geocoder) {
            geocoder.geocode({ 'address': address },  function (results, status) {
                 if  (status  ==  google.maps.GeocoderStatus.OK) {
                     if  (status  !=  google.maps.GeocoderStatus.ZERO_RESULTS) {
                        map.set_center(results[ 0 ].geometry.location);
                         var  marker  =   new  google.maps.Marker({
                            map: map,
                            position: results[ 0 ].geometry.location
                        });
                    }  else  {
                        alert( " No results found " );
                    }
                }  else  {
                    alert( " Geocode was not successful for the following reason:  "   +  status);
                }
            });
        }
    }

</ script >

< script  type ="text/javascript" >

     // //////////建立第1層Menu///////////////

     var  menuMapType  =  widget.menu.createMenuItem( 1001 );
    menuMapType.text  =   " MapType " ;
    widget.menu.append(menuMapType);

     var  menuSearch  =  widget.menu.createMenuItem( 1002 );
    menuSearch.onSelect  =   function () { SetMapType(google.maps.MapTypeId.SATELLITE) };
    menuSearch.text  =   " Search " ;
    menuSearch.onSelect  =  ChangeSearch;
    widget.menu.append(menuSearch);

     // //////////建立第2層Menu///////////////

     // 建立一個ROADMAP的MenuItem
     var  menuItem1  =  widget.menu.createMenuItem( 2001 );
    menuItem1.text  =   " ROADMAP " ;
    menuItem1.onSelect  =   function () { SetMapType(google.maps.MapTypeId.ROADMAP) };
    menuMapType.append(menuItem1);

     // 建立一個SATELLITE的MenuItem
     var  menuItem2  =  widget.menu.createMenuItem( 2002 );
    menuItem2.text  =   " SATELLITE " ;
    menuItem2.onSelect  =   function () { SetMapType(google.maps.MapTypeId.SATELLITE) };
    menuMapType.append(menuItem2);

     // 建立一個HYBRID的MenuItem
     var  menuItem3  =  widget.menu.createMenuItem( 2003 );
    menuItem3.text  =   " HYBRID " ;
    menuItem3.onSelect  =   function () { SetMapType(google.maps.MapTypeId.HYBRID) };
    menuMapType.append(menuItem3);

     // 建立一個TERRAIN的MenuItem
     var  menuItem4  =  widget.menu.createMenuItem( 2004 );
    menuItem4.text  =   " TERRAIN " ;
    menuItem4.onSelect  =   function () { SetMapType(google.maps.MapTypeId.TERRAIN) };
    menuMapType.append(menuItem4);
    
</ script >