92 lines
3.3 KiB
HTML
92 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Choose Your Location</title>
|
|
<script
|
|
type="text/javascript"
|
|
src="https://maps.googleapis.com/maps/api/js?key="
|
|
></script>
|
|
<script>
|
|
// hack Google Maps to bypass API v3 key (needed since 22 June 2016 http://googlegeodevelopers.blogspot.com.es/2016/06/building-for-scale-updates-to-google.html)
|
|
var target = document.head;
|
|
var observer = new MutationObserver(function(mutations) {
|
|
for (var i = 0; mutations[i]; ++i) {
|
|
// notify when script to hack is added in HTML head
|
|
if (
|
|
mutations[i].addedNodes[0].nodeName == "SCRIPT" &&
|
|
mutations[i].addedNodes[0].src.match(
|
|
/\/AuthenticationService.Authenticate?/g
|
|
)
|
|
) {
|
|
var str = mutations[i].addedNodes[0].src.match(
|
|
/[?&]callback=.*[&$]/g
|
|
);
|
|
if (str) {
|
|
if (str[0][str[0].length - 1] == "&") {
|
|
str = str[0].substring(10, str[0].length - 1);
|
|
} else {
|
|
str = str[0].substring(10);
|
|
}
|
|
var split = str.split(".");
|
|
var object = split[0];
|
|
var method = split[1];
|
|
window[object][method] = null; // remove censorship message function _xdc_._jmzdv6 (AJAX callback name "_jmzdv6" differs depending on URL)
|
|
//window[object] = {}; // when we removed the complete object _xdc_, Google Maps tiles did not load when we moved the map with the mouse (no problem with OpenStreetMap)
|
|
}
|
|
observer.disconnect();
|
|
}
|
|
}
|
|
});
|
|
var config = { attributes: true, childList: true, characterData: true };
|
|
observer.observe(target, config);
|
|
</script>
|
|
<script src="https://unpkg.com/location-picker/dist/location-picker.min.js"></script>
|
|
<script src="./jquery.js"></script>
|
|
<script src="./jqueryui.js"></script>
|
|
<style type="text/css">
|
|
#map {
|
|
width: 100%;
|
|
height: 600px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map"></div>
|
|
<br />
|
|
<button id="confirmPosition">Confirm Position</button>
|
|
<br />
|
|
<p>Cursor position: <span id="onIdlePositionView"></span></p>
|
|
<p>Confirmed position: <span id="onClickPositionView"></span></p>
|
|
<script>
|
|
var confirmBtn = document.getElementById("confirmPosition");
|
|
var onClickPositionView = document.getElementById("onClickPositionView");
|
|
var onIdlePositionView = document.getElementById("onIdlePositionView");
|
|
var map = document.getElementById("map");
|
|
var lp = new locationPicker(
|
|
map,
|
|
{
|
|
setCurrentPosition: true,
|
|
lat: 39.9077,
|
|
lng: 116.3974
|
|
},
|
|
{
|
|
zoom: 15
|
|
}
|
|
);
|
|
confirmBtn.onclick = function() {
|
|
var location = lp.getMarkerPosition();
|
|
onClickPositionView.innerHTML =
|
|
"The chosen location is " + location.lat + "," + location.lng;
|
|
$.post("/post", { lon: location.lng, lat: location.lat, hgt: 100 });
|
|
};
|
|
google.maps.event.addListener(lp.map, "idle", function(event) {
|
|
var location = lp.getMarkerPosition();
|
|
onIdlePositionView.innerHTML =
|
|
"The chosen location is " + location.lat + "," + location.lng;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|