Six steps to create google map in the HTML5

1.getCurrentPosition(); 2. API key of google client; 3. define properites of map; 4.the location for map to hold; 5.create a map object; 6.when to load the map.

1.Geolocation is the identificaiton of the real-world geographic location of an object, such as a radar source, portable device or Internet-connected computer terminal.

*Using HTML5 Geolocation

　The getCurrentPosition() method is used to get the position of user.

<script>
var x = document.getElementById("demo");
function getLocation(){
  if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition,showError);
   }else{
        x.innerHTML="Geolocation is not supported by this browser."
    }
}
function showPosition(position){
   x.innerHTML = "Latitude: "+position.coords.latitude +"<br>Longitude: "+position.coords.longitude;
}    
function showError(error){
   switch(error.code){
       case error.PERMISSION_DENIED:{
            x.innerHTML = "User denied the request for Geolocation";
            break;
       }
       case error.POSITION_UNAVAILABLE:{
            x.innerHTML = "Location information is unavailable";
            break;
       }
       case error.TIMEOUT:{
            x.innerHTML = "The request to get user location timed out.";
            break;
       }
       case error.UNKNOWN_ERROR:{
            x.innerHTML = "An unknown error occurred.";
            break;
       }
   }
}
</script>

2. We need the goolge api key to access google map service.

3. to configure the properties for creating googlem map.

　　*google.maps.Map({properties});

　　*center: google.maps.LatLng(lat,lng) (required); / user the city's name like chicago  ===>here, i can get value form navigator.getlocation.getCurrentPosition();

　　*MapTypeId : google.maps.MapTypeId.HYBRID; google.maps.MapTypeId.ROADMAP(default);google.maps.MapTypeId.SATELLITE;google.maps.MapTypeId.TERRAIN.

　　*zoom: 0-10 

　　*scaleControl:true/false;  ==>enable/disable state of the Scale control.

　　*streetView: StreetViewPanorama;

　　*minZoom: number

　　*maxZoom: number

　　*backgroundColor: string

　　*disableDefaultUI:boolean ==> enables/disabled all default UI.

　　*disableDoubleClickZoom:boolean

　　*draggle:boolean

4.the location for map to hold;

<style>
    #mapholder{
      height:100%;
    }
</style>
<body>
    <div id="mapholder"></div>
</body>

 

5.create a map object;

<script>
function initMap(){
  var map = new google.maps.Map(document.getElementById("mapholder"),{
     zoom:17;
     center:{lat:-42.901492499999996,lng:147.3278683};
   });
}
</script>

6.when to load the map.

 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap" >
</script>

 

posted on 2016-04-22 12:06  yeatschen  阅读(244)  评论(0)  编辑  收藏  举报

导航