I am trying to figure out an issue with a google maps API and this is listed on their site for free tier support.
I am writing a javascript for a website so visitors can either pick a location to visit the site be it an airport or George Washington Bridge (this is in NYC). I am trying to get an option for the user to use their current location for direction other instead of a landmark. Every type of code I have seen online to do this results in a blank page to be returned. I am trying to get the javascript to work sort of like https://www.google.com/maps?saddr=My+Location&daddr=161+Fort+Washington+Avenue+New+York+NY+10032 but not as an embed (for some reason my server ID gives me an embed error after turning on the google maps api for it). Here is the working code I have now,
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#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;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
float: left;
width: 70%;
height: 100%;
}
#right-panel {
margin: 20px;
border-width: 2px;
width: 20%;
float: left;
text-align: left;
padding-top: 20px;
}
#directions-panel {
margin-top: 20px;
background-color: #FFEE77;
padding: 10px;
}
</style>
<div id="map"></div>
<div id="right-panel">
<div>
<b>Start:</b>
<select id="start">
<option value="fort lee, new jersey">Fort Lee</option>
<option value="Newark Internation Airport">Newark International Airport</option>
<option value="JFK international airport">JFK international Airport</option>
<option value="Laguardia International Airport">Laguardia International Airport</option>
<option value="Goerge Washington Bridge">George Washington Bridge</option>
<option value="Lincon Tunnel">Lincoln Tunnel</option>
</select>
<br>
<b>End:</b>
<select id="end">
<option value="fort lee, new jersey">Fort Lee</option>
<option value="Newark Internation Airport">Newark International Airport</option>
<option value="JFK international airport">JFK international Airport</option>
<option value="Laguardia International Airport">Laguardia International Airport</option>
<option value="Goerge Washington Bridge">George Washington Bridge</option>
<option value="Lincon Tunnel">Lincoln Tunnel</option>
</select>
<br>
<input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('right-panel')
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 40.7127, lng:-74.0059}
});
directionsDisplay.setMap(map);
document.getElementById('submit').addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: google.maps.TravelMode.DRIVING,
avoidTolls: true
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions-panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
'</b><br>';
summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
}
} 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&sensor=true">
</script>
The end points will eventually be converted into radio buttons with text elements but the one issue I am having is getting the html/javascript to get a user location and not show a white screen. If I change the driving mode to RECOMMENDED it doesn't show up. Recommended appears to be the default for the maps site. I am also unsure if the avoid tolls flag is active in the script.
Hopefully I have provided detailed enough information, I haven't coded in HTML for some time and my javascript training is minimal at best.
The script to find location on the google API sample is :
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
and it works fine alone but when I compound it with the other code using pos.lat and pos.lng as starting point the window is blank. I have also tried the recommendation from Get Current Location On Google Map and How to get Client location using Google Maps API v3? but when I put the javascript for location anywhere into script tags the window I am testing in is blank. I have a feeling I am doing something simple wrong.
