Waypoint problems, does not create a route

carl palsson

unread,

Dec 27, 2010, 9:16:51 AM12/27/10

to google-map...@googlegroups.com

Hi! I have upgraded the store locator that are used in the code examples at Google. I have added some features but I got really stuck on the waypoints part.

Here´s my page adress: http://www.hittamvc.se/karta/phpsqlsearch_map4.html

Lots n Lots of alerts for debugging...

Heres my problem, Im only using ONE waypoint, and it´s location is determined by the div to the right on the page.

So to test my function youll have to.

1. load the page,
2. Click on the div to the right, waypoint position is set.
3. change change the dropdowing (reading stockholm) to "Luleå"

Now it's supposed to create a route from your initial position via the waypoint fetched from the div(one of the markers created on the map, and the to either luleå or if you switch it back to stockholm.

BUT it does not work? I can't see the problem?

Can any1 help me out?

Here the function called when scrollbar changes

function calcRoute() {
    var start = initialLocation; //document.getElementById("latlng").value;
    var end = document.getElementById("end").value;
    //var waypt = waypointen;
    var waypts = [];
    waypts[0] = waypointen;

    alert("Från: " + start + "Förskola: " + waypts + "Till:" + end);
    var request = {
        origin:start,
        destination:end,
        waypoints: waypts,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
}

Side bar giving the waypoint its value

function createSidebarEntry(marker, name, address, distance) {
      alert(marker);

    var div = document.createElement('div');
      var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px';

      google.maps.event.addDomListener(div, 'click', function() {
        google.maps.event.trigger(marker, 'click');
        alert("Innan positioneringshämtning är positionen" + waypointen);
        waypointen = marker.getPosition();
    alert("Du har klickat på en marker, med positionen" + waypointen );
      });
      google.maps.event.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      google.maps.event.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }

The whole code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Google Maps AJAX + mySQL/PHP Example</title>
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>

    <script type="text/javascript">

    //<![CDATA[
    var map;
    var markers = [];
    var marker2;
    var browserSupportFlag = new Boolean();
    var locationSelect;
    var sidebaren;
    var markers2 = [];
    var sidebar;
    var initialLocation;
    var initialLocation2;
    var siberia = new google.maps.LatLng(60, 105);
    var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
    var infowindow = new google.maps.InfoWindow();
    var lat2;
    var lat3;
    var long2;
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var waypointen;

    function load() {
    //Sätter directions objeketet
    directionsDisplay = new google.maps.DirectionsRenderer();

    var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
    //sätter map objektet och vart de ska placeras
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    //Spikar vart vart vägvisningarna ska visas
    directionsDisplay.setMap(map);

// Try W3C Geolocation method (Preferred)
if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    //skapar ett LatLng objekt, fler objekt kan skapas se hos google´s API referens
    lat2 = new google.maps.LatLng();

    //Använder en av objektetsmetoder, fler metoder finns hos Google's API referens
    lat3 = lat2.lat();

    alert(lat3);
    //initialLocation2 = initialLocation.replace(/[\(\)\.\-\s,]/g, "");
    // initialLocation2 = initialLocation.replace(/\(.*?\)/g,'');
    contentString = ""+ initialLocation;
      map.setCenter(initialLocation);
    // alert(initiallocation);

    document.getElementById("latlng").value = initialLocation;
    map.setZoom(11);
    //söker i närheten
    alert("Nu ska sökningen börja");
    searchLocationsNear(initialLocation);
    // marker2 = new google.maps.marker({
     //         position: initialLocation,
     //         map: map
     //     });
    infowindow.setContent(contentString);
      infowindow.setPosition(initialLocation);
      infowindow.open(map);
    var text = ("Här bor du");
    createMarker2(initialLocation, text);



    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
} else if (google.gears) {
    // Try Google Gears Geolocation
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      contentString = "Location found using Google Gears";
      map.setCenter(initialLocation);
      infowindow.setContent(contentString);
      infowindow.setPosition(initialLocation);
      infowindow.open(map);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
} else {
    // Browser doesn't support Geolocation
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
}

//    map = new google.maps.Map(document.getElementById("map"), {
       // center: new google.maps.LatLng(40, -100),
//      zoom: 4,
    //    mapTypeId: 'roadmap',
      // mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
     // });







    sidebaren = document.getElementById("sidebar");
    sidebar = document.getElementById("sidebar");

    ///Scrollen byts då körs detta!
    locationSelect = document.getElementById("locationSelect");
      //Funktionen för att visa rätt info window och visa rätt marker
    locationSelect.onchange = function() {
        var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
        if (markerNum != "none"){
          google.maps.event.trigger(markers[markerNum], 'click');
        }
      };
    ///Kollar vart användaren klickar, lyssnar efter dem
    google.maps.event.addListener(map, 'click', function(event) {
      var mylatlng = event.latLng;
    var lat = mylatlng.lat();
    var lng = mylatlng.lng();




    // new google.maps.InfoWindow({
    // position: event.latLng,
    // content: event.latLng.toString()
    //}).open(map);
    document.getElementById("latbox").value = lat;
    document.getElementById("lonbox").value = lng;


});



}

