Can someone tell me what I'm doing wrong? I want to make lat and lng values dynamic (make them into variables), but can't figure it out. I'm thinking it might be because I don't know how to make global variables. Variables that can be used outside functions. Not sure though.
<!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: 400px;
width: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<script>
function initialize() {
//Function to covert address to Latitude and Longitude
var getLocation = function(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
console.log("lat: " + latitude + ", lng: " + longitude);
return "lat: " + latitude + ", lng: " + longitude;
}
});
}
//Call the function with address as parameter
var myvar = getLocation('New York');
//getLocation('New York'); //same as above but without making a variable out of it
//var myvar = getLocation('Miami'); //test different location and get different lat & lng
//getLocation('Miami');
//alert(getLocation); //spits out entire function and not just the "returned" data
//alert(getLocation('New York')); //undefined
//alert(myvar); //undefined
//this line right here is what i need help with:
var fenway = {lat: 42.345573, lng: -71.098326}; //supposed to look like this, but i need it to be variable style not hard-coded values
//var fenway = {lat: latitude, lng: longitude}; //doesn't work
//var fenway = {latitude, longitude}; //doesn't work
//var fenway = {getLocation}; //doesn't work
//var fenway = {myvar}; //doesn't work
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 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize"></script>
</body>
</html>
If you don't have or want to get api key, this works too. It will just give you a warning that you didn't use a key.
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize"></script>
UPDATE:
It's different than other Q&A's because i'm trying to do it with a double map, and one of the maps is street view. both the maps interact with each other. so it doesn't do me any good to get it working with a non street view map by itself or a street view map by itself.
SOLUTION 1 (little street view guy doesn't face correct direction):
<!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: 400px;
width: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&ext=.js"></script>
<script>
var geocoder;
var map;
function initMap() {
var geocoder1 = new google.maps.Geocoder();
setCenter(geocoder1, '666 5th avenue, New York, NY 10019');
}
function setCenter(geocoder, address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: results[0].geometry.location
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: results[0].geometry.location,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
} else {
alert('Geocode was not successful for the following reason: ' + status);
// return null;
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
</script>
</body>
</html>
SOLUTION 2 (little street view guy faces correct direction):
<!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: 400px;
width: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script>
var sv = new google.maps.StreetViewService();
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var panorama;
var address = "666 5th avenue, New York, NY 10019";
var myLatLng;
function initialize() {
panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myLatLng = results[0].geometry.location;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: results[0].geometry.location
});
// find a Streetview location on the road
var request = {
origin: address,
destination: address,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, directionsCallback);
map.setStreetView(panorama);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
panorama.setPano(data.location.pano);
var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, myLatLng);
panorama.setPov({
heading: heading,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
} else {
alert("Street View data not found for this location.");
}
}
function directionsCallback(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var latlng = response.routes[0].legs[0].start_location;
sv.getPanoramaByLocation(latlng, 50, processSVData);
} else {
alert("Directions service not successfull for the following reason:" + status);
}
}
</script>
</body>
</html>
