How to pan to current location with local Google Maps .html file on android phone?
Question
The goal is to have a local .html file on an android phone, that can be opened with a standard web browser, which has functionality to pan to current location on Google Maps. Currently the panning to current location works on mi browser on android phone, but the end user wants it to work on standard web browsers (eg Chrome).
Expected result : button "Pan to current location" on top pans the Google Maps to current location of phone. Actual result : on chrome, firefox, edge web browser the html file can be opened, but the button does not pan to current location on the phone. In the chrome browser on laptop the button does pan to current location. On mi browser (from Xiaomi) on an android phone the button does respond and pan to current location.
Since I'm a beginner in HTML/JS, I have no idea if this error can be fixed in the code or it can be fixed with settings in the web browsers. It would be nice to get a way to view the local html on android phone with "pan to current location" functionality, and to understand why it did not work.
If you want to run the code, the Google Maps API key should be retrieved. Here is example code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key={GOOGLE_MAPS_API_KEY}&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.924003,4.4601963),
mapTypeId: google.maps.MapTypeId.HYBRID }
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
const locationButton = document.createElement("button");
locationButton.textContent = "Pan to Current Location";
locationButton.classList.add("custom-map-control-button");
map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
locationButton.addEventListener("click", () => {
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
infoWindow.setPosition(pos);
infoWindow.setContent("Location found.");
infoWindow.open(map);
map.setCenter(pos);
},
() => {
handleLocationError(true, infoWindow, map.getCenter());
}
);
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
1 answers
solution1
0 2020-10-23 14:47:50
Current solution is that the .html is published as a website via Azure. This website can be accessed on the phone via browser, and does have the 'pan to current location' functionality.
Most probable reason why the javascript code did not work via the local .html file on the phone, is security of browsers on phones when dealing with local html/javascript.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.