Good morning with everyone. Well I tell you that I have already done a Google maps geocolization and tells me with images where I find the only bad thing is that I would like the Latitude and Longitude addresses to be dynamic.
that is to say in a part of my code I have to place those numbers so that I can just draw.
But I already have a separate page that tells me what is the latitude and longitude that is this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOVmgMrLBpBMmHRlu7hqX7Ti3g-mmhiEE" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
function showlocation() {
// One-shot position request.
navigator.geolocation.getCurrentPosition(callback);
}
function callback(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('latitude').innerHTML = lat;
document.getElementById('longitude').innerHTML = lon;
var latLong = new google.maps.LatLng(lat, lon);
var marker = new google.maps.Marker({
position: latLong
});
marker.setMap(map);
map.setZoom(8);
map.setCenter(marker.getPosition());
}
google.maps.event.addDomListener(window, 'load', initMap);
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
</script>
</head>
<body>
<center>
<input type="button" value="Show my location on Map"
onclick="javascript: showlocation()" /> <br/>
</center>
Latitude: <span id="latitude"></span> <br/>
Longitude: <span id="longitude"></span>
<br/><br/>
<div id="map-canvas"/>
</body>
</html>
and this is the code that draws me where I am and with images:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View side-by-side</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map, #pano {
float: left;
height: 100%;
width: 45%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<script>
function initialize() {
var fenway = { lat: -12.0925034, lng: -77.05491230000001 };
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOVmgMrLBpBMmHRlu7hqX7Ti3g-mmhiEE&callback=initialize">
</script>
</body>
</html>
What I would like is for the first image to grasp those values and in my second code where I draw grab those variables and every time you enter you will already know what length and latitude it is. and that's my problem I do not get it on a page just press and show the longitude and latitude and separate the image with those coordinates. That is to say on a single page, press the button and show the coordinates and the map image.