function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
    initialLocation = newyork;
    contentString = "Error: The Geolocation service failed.";
} else {
    initialLocation = siberia;
    contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
}
map.setCenter(initialLocation);
infowindow.setContent(contentString);
infowindow.setPosition(initialLocation);
infowindow.open(map);
}



   function searchLocations() {
     var address = document.getElementById("addressInput").value;
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({address: address}, function(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
       alert("" + results[0].geometry.location);
        searchLocationsNear(results[0].geometry.location);
       } else {
         alert(address + ' not found');
       }
     });
   }

   function clearLocations() {
     infowindow.close();
     for (var i = 0; i < markers.length; i++) {
       markers[i].setMap(null);
     }
     markers.length = 0;

     locationSelect.innerHTML = "";
     var option = document.createElement("option");
     option.value = "none";
     option.innerHTML = "See all results:";
     locationSelect.appendChild(option);
   }



   function searchLocationsNear(center) {
     clearLocations();

     var radius = document.getElementById('radiusSelect').value;
     var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
     downloadUrl(searchUrl, function(data) {
       var xml = parseXml(data);
       var markerNodes = xml.documentElement.getElementsByTagName("marker");
       var bounds = new google.maps.LatLngBounds();


       var sidebar = document.getElementById('sidebar');
       sidebar.innerHTML = '';
       if (markerNodes.length == 0) {
         sidebar.innerHTML = 'Det finns inga resultat att visa';
         map.setCenter(new google.maps.LatLng(40, -100), 4);
         return;
       }

    for (var i = 0; i < markerNodes.length; i++) {
         var name = markerNodes[i].getAttribute("name");
         var address = markerNodes[i].getAttribute("address");
         var distance = parseFloat(markerNodes[i].getAttribute("distance"));
         var latlng = new google.maps.LatLng(
              parseFloat(markerNodes[i].getAttribute("lat")),
              parseFloat(markerNodes[i].getAttribute("lng")));



        //Kallar på funktionerna för att skapa markers och Option entries och numera Sidebar!
         createOption(name, distance, i);// option rutan
        // createsidebar(name, distance, i); //Sidebaren
         createMarker(latlng, name, address); //Skapa marker
         bounds.extend(latlng);

       //Nytt stuff
        var marker = createMarker(latlng, name, address);
         bounds.extend(latlng);
        alert(name);
        var sidebarEntry = createSidebarEntry(marker, name, address, distance);
         sidebar.appendChild(sidebarEntry);


       }
       map.fitBounds(bounds);



       locationSelect.style.visibility = "visible";
       locationSelect.onchange = function() {
         var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
         google.maps.event.trigger(markers[markerNum], 'click');




        //markers2[name] = marker;


       };
      });
    }


    function createMarker(latlng, name, address) {
      var html = "<b>" + name + "</b> <br/>" + address;
      var marker = new google.maps.Marker({
        map: map,
        position: latlng
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
      });
     // markers.push(marker);
        return marker;
    }

    function createMarker2(initialLocation, text) {
      var html = "<b>" + initialLocation + "</b> <br/>" + text;
      var marker = new google.maps.Marker({
        map: map,
        position: initialLocation
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
      });
     // markers.push(marker);
        return marker;
    }

    function calcRoute() {
    var start = initialLocation; //document.getElementById("latlng").value;
    var end = document.getElementById("end").value;
    //var waypt = waypointen;
    var waypts = [];
    waypts[0] = waypointen;

    alert("Från: " + start + "Förskola: " + waypts + "Till:" + end);
    var request = {
        origin:start,
        destination:end,
        waypoints: waypts,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
}



    function createOption(name, distance, num) {
      var option = document.createElement("option");
    // alert(num); kollar vad num innehåller
      option.value = num;
      option.innerHTML = name + "(" + distance.toFixed(1) + ")";
      locationSelect.appendChild(option);
    }

    function createsidebar(name, distance, i, marker){
    alert(name + " " + i + " " + marker);

    var divTag = document.createElement("div");

    divTag.innerHTML = name + " Km från dig " + distance.toFixed(1);
    divTag.style.zIndex = 2;
    sidebaren.appendChild(divTag);

    divTag.onclick = function(){
       google.maps.event.trigger(marker2[name], 'click');
      };
    google.maps.event.addDomListener(divTag, 'mouseover', function() {
        divTag.style.backgroundColor = '#99C199';
      });
      google.maps.event.addDomListener(divTag, 'mouseout', function() {
        divTag.style.backgroundColor = '#fff';
      });

    return divTag;

    }

    function createSidebarEntry(marker, name, address, distance) {
      alert(marker);

    var div = document.createElement('div');
      var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px';

      google.maps.event.addDomListener(div, 'click', function() {
        google.maps.event.trigger(marker, 'click');
        alert("Innan positioneringshämtning är positionen" + waypointen);
        waypointen = marker.getPosition();
    alert("Du har klickat på en marker, med positionen" + waypointen );
      });
      google.maps.event.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      google.maps.event.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }




    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
      } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
      }
    }

    function doNothing() {}

    //]]>
