google maps lat lng elv infowindow
googlemaps lat lng elv in the infowindow.
by grant
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
<!-- https://maps.googleapis.com/maps/api/js?v=3 -->
CSS
html,
body {
height: 90%;
}
#map {
height: 95%;
}
JavaScript
function load() {
var title = 'drag me!!';
var hill = new google.maps.LatLng(43.660, -116.240);
var map = new google.maps.Map(document.getElementById("map"), {
center: hill,
zoom: 16,
mapTypeId: 'terrain'
});
var elevator = new google.maps.ElevationService();
var infoWindow = new google.maps.InfoWindow({
map: map
});
// ga infowindow
var contentString = '<div>'+
'<p>grant</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// ga marker
var marker = new google.maps.Marker({
position: hill,
map: map,
draggable: true,
title: title
});
/* do something
marker.addListener('click', function() {
infowindow.open(map, marker);
});
*/
// marker event not map
marker.addListener('click', function(event) {
displayLocationElevation(event.latLng, elevator, infoWindow);
});
// map event doesn't work with above marker event
map.addListener('click', function(event) {
displayLocationElevation(event.latLng, elevator, infoWindow);
});
//wont work on http; hills
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('<b>You are here.</b><br><b>Lat:</b> '+position.coords.latitude+'<br><b>Lon:</b> '+position.coords.longitude);
map.setCenter(pos);
var marker = new google.maps.Marker({
position: pos,
map: map,
title: String(pos.lat) + ", " + String(pos.lng),
});
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
// from https://developers.google.com/maps/documentation/javascript/elevation
function...