Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Google maps API dropdownbox question

    Hey, a codingnoob here.

    I have to make an app for a schoolproject and I'm a total javascript beginner.
    I have been messing around with a sample code, but I need to add a dropdownbox to the code.

    Point A has to be a Geolocation and Point B has to be the location of the dropdown box. Now I've looked at sample codes and have a general idea but I can not for the life of me get it to work correctly, I'm hoping one of you fine gentleman can help me out... it should be simple but I cant get it to work.

    Code:
    (function () {
    						var directionsService = new google.maps.DirectionsService(),
    							directionsDisplay = new google.maps.DirectionsRenderer(),
    							createMap = function (start) {
    								var travel = {
    										origin : (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,
    										destination : "Fahrenheitstraat, The Netherlands",
    										travelMode : google.maps.DirectionsTravelMode.DRIVING
    										// Exchanging DRIVING to WALKING above can prove quite amusing :-)
    									},
    									mapOptions = {
    										zoom: 10,
    										// Default view: downtown Stockholm
    										center : new google.maps.LatLng(52.0758733, 4.2721553),
    										mapTypeId: google.maps.MapTypeId.ROADMAP
    									};
    
    								map = new google.maps.Map(document.getElementById("map"), mapOptions);
    								directionsDisplay.setMap(map);
    								directionsDisplay.setPanel(document.getElementById("map-directions"));
    								directionsService.route(travel, function(result, status) {
    									if (status === google.maps.DirectionsStatus.OK) {
    										directionsDisplay.setDirections(result);
    									}
    								});
    							};
    
    							// Check for geolocation support	
    							if (navigator.geolocation) {
    								navigator.geolocation.getCurrentPosition(function (position) {
    										// Success!
    										createMap({
    											coords : true,
    											lat : position.coords.latitude,
    											lng : position.coords.longitude
    										});
    									}, 
    									function () {
    										// Gelocation fallback: Defaults to Stockholm, Sweden
    										createMap({
    											coords : false,
    											address : "Den Haag, Nederland"
    										});
    									}
    								);
    							}
    							else {
    								// No geolocation fallback: Defaults to Lisbon, Portugal
    								createMap({
    									coords : false,
    									address : "Lisbon, Portugal"
    								});
    							}
    					})();

    Normally I like to figure out things myself but the deadline is coming up and I'm tired and having problems at home so I'm not sure how much time i've got left.

    I tried doing something like this:
    Code:
    function calcRoute() {
        var start = (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,;
        var end = document.getElementById("end").value;
        var distanceInput = document.getElementById("distance");
    but to no avail

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Ummm...and where, pray tell, is the HTML of the dropdown box? (I am assuming you mean a <select>?)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes I mean a select.


    Code:
    <select id="end" onchange="calcRoute()">
            <option value="Amsterdam, Netherlands">Kneets Gym</option>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Ummm...as your code is written in the first post, you can *NOT* use onchange in the <select..

    Your code in the first post is, actually, very well done. It's "unobtrusive javascript", meaning that no code outside of that first ( and the matching ) will ever be seen by other scripts.

    But "other scripts" *ALSO* includes stuff like <select ... onchange="calcRoute()>

    What you need to do is omit the onchange from the <select> and add it in via JS code inside your "unobtrusive javasccript".

    That is, something like:
    Code:
    (
      function( )
     {
          ... any code ...
    
          document.getElementById("end").onchange = calcRoute;
    
          function calcRoute( ) 
         {
             var start = (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,; 
             var end = this.value; // this *will* refer to the <select>!
             var distanceInput = document.getElementById("distance");
             ... etc. ...
    
         }
         ...
    
    )();
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •