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>