I'm trying to implement text search fields in the Google Places API, I created text fields as well as a click event that leads to the 'calcRoute()' function. I'm having trouble setting the in the text fields to the variable 'start' and 'end' (at least I think that's the porblem). Can anyone help me out? The directions list should appear on the right of the map.
<!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>
html, body, #map-canvas {
height: 80%%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<style>
#directions-panel {
height: 80%%;
float: right;
width: 390px;
overflow: auto;
}
#map-canvas {
margin-right: 400px;
}
#control {
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-canvas {
height: 500px;
margin: 0;
}
#directions-panel {
float: none;
width: auto;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"> </script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(41.850033, -87.6500523)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.TRANSIT
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="control">
<strong>Start:</strong>
<input type="text" data-bind="value:start"/>
<strong>End:</strong>
<input type="text" data-bind="value:end"/>
<button onclick="calcRoute()">Get Directions</button>
</div>
<div id="directions-panel"></div>
<div id="map-canvas"></div>
</body>
</html>
I think you're using getElementById without setting any IDs in your HTML
<!-- Elements don't have IDs -->
<input type="text" data-bind="value:start"/>
<input type="text" data-bind="value:end"/>
Try this:
<input id="start" type="text" data-bind="value:start"/>
<input id="end" type="text" data-bind="value:end"/>
Now when this code gets called, the elements should be found
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
Related
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.");
}
I am trying to get travel time with traffic between two locations.
I have followed the documentation guide with all details, but I always get a fixed traveltime between two points regardless to trafficmodel: (best_guess, pessimistic or optimistic).
Also, I tried to change the value of departure time to different dates in future but I always get the same result.
Edit:
I am using a standard API key.
Also, I have tried to change date format for [departureTime:] but did not help.
My main goal is to get travel time on links with traffic.
Thanks for helping.
Here is my HTML and Javascriptcode:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="">
<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>
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;
}
#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>Get TravelTime in Traffic</strong>
</div>
<div id="right-panel"></div>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&callback=initMap">
</script>
<script>
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 30.114114, lng: 31.420595}
});
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);
calculateAndDisplayRoute(directionsService, directionsDisplay);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: "11 The Ring Road, Al Khosous, Al Khankah, Al Qalyubia Governorate, Egypt",
destination: " El-Shams Sporting Club, Al Matar, Qism El-Nozha, Cairo Governorate, Egypt",
travelMode: google.maps.TravelMode.DRIVING,
drivingOptions: {
departureTime: new Date("June 14, 2016 11:13:00"),
trafficModel: google.maps.TrafficModel.PESSIMISTIC
}
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
</body>
</html>
It seems this has nothing to do with your code. Instead, it is a matter of licensing. Your are using Driving Options (BEST_GUESS, OPTIMISTIC,PESSIMISTIC) which is a feature that belongs to Premium Plan clients. The way I see it, you need to buy the license first and use the Premium clientID before you can use this.
"You must supply a Google Maps APIs Premium Plan client ID when
loading the API if you want to include a drivingOptions field in the
DistanceMatrixRequest."
Your client ID
Upon purchasing your Google Maps APIs Premium Plan license, you will receive a welcome email from Google that contains your client ID. Your client ID is used to access the special features of Google Maps APIs Premium Plan. All client IDs begin with a gme- prefix.
This client ID is not a key. It will only work from URLs which you authorize, so you don't need to worry about keeping it secret.
Maybe your date format is not correct ?
Try :
departureTime: new Date("2016-06-14T11:13:00");
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>
I tried to add place search and text directions with setPanel() together. but i couldn't do it.
i want to add this options together.
setPanel() and placeSearch together.
I'm new to google map api. can anyone help me?
This is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#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: 400px;
}
#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>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
//var places;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chennai = new google.maps.LatLng(13.0475604,80.2089535);
var mapOptions = {
zoom:7,
center: chennai
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
// Create the search box and link it to the UI element.
var input = /** #type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** #type {HTMLInputElement} */(input));
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
alert(places);
});
}
function calcRoute() {
var start = places;
var end = new google.maps.LatLng(41.850033, -87.6500523);
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="pac-input" onchange="calcRoute();" class="controls" type="text" placeholder="Search Box">
<div id="panel"></div>
<div id="map-canvas"></div>
</body>
</html>
ok, when you are using google FormElement you don't have to call calcRoute() in the input element.
Just use following code, and it will work.
1) Google form submission:
var places = searchBox.getPlaces();
calcRoute(places[0].geometry.location);
2) calcRoute Function's first parameter:
var start = new google.maps.LatLng(places.A,places.F);
3) if you want to use setpanel() method, just place this code below directionsDisplay.setMap(map);
this will work.
directionsDisplay.setPanel(document.getElementById('panel'));
I am having issues with overlaying a kml that I have created and have hosted on google drives and locally, with neither working. The documentation with google api help says only a kml that is "publically available" is able to be embeded. How can I get my custom KML/KMZ to be able to embed?
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<html>
<body style="background-color:#FFFFFF;"> </body>
<style type="text/css" media="all">
h2 { font: 2em Times serif; color: #FF9900; }
h1 { font: 2em Times serif; color: #FF9900; }
h3{font: 2em Times serif; color: #003300; }
h1{text-align:top;
position: fixed;
top: 0px;
left: 10px;
margin-left: 0px;
z-index: 5;
}
h2{text-align:top;
position: fixed;
top: 40px;
left: 10px;
margin-left: 0px;
z-index: 5;
}
h3{text-align:top;
position: fixed;
font-size:20px;
top: 100px;
left: 10px;
margin-left: 0px;
z-index: 5;
}
</style>
<h1>Company</h1>
<h2>Business Satisfaction Group</h2>
<h3> ENTER AN ADDRESS AND HIT FIND!</h3>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>company</title>
<style>
html, body, #map-canvas {
height: 70%;
margin: 150px;
padding: 50px;
top: -360px;
left:-520px;
}
#panel {
position: absolute;
top:150px;
left: 10%;
margin-left: -150px;
z-index: 5;
background-color: #003300;
padding: 5px;
border: 0px solid #FFFFFF;
}
img {
position: absolute;
left: 1500px;
top: 50px;
z-index: -1;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(39.089411, -94.579096);
var mapOptions = {
zoom: 10,
center: latlng
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var myLatlng = new google.maps.LatLng(38.879894,-94.617853);
var marker = new google.maps.Marker();
// Function to load KML overlay\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
var KML_Overlay = new google.maps.KmlLayer({
url: 'Local URL from my '
});
KML_Overlay.setMap(map);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input id="address" type="textbox" value="">
<input type="button" value="FIND" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
</html>