</script>
</head>

<body style="margin:0px; padding:0px;" onload="load()">
    <div>
     <input type="text" id="addressInput" size="10"/>
    <select id="radiusSelect">
      <option value="1">1km</option>
      <option value="2,5">2,5km</option>
      <option value="11,5" selected>11,5km</option>
    </select>

    <input type="button" onclick="searchLocations()" value="Search"/>
    <input type="text" id="latlng">
    <input type="text" id="reversegeocoding"value="Här kommer baklängesadressen">

<select id="end" onchange="calcRoute();">
<option value="stockholm ">stockholm</option>
<option value="luleå">luleå</option>
<option value="joplin, mo">Joplin, MO</option>
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
<option value="flagstaff, az">Flagstaff, AZ</option>
<option value="winona, az">Winona</option>
<option value="kingman, az">Kingman</option>
<option value="barstow, ca">Barstow</option>
<option value="san bernardino, ca">San Bernardino</option>
<option value="los angeles, ca">Los Angeles</option>
</select>


    </div>
    <div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
    <div id="sidebar" style="border: 3px solid rgb(0, 0, 0);width:250px; height:400px; top:75px; right:20px; z-index:1; position:absolute;"></div>
    <div id="map_canvas" style="width: 100%; height: 80%"></div>
    <div>

    <form action="insertintodb2.php" onSubmit="return validateform()" method="POST">
    <span class="ss-q-title">Markerdata!</span>
<br>
            Latitude:
          <input size="19" type="text" id="latbox" class="ss-q-short" name="latbox" value="" >
<br>
            Longitude:
          <input size="19" type="text" id="lonbox" class="ss-q-short" name="lonbox" value="" >
<br>
            Name:
            <input size="19" type="text" id="3" class="ss-q-short" name="name" value="" >

<br>
             Address:
          <input size="19" type="text" id="addressen" class="ss-q-short" name="addressen" value="" >
<br>
          <br><br>

    <input type="submit" value="Submit" name="submit" />
    </form>

    </div>
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>

</body>
</html>

carl palsson

unread,

Dec 27, 2010, 9:26:14 AM12/27/10

to google-map...@googlegroups.com

Update! the problem I get is the following.

Error: Error in propertry <waypoints>: (invalid value: (57.699032, 11.907464) (Error in element at position 0: (unknown property <wa>)))
Sourcoded file: http://maps.gstatic.com/intl/sv_se/mapfiles/api-3/3/5/main.js
Row: 14

Rossko

unread,

Dec 27, 2010, 11:46:08 AM12/27/10

to Google Maps JavaScript API v3

> So to test my function youll have to.
>
> 1. load the page,
> 2. Click on the div to the right, waypoint position is set.

Nothing happens for me. This "div to the right" is I guess a black-
bordered box over the map? It has no content for me, perhaps because
geolocation doesn't work for me.

geoco...@gmail.com

unread,

Dec 27, 2010, 12:26:32 PM12/27/10

to Google Maps JavaScript API v3

I have the same problem as Rossko.

But looking at your source, I think the problem is that your waypoints
array is latLng objects, not waypoint objects:
http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsWaypoint

Working example:
http://www.geocodezip.com/v3_GoogleEx_directions-waypointsC.html

-- Larry

carl palsson

unread,

Dec 27, 2010, 4:11:18 PM12/27/10

to google-map...@googlegroups.com

Sorry had no markers at your locations, now do like this.

1. open page - http://www.hittamvc.se/karta/phpsqlsearch_map4.html
2. use the searchbox and search for "new york"
3. click the div to set waypoint
4. choose any american city

thanks a bunch for trying to help ;)

Currently im looking at the waypoint object.

cheers

Reply all

Reply to author

Forward