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);
}
});
}
Related
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>
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
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>
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;">
This below code displaying only the div portion it is not loading the map can one help thank in advance
i reffered to the following page:
https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionService();
var map;
var haight = new google.maps.LatLng(19.20,21.02);
var oceanBeach = new google.maps.LatLng(14.22,18.22);
function initialize(){
directionDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
};
map = new google.maps.Map(document.getElementById('googleMap'),mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute(){
var selectMode = document.getElementById('mode').value;
var request = {
origing: haight,
destination: oceanBeach,
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status){
if( status === google.maps.setDirectionsStatus.OK){
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<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>
<div id="googleMap" style="width:800px;height:600px; left: 200px; top: 50px "/> </body>
</html>