Hi,
I managed to add a button to geolocate users to your maps by adding this code to frontend_script.js
This goes at the end of function hmapsprem_inject_map
var geolocateControlDiv = document.createElement('div');
var geolocateControl = new GeolocateControl(geolocateControlDiv, google_map);
geolocateControlDiv.index = 1;
google_map.controls[google.maps.ControlPosition.TOP_CENTER].push(geolocateControlDiv);
And add also this function
function GeolocateControl(controlDiv, map) {
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.Top = '10px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Geolocation';
controlUI.appendChild(controlText);
// Setup the click event listeners
controlUI.addEventListener('click', function() {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
map.setZoom(17);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
});
}
