Use Geolocation in HTML5 to obtain the geographic location. Call the Google Map API to locate the location on Google Map.

Comments: When I started learning HTML5, I am very interested in Geolocation. Using Google Map APIs to implement basic Map location functions, I mainly take the following steps: obtain the current geographic location and call the Google Map API to obtain the current location information. This course is just learning HTML5. Now, I am very interested in the Geolocation, and use the Google Map API to implement basic Map location functions.
1. Obtain the current geographic location
Call method void getCurrentPosition (onSuccess, onError, options.
OnSuccess is the callback function executed when the current location information is obtained successfully. onError is the callback function executed when the current location information fails to be obtained. options is a list of optional familiarity. The second and third parameters are optional.
In the onSuccess callback function, the position parameter is used to represent a specific position object, indicating the current position. It has the following attributes:
• Latitude: the latitude of the current geographic location.
• Longpolling: the longitude of the current geographic location.
• Altitude: The current altitude (null if not available ).
• Accuracy: the precision of the obtained latitude and longitude (in meters ).
• AltitudeAccurancy: the longitude (in meters) of the obtained altitude ).
• Heading: the forward direction of the device. It is represented by the clockwise rotation angle of the face facing and facing the face (null if it cannot be obtained ).
• Speed: the forward speed of the device (in meters/s and null if the device cannot be obtained ).
• Timestamp: the time when location information is obtained.

The error parameter is used in the onError callback function. It has the following attributes:
• Code: Error code, which has the following values.
1. the user rejects the location service (the attribute value is 1 );
2. The location information cannot be obtained (the property value is 2 );
3. An error occurred while obtaining information (Attribute Value: 3 ).
• Message: a string containing specific error information.

In the options parameter, the optional attributes are as follows:
• EnableHighAccuracy: whether high-precision geographic location information is required.
• Timeout: Set the timeout time (in milliseconds ).
• MaximumAge: the effective time (in milliseconds) for caching geographic location information ).
Note that you should write the following code to determine whether the browser supports HTML5 to obtain geographical location information, so as to be compatible with browsers that are not supported earlier.

The Code is as follows:
If (navigator. geolocation ){
// Obtain the current geographic location information
Navigator. geolocation. getCurrentPosition (onSuccess, onError, options );
} Else {
Alert ("your browser does not support HTML5 to obtain geographic location information. ");
}

2. Call the Google Map API to obtain the current location information.
First, you need to reference the Google Map API script file on the page. The import method is as follows.

The Code is as follows:
<Script type = "text/javascript" src = "http://maps.google.com/maps/api/js? Sensor = false "> </script>

Second, set the map parameters as follows.

The Code is as follows:
// Specify the coordinates of a coordinate point on a google Map, and specify the horizontal and vertical coordinates of the coordinate point.
Var latlng = new google. maps. LatLng (coords. latitude, coords. longpolling );
Var myOptions = {
Zoom: 14, // set the magnification
Center: latlng, // set the map center point to the specified coordinate point
MapTypeId: google. maps. MapTypeId. ROADMAP // specify the map type
};

Finally, create a map and display it on the page. The creation method is as follows:

The Code is as follows:
// Create a map and display it in the map
Var map = new google. maps. Map (document. getElementById ("map"), myOptions );

Finally, we will present all the code in this example. The Code is as follows.

The Code is as follows:
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> obtain the current location and display it on google Maps </title>
<Script type = "text/javascript" src = "http://maps.google.com/maps/api/js? Sensor = false "> </script>
<Script type = "text/javascript">
Function init (){
If (navigator. geolocation ){
// Obtain the current geographic location
Navigator. geolocation. getCurrentPosition (function (position ){
Var coords = position. coords;
// Console. log (position );
// Specify the coordinates of a coordinate point on a google Map, and specify the horizontal and vertical coordinates of the coordinate point.
Var latlng = new google. maps. LatLng (coords. latitude, coords. longpolling );
Var myOptions = {
Zoom: 14, // set the magnification
Center: latlng, // set the map center point to the specified coordinate point
MapTypeId: google. maps. MapTypeId. ROADMAP // specify the map type
};
// Create a map and display it in the map
Var map = new google. maps. Map (document. getElementById ("map"), myOptions );
// Create a tag on the map
Var marker = new google. maps. Marker ({
Position: latlng, // mark the previously set coordinates
Map: map // set the annotation in the map just created
});
// Note window
Var infoWindow = new google. maps. InfoWindow ({
Content: "current location: <br/> longitude:" + latlng. lat () + "<br/> dimension:" + latlng. lng () // prompt information in the form
});
// Open the prompt window
InfoWindow. open (map, marker );
},
Function (error ){
// Handle errors
Switch (error. code ){
Case 1:
Alert ("location service is rejected. ");
Break;
Case 2:
Alert ("location information cannot be obtained temporarily. ");
Break;
Case 3:
Alert ("retrieving information timed out. ");
Break;
Default:
Alert ("Unknown error. ");
Break;
}
});
} Else {
Alert ("your browser does not support HTML5 to obtain geographic location information. ");
}
}
</Script>
</Head>
<Body onload = "init ()">
<Div id = "map" style = "width: 800px; height: 600px"> </div>
</Body>
</Html>