Home > Article > Web Front-end > HTML5 Guide-7. Geolocation combined with Google Maps to develop a small application_html5 tutorial skills

HTML5 Guide-7. Geolocation combined with Google Maps to develop a small application_html5 tutorial skills

WBOYOriginal: 2016-05-16 15:50:221739browse

Today we will develop a small application by combining HTML5 geolocation with Google Maps. Google maps API address: https://developers.google.com/maps/documentation/javascript/?hl=zh-CN.
To call google maps, you need to add js reference

The InitMap method is to call the google maps api to initialize the map. It needs to set the options object and use it when calling the map initialization.

Copy code

The code is as follows:

function InitMap() {
/ * Set all of the options for the map */
var options = {
zoom: 4,
center: new google.maps.LatLng(38.6201, -90.2003),
mapTypeId: google. maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps .ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
};
/* Create a new Map for the application */
map = new google.maps.Map($('#map')[0], options);
}

The getLocation and watchLocation methods obtain positioning information.

Copy code

The code is as follows:

After successfully obtaining the location information, call the plotLocation method to display the location on Google Maps.

Copy code

The code is as follows:

function plotLocation(position) {
attempts = 0;
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({
position: point
});
marker.setMap(map);
map.setCenter(point);
map.setZoom(15);
}

demo Download address: googleMapGeolocation.rar

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use html5 css3 to achieve slider switching effect Say goodbye to javascript css_html5 tutorial skillsNext article：Use html5 css3 to achieve slider switching effect Say goodbye to javascript css_html5 tutorial skills

See more

HTML5 Guide-7. Geolocation combined with Google Maps to develop a small application_html5 tutorial skills

Related articles