examples/declarative/modelviews/webview/content/Mapping/map.html

   1 <html>
   2 <head>
   3 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   4 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   5 <script type="text/javascript">
   6   var geocoder
   7   var map
   8   function goToLatLng(latlng,bounds) {
   9     if (map) {
  10         map.setCenter(latlng)
  11         map.fitBounds(bounds)
  12     } else {
  13         var myOptions = {
  14           zoom: 8,
  15           center: latlng,
  16           mapTypeId: google.maps.MapTypeId.ROADMAP
  17         };
  18         map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  19     }
  20   }
  21   function initialize() {
  22     geocoder = new google.maps.Geocoder();
  23     if (window.qml.address) {
  24         goToAddress()
  25     } else {
  26         goToLatLng(new google.maps.LatLng(window.qml.lat,window.qml.lng));
  27     }
  28     if (navigator.geolocation) {
  29       navigator.geolocation.getCurrentPosition(function(position) {
  30         initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
  31         window.qml.lat = initialLocation.lat;
  32         window.qml.lng = initialLocation.lng;
  33         goToLatLng(initialLocation);
  34       });
  35     }
  36   }
  37   function goToAddress() {
  38       if (geocoder) {
  39         var req = {
  40             address: window.qml.address,
  41         }
  42         if (map)
  43             req.bounds = map.getBounds()
  44         window.qml.status = "Loading";
  45         geocoder.geocode(req, function(results, status) {
  46           if (status == google.maps.GeocoderStatus.OK) {
  47             window.qml.status = "Ready";
  48             goToLatLng(results[0].geometry.location,results[0].geometry.bounds);
  49           } else {
  50             window.qml.status = "Error";
  51           }
  52         });
  53       }
  54   }
  55 </script>
  56 </head>
  57 <body onload="initialize()" leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">
  58   <div id="map_canvas" style="width:100%; height:100%"></div>
  59 </body>
  60 </html>