So I'm trying to have google maps with direction service It works fine until I try to get the user's location to use as a start point. The idea is to give a user directions from their current location to one of the three. I have been following along with some guides on on Google's API.
When I try to get the user's location I try using:
if (navigator.geolocation) {
var position = navigator.geolocation.getCurrentPosition();
googleCoords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
}
else {
alert("No geolocation!");
}
But for some reason this breaks the map? Trying to get the user's coordinates in a variable to use in the Directions services and as an origin for the map. Thanks
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Displaying text directions with <code>setPanel()</code></title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
#right-panel {
height: 100%;
float: right;
width: 390px;
overflow: auto;
}
#map {
margin-right: 400px;
}
#floating-panel {
background: #fff;
padding: 5px;
font-size: 14px;
font-family: Arial;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
display: none;
}
#media print {
#map {
height: 500px;
margin: 0;
}
#right-panel {
float: none;
width: auto;
}
}
</style>
</head>
<body>
<div id="floating-panel">
<strong>Start:</strong>
<select id="start">
<option value="USERLOCATION">Your location</option>
</select>
<br>
<strong>End:</strong>
<select id="end">
<option value="memorial university of newfoundland">St. John's
Campus</option>
<option value="marine insitute of memorial university of
newfoundland">Marine Insitute</option>
<option value="grenfell campus">Grenfell Campus</option>
</select>
</div>
<div id="right-panel"></div>
<div id="map"></div>
<script>
var lat = null;
var long = null;
var googleCoords = null;
function initMap() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition();
googleCoords = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
}
else {
alert("No geolocation!");
}
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change',
onChangeHandler);
document.getElementById('end').addEventListener('change',
onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</script>
</body>
You must do into a function getCurrentPosition.
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
you should get the position from callback function like this.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
var googleCoords = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
});
} else {
alert("Geolocation is not supported by this browser.");
}
Related
I created a city specific film production company locator. I'm using the nearbySearch service with pagination of all places. Until that point everything is working fine.
Now I'm trying to add the getDetails service to display company info in an info window. Unfortanly I didn't figure out how to display an info window for each marker with the data from the getDetails service. I would be very thankful if someone can help me out to solve my problem! I put the code below!
var map;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
var labelIndex = 0;
function initMap() {
// Create the map.
var duesseldorf = {lat: 51.2277, lng: 6.7735};
map = new google.maps.Map(document.getElementById('map'), {
center: duesseldorf,
zoom: 12
});
// Create the places service.
var service = new google.maps.places.PlacesService(map);
var getNextPage = null;
var moreButton = document.getElementById('more');
moreButton.onclick = function() {
moreButton.disabled = true;
if (getNextPage) getNextPage();
};
// Perform a nearby search.
service.nearbySearch(
{location: duesseldorf, radius: 14000, keyword: ['filmproduktion']},
function(results, status, pagination) {
if (status !== 'OK') return;
createMarkers(results);
moreButton.disabled = !pagination.hasNextPage;
getNextPage = pagination.hasNextPage && function() {
pagination.nextPage();
};
});
}
//display place details in info window
var request = {
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
fields: ['name', 'formatted_address', 'place_id', 'geometry']
};
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails(request, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
'Place ID: ' + place.place_id + '<br>' +
place.formatted_address + '</div>');
infowindow.open(map, this);
});
}
});
function createMarkers(places) {
var bounds = new google.maps.LatLngBounds();
var placesList = document.getElementById('places');
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
label: labels[labelIndex++ % labels.length],
map: map,
title: place.name,
position: place.geometry.location
});
var li = document.createElement('li');
li.textContent = place.name;
placesList.appendChild(li);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 620px;
width: 75%;
margin-left: 3%;
display: inline-block;
vertical-align: top;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-top: 60px;
margin-bottom: 60px;
font-family: 'Roboto','sans-serif';
font-size: 40px;
}
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
#right-panel {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
right: 3%;
height: 600px;
width: 300px;
z-index: 5;
border: 1px solid #999;
background: #fff;
display: inline-block;
vertical-align: top;
}
h2 {
font-size: 22px;
margin: 0 0 5px 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
height: 500px;
width: 300px;
overflow-y: scroll;
}
li {
background-color: #f1f1f1;
padding: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
li:nth-child(odd) {
background-color: #fcfcfc;
}
#more {
width: 100%;
margin: 5px 0 0 0;
}
/* Media Queries */
#media(max-width: 768px){
#map{
display: block;
width: 90%;
margin: auto;
height: 300px;
}
#right-panel{
display: block;
margin: auto;
position: relative;
right: 0;
margin-top: 15px;
height: 400px;
}
ul{
height: 300px;
}
h1{
font-size: 30px;
margin-top: 40px;
margin-bottom: 40px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="./css/style.css">
<title>Place Search Pagination</title>
<script src="map.js"></script>
</head>
<header>
<h1>Die besten Filmproduktionen in Düsseldorf und Umgebung!</h1>
</header>
<body>
<div id="map"></div>
<div id="right-panel">
<h2>Filmproduktionen in Düsseldorf</h2>
<ul id="places"></ul>
<button id="more">Mehr Ergebnisse</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>
</body>
</html>
I get a javascript error with the posted code: Uncaught ReferenceError: google is not defined on this line: var infowindow = new google.maps.InfoWindow();, because that is outside of initMap so executes before the API is loaded. Make it global (var infowindow;), then initialize it inside initMap.
var infowindow;
function initMap() {
infowindow = new google.maps.InfoWindow();
Then to open the details in the infowindow, call the getDetails request when the marker is clicked, opening the infowindow when the response comes back, keeping track of the reference to the marker from the click event (the var that=this; line, that gives you function closure on that so it is available when the response comes back to the getDetails request):
google.maps.event.addListener(marker, 'click', function(e) {
//display place details in info window
var request = {
placeId: this.place_id,
fields: ['name', 'formatted_address', 'place_id', 'geometry']
};
var service = new google.maps.places.PlacesService(map);
var that = this;
service.getDetails(request, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
'Place ID: ' + place.place_id + '<br>' +
place.formatted_address + '</div>');
infowindow.open(map, that);
}
});
});
var map;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
var labelIndex = 0;
var infowindow;
function initMap() {
// Create the map.
var duesseldorf = {
lat: 51.2277,
lng: 6.7735
};
map = new google.maps.Map(document.getElementById('map'), {
center: duesseldorf,
zoom: 12
});
infowindow = new google.maps.InfoWindow();
// Create the places service.
var service = new google.maps.places.PlacesService(map);
var getNextPage = null;
var moreButton = document.getElementById('more');
moreButton.onclick = function() {
moreButton.disabled = true;
if (getNextPage) getNextPage();
};
// Perform a nearby search.
service.nearbySearch({
location: duesseldorf,
radius: 14000,
keyword: ['filmproduktion']
},
function(results, status, pagination) {
if (status !== 'OK') return;
createMarkers(results);
moreButton.disabled = !pagination.hasNextPage;
getNextPage = pagination.hasNextPage && function() {
pagination.nextPage();
};
});
}
function createMarkers(places) {
var bounds = new google.maps.LatLngBounds();
var placesList = document.getElementById('places');
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
label: labels[labelIndex++ % labels.length],
map: map,
place_id: place.place_id,
title: place.name,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function(e) {
//display place details in info window
var request = {
placeId: this.place_id,
fields: ['name', 'formatted_address', 'place_id', 'geometry']
};
var service = new google.maps.places.PlacesService(map);
var that = this;
service.getDetails(request, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
'Place ID: ' + place.place_id + '<br>' +
place.formatted_address + '</div>');
infowindow.open(map, that);
}
});
});
var li = document.createElement('li');
li.textContent = place.name;
placesList.appendChild(li);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 620px;
width: 75%;
margin-left: 3%;
display: inline-block;
vertical-align: top;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-top: 60px;
margin-bottom: 60px;
font-family: 'Roboto', 'sans-serif';
font-size: 40px;
}
#right-panel {
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding: 10px;
}
#right-panel select,
#right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
#right-panel {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
right: 3%;
height: 600px;
width: 300px;
z-index: 5;
border: 1px solid #999;
background: #fff;
display: inline-block;
vertical-align: top;
}
h2 {
font-size: 22px;
margin: 0 0 5px 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
height: 500px;
width: 300px;
overflow-y: scroll;
}
li {
background-color: #f1f1f1;
padding: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
li:nth-child(odd) {
background-color: #fcfcfc;
}
#more {
width: 100%;
margin: 5px 0 0 0;
}
/* Media Queries */
#media(max-width: 768px) {
#map {
display: block;
width: 90%;
margin: auto;
height: 300px;
}
#right-panel {
display: block;
margin: auto;
position: relative;
right: 0;
margin-top: 15px;
height: 400px;
}
ul {
height: 300px;
}
h1 {
font-size: 30px;
margin-top: 40px;
margin-bottom: 40px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="./css/style.css">
<title>Place Search Pagination</title>
<script src="map.js"></script>
</head>
<header>
<h1>Die besten Filmproduktionen in Düsseldorf und Umgebung!</h1>
</header>
<body>
<div id="map"></div>
<div id="right-panel">
<h2>Filmproduktionen in Düsseldorf</h2>
<ul id="places"></ul>
<button id="more">Mehr Ergebnisse</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>
</body>
</html>
Using the below code to find local area from longitude and latitude, i'm not really wanting a specific address, just city or state.
The problem is that all I need is the city placed in to a variable, I dont want the map. Is this possible
I have taken this code from google developers site and put an alert box to display the address, which is fine, but dont want the map.
I have come across this which returns details from long/lat,
https://maps.googleapis.com/maps/api/geocode/json?
latlng=55.056499,1.600130&key=XXX&sensor=false
But getting this message - although not exceeding limit
{
"error_message" : "You have exceeded your daily request quota for this API. If
you did not set a custom daily request quota, verify your project has an
active billing account: http://g.co/dev/maps-no-account",
"results" : [],
"status" : "OVER_QUERY_LIMIT"
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Reverse Geocoding</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#latlng {
width: 225px;
}
</style>
</head>
<body>
<div id="floating-panel">
<input id="latlng" type="text" value="40.714224,-73.961452">
<input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 40.731, lng: -73.997}
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
document.getElementById('submit').addEventListener('click',
function() {
geocodeLatLng(geocoder, map, infowindow);
});
}
function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng:
parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[0])
{
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
// infowindow.setContent(results[0].formatted_address);
// infowindow.open(map, marker);
window.alert(results[0].formatted_address);
}
else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XX&callback=initMap">
</script>
</body>
</html>
I am using the Google Maps JavaScript API to display driving routes on a map.
I have this code that will clear the route from the map entirely:
directionsDisplayD.setDirections({routes: []});
Is there a way to instead just toggle its visibility?
Set the map property of the DirectionsRenderer object to null to hide the directions. Set it back to your map object to re-display the directions.
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: 41.85,
lng: -87.65
}
});
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
google.maps.event.addDomListener(document.getElementById("btn"), 'click', function(evt) {
if (directionsDisplay.getMap() != null) directionsDisplay.setMap(null);
else directionsDisplay.setMap(map);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: "New York, NY",
destination: "Trenton, NJ",
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
<input id="btn" type="button" value="toggle" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
This reverse geocoding code does not return the street name of a location in some areas (Example: {36.82687, 10.09948}), actually, I get only the name of the town and the country despite the fact that the name of the street is available on the map. I was wondering if there was a trick to get the streets' names in those regions?
Thanks for your help.
The example you reference returns the formatted_address of the 2nd entry ("[1]") in the results array. The most detailed entry is usually the 1st entry ("[0]"). If I change the code to use that, I get the street name.
proof of concept fiddle
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 40.731,
lng: -73.997
}
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
document.getElementById('submit').addEventListener('click', function() {
geocodeLatLng(geocoder, map, infowindow);
});
}
function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {
lat: parseFloat(latlngStr[0]),
lng: parseFloat(latlngStr[1])
};
geocoder.geocode({
'location': latlng
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[0]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
map.setCenter(latlng);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style> <style> #floating-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#latlng {
width: 225px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="floating-panel">
<input id="latlng" type="text" value="36.82687, 10.09948">
<input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
If you really only want the street name, you should not depend on the entry in the results array, you should iterate through the results of the first (most exact) entry, looking for the address_component with type route
proof of concept fiddle
code snippet:
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 40.731,
lng: -73.997
}
});
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function(evt) {
geocodeLatLng(evt.latLng, geocoder, map, infowindow);
});
document.getElementById('submit').addEventListener('click', function() {
geocodeLatLngForm(geocoder, map, infowindow);
});
}
function geocodeLatLngForm(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {
lat: parseFloat(latlngStr[0]),
lng: parseFloat(latlngStr[1])
};
geocodeLatLng(latlng, geocoder, map, infowindow);
}
function geocodeLatLng(latlng, geocoder, map, infowindow) {
geocoder.geocode({
'location': latlng
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[0]) {
map.setZoom(15);
if (marker && marker.setMap) {
marker.setMap(null);
}
marker = new google.maps.Marker({
position: latlng,
map: map
});
map.setCenter(latlng);
// find the street name of the first entry
var street_name = "not available";
for (var i = 0; i < results[0].address_components.length; i++) {
for (var j = 0; j < results[0].address_components[i].types.length; j++) {
if (results[0].address_components[i].types[j] == "route") {
street_name = results[0].address_components[i].long_name;
break;
}
}
}
infowindow.setContent(street_name);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style> <style> #floating-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#latlng {
width: 225px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="floating-panel">
<input id="latlng" type="text" value="36.82687, 10.09948">
<input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
So on my site I'm using Google Maps + Streetview:
https://developers.google.com/maps/documentation/javascript/examples/streetview-simple
Also I'm using standard searchbox with autocomplete, the problem is when I enter some locations, there is no streetview, just Photo Sphere image without any controls for moving around like in standard streetview...
I really don't want Photo Sphere, because I want my users to freely move around with street view, and now they sometimes get "trapped" in one Photo Sphere image... Is there a way I can force streetview without Photo Sphere?
I'm not sure how to turn off PhotoSpheres, but I did find a workaround that may be useful to you. I noticed at https://developers.google.com/maps/documentation/javascript/reference#StreetViewSource that when searching for a location, if you set the source to OUTDOOR, then PhotoSpheres are not returned.
Therefore, if you add listeners for location changes, and then search for the location without PhotoSpheres, I think you should be able to prevent them from showing up.
Here is a modified google maps example to illustrate:
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete without PhotoSpheres</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map, #pano {
height: 100%;
width: 50%;
float:left;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="map"></div>
<div id="pano"></div>
<script>
var map;
var panorama;
var streetViewService;
var DEFAULT_PROXIMITY = 50;
var MAX_PROXIMITY = 10000;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = /** #type {!HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
//autocomplete.bindTo('bounds', map);
streetViewService = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: {lat: -33.8688, lng: 151.2195},
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.location) {
findClosestStreetView(place.geometry.location, DEFAULT_PROXIMITY);
}
});
function findClosestStreetView(point, proximity) {
streetViewService.getPanorama({location: point, radius: proximity, source: google.maps.StreetViewSource.OUTDOOR}, function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
map.panTo(data.location.latLng);
panorama.setPano(data.location.pano);
} else {
if (proximity < MAX_PROXIMITY) {
findClosestStreetView(point, proximity + 50);
} else {
// NO PANARAMA FOUND - do something else here...
panorama.setVisible(false);
}
}
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places&callback=initMap" async defer></script>
</body>
</html>