CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-maps
EoghanBradshaw
EoghanBradshaw

Reputation: 69

input for google maps directions

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:

https://i.sstatic.net/R80oB.png

Any help on this would be appreciated

thanks

Upvotes: 0

Views: 3235

Answers (1)

APAD1
APAD1

Reputation: 13666

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

Upvotes: 2

Related Questions