input for google maps directions - javascript

I am trying to create a google maps window where the user inputs there location (marker a) to give them directions to a set location (marker b) preferably using an input box and submit button. this is what i have at the moment, location A is declared in the code and cant be moved in the window. I haven't been able to successfully create this input box so I am wondering if there is anyone who can help me
This is the code I have so far
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Directions Example</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial; font-size: 12px;">
<div style="width: 600px;">
<div id="map" style="width: 280px; height: 400px; float: left;"></div>
<div id="panel" style="width: 300px; float: right;"></div>
</div>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
var request = {
origin: 'Dublin',
destination: '53.4198282,-6.2183937',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
</script>
</body>
</html>
And this is the output:
http://i.stack.imgur.com/R80oB.png
Any help on this would be appreciated
thanks

So what you want to do here is capture the value of an input field when the user enters it and pass that in as the origin rather than using a hardcoded string as you are now.
This should get you started:
HTML:
<div class="address-form">
Enter your address: <input id="address" type="text" />
<input id="submit" type="submit" />
</div>
JS:
$('#submit').click(function() {
var address = $('#address').val();
var request = {
origin: address,
destination: '53.4198282,-6.2183937',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
JSFiddle

Related

google maps api additional search box

I am struggling to introduce a second search to place a marker like the first search.
I have worked out the coding as below for a general search and marker place and as you can see and have added an extra search box but cannot work out how to make that search box do the same as the first.
Basically I am trying to mark two separate locations simultaneously with one submit button.
Can anyone help or point me in the right direction please
<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//declare namespace
var up206b = {};
//declare map
var map;
function trace(message)
{
if (typeof console != 'undefined')
{
console.log(message);
}
}
up206b.initialize = function()
{
var latlng = new google.maps.LatLng(34.070264, -118.4440562);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var geocoder = new google.maps.Geocoder();`
up206b.geocode = function()
{
var address = $('#address').val();
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);
}
});
}
up206b.geocode = function()
{
var address = $('#address').val();
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);
}
});
}
var address = $('#address').val();
</script>
</head>
<body onload="up206b.initialize()">
<div style= "float:left">
</div>
<div style="width:380px; height: 100%; overflow:auto; float:right; padding-left:10px; padding-right:10px;">
<h1>Map Search</h1>
<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;">
<input type="text" id="address">
<input type="text" id="">
<input type="button" value="Submit" onClick="up206b.geocode()">
</div>
</div>
<div id="map_canvas" style="height:100%; margin-left:400px;"></div>
</body>
</html>
Get value of both inputs, geocode the values that exist and add them to the map.
<!DOCTYPE html>
<html>
<head>
<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//declare namespace
var up206b = {};
//declare map
var map;
function trace(message)
{
if (typeof console != 'undefined')
{
console.log(message);
}
}
up206b.initialize = function()
{
var latlng = new google.maps.LatLng(34.070264, -118.4440562);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var geocoder = new google.maps.Geocoder();
up206b.geocode = function()
{
var addresses = [ $('#address').val(), $('#address2').val()];
addresses.forEach(function(address){
if(address){
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);
}
});
}
});
}
</script>
</head>
<body onload="up206b.initialize()">
<div style="position: absolute; top: 0; right: 0; width:380px; height: 500px; overflow:auto; float:right; padding-left:10px; padding-right:10px;">
<h1>Map Search</h1>
<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;">
<input type="text" id="address">
<input type="text" id="address2">
<input type="button" value="Submit" onClick="up206b.geocode()">
</div>
</div>
<div id="map_canvas" style="height: 500px; width: 500px;"></div>
</body>
</html>

How to Add Loading Message while Google Map Populates Directions

I have the following script which will load directions to Las Vegas from the browser location:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3 Directions Example</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial; font-size: 12px;">
<div style="width: 600px;">
<div id="map" style="width: 280px; height: 400px; float: left;"></div>
<div id="panel" style="width: 300px; float: right;"></div>
</div>
<script type="text/javascript">
var mylat,mylong,request;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
mylat= location.coords.latitude;
mylong = location.coords.longitude;
request = {
origin: mylat+','+mylong,
destination: '35.580789,-105.210571',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
</body>
</html>
This works great for what I need, but as you can see this leaves some down time while the page loads. I would like to add a message that tells the user to hold while the directions are loading. From what I can tell I just need to add an event listener while loading. Here is the sample I am trying to use:
google.maps.event.addListenerOnce(map, 'idle', function(){
document.write("<p>please hold while loading</p>");
});
I have tried to add this to a few locations in the script, but it is not loading during the downtime, but rather after the page loads. Any suggestions on how I can adjust this listener in the code for display only during downtime?
Not sure but still try
<script type="text/javascript">
document.write("<p id='loader'>please hold while loading</p>");
.....
......
function GetLocation(location) {
............................
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
document.getElementById('loader').innerHTML = "Map loaded";
}
}
</script>

Google Maps API, driving directions rendering

I am trying to make a call to google maps api to display driving directions based on 2 inputted locations. My skill level is newb.
I am using a notepad to render my html (by pressing ctrl+shift+alt+R), I also tried using xampp to host a local server and then open my html on local (by placing it into htdocs file). While using both of those methods of rendering, each time I input my addresses, the map just blinks and no results are displayed. Is the issue my code or the way I am rendering it? If its the way I am rendering it, could someone please suggest another way I could see/render my html? Thank you very much. Martin
Code:
<!DOCTYPE html>
<html>
<head profile="http://gmpg.org/xfn/11"><style type="text/css">.gm-style .gm-style-mtc
label,.gm-style .gm-style-mtc div{font-weight:400}</style>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% ;position:relative;z-index:1}
#panel {
position: fixed;
bottom: 35px;
background: rgba(99,99,99,0.7);
width: 97.75%;
border:3px solid; #FF3D03
border-radius:3px;
z-index: 15;
font-weight: bold;
font-family: arial;
font-style: normal;
padding: 2px 0px 2px 24px;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyAzbS2nerrvbdvNlsyQO9cDWFNthdoswRU&sensor=false">
</script>
<div id="map_canvas">
<script type="text/javascript">
var address = new google.maps.LatLng(31.208647, 7.861769);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
<!------------------------------------------------------->
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
center: address,
zoom: 16,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
directionsDisplay.setMap(map);
}
<!------------------------------------------------------->
function calcRoute() {
var start = document.forms["frame1"]["address0"].value;
var end = document.forms["frame1"]["address1"].value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
<!------------------------------------------------------->
// var myTitle = document.createElement('h1');
// myTitle.style.color = 'red';
// myTitle.innerHTML = 'menu would go here';
// var myTextDiv = document.createElement('div');
// myTextDiv.appendChild(myTitle);
// map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(myTextDiv);
// var marker = new google.maps.Marker({
// position: new google.maps.LatLng(33.6803003, -116.173894),
// title: "Festival" });
// marker.setMap(map);}
<!------------------------------------------------------->
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</div>
</head>
<!-------------------------------------------------------------------------------->
<body>
<!------------------------------------------------------->
<!-------------------------------------------------------->
<div id="panel" style="color:#ffffff; font-size:18px;" >
<form name="frame1" onsubmit="calcRoute();">
<b>Start: </b>
<input type="text" name="address0">
<b>First Address: </b>
<input type="text" name="address1">
<input type="submit" style="visibility: hidden;">
</form>
</div>
<div id="map-canvas"/>
<!------------------------------------------------------->
<!------------------------------------------------------->
</body>
</html>
Your form submission is reloading the page, destroying the directions response. Change:
<form name="frame1" onsubmit="calcRoute();">
To:
<form name="frame1" onsubmit="calcRoute();return false;">

Google maps driving directions: Substitution of javascript values?

Somewhere at stackoverflow I found this (slightly modified by me) to render basic driving instructions from Google maps:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3 Directions Example</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=de"></script>
</head>
<body style="font-family: Arial; font-size: 12px;">
<div style="width: 600px;">
<div id="map" style="width: 500px; height: 400px; float: left;"></div>
<div id="panel" style="width: 500px; float: left;"></div>
</div>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
var request = {
origin: 'An der Alster 1, Hamburg',
destination: 'Albada 1, Cala Llombards, Mallorca',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
</script>
</body>
</html>
I have modified the example a bit to fit my Kindle screen - now, as my JavaScript is really bad - how do I update this to have two text boxes at the top to ask for origin and destination, and maybe two radio boxes to let me select the value for travelMode (DRIVINGand WALKING)?
Thanks!
Full copy-and-paste answer:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3 Directions Example</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=de"></script>
</head>
<body style="font-family: Arial; font-size: 12px;">
Start:<input type="text" id="start"><br>
Ende: <input type="text" id="end"><br>
<div>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">Auto</option>
<option value="WALKING">zu Fuß</option>
</select><br>
<input type="button" value="Los" onclick="calcRoute();">
</div>
<br>
<div style="width: 600px;">
<div id="map" style="width: 400px; height: 400px; float: left;"></div>
<div id="panel" style="width: 400px; float: left;"></div>
</div>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
var request = {
origin: '',
destination: '',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
function calcRoute() {
var selectedMode = document.getElementById("mode").value;
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
</script>
</body>
</html>
See the below markup and code which takes input from textboxes and also the travelling mode from a dropdownbox-
HTML-
Start:<input type="text" id="start">
End:<input type="text" id="end">
<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>
Javascript-
function calcRoute() {
var selectedMode = document.getElementById("mode").value;
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}

Can someone show me how I can debug this html form/javascript combination?

I'm experimenting with the Google Maps API, and am trying to do a barebones directions app. The form calls the calcRoute() function, which, using alerts, I can see does have the correct 'start' and 'end' variables defined. However, the page is simply reloaded with the form cleared and the map unchanged. For the life of me, I can't figure out what's wrong. Does anybody see anything glaring/what might be causing the problem? Thanks!
Also, apparently I suck at stackoverflow markdown, so here's a pastebin link: http://pastebin.com/BMThntPz
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Maps script -->
<script type="text/javascript" <google maps api> </script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var philadelphia = new google.maps.LatLng(39.9522, -75.1642);
var mapOptions = {
center: philadelphia,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
</head>
<body onload="initialize()">
<div class="container" style="height: 100%">
<div>
<form class="form-horizontal" onsubmit="return calcRoute()">
<input type="text" class="input-xlarge" id="start">
<input type="text" class="input-xlarge" id="end">
<input class="btn" type="submit" value="Let's go!">
</form> <!-- /trip info -->
</div>
<div>
<div id="map_canvas" ></div>
</div>
</div> <!-- /container -->
</body>
</html>
There's a great screencast that shows how to debug the Maps API using Chrome Developer Tools:
http://www.youtube.com/watch?v=nb4gvrNrDWw&feature=player_embedded

Categories