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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Distance Finder Google API

    Hello Thank you for taking the time to look at my problem .

    I am currently trying to edit code I found from http://www.1stwebdesigner.com/tutori...ogle-maps-api/
    which gives me the distances between 2 locations I am trying to get the distance between 3 locations .

    I am getting 2 errors :
    (1st Error)
    Uncaught TypeError: Cannot call method 'lat' of undefined line 82

    code that belongs to error :

    function showMap()
    {
    // center of the map (compute the mean value between the two locations)
    latlng = new google.maps.LatLng((location1.lat()+location2.lat()+location3.lat())/2,(location1.lng()+location2.lng()+location3.lng())/2);

    (2nd Error)
    Uncaught Error: Error in property line 111
    code that belongs to error:

    waypoints:[location1,location2,location3],

    I'll include the full code below






    <html>
    <head>
    <title>Distance finder</title>
    <meta type="description" content="Find the distance between two places on the map and the shortest route."/>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">

    var location1;
    var location2;
    var location3;

    var address1;
    var address2;
    var address3;

    var latlng;
    var geocoder;
    var map;

    var distance;

    // finds the coordinates for the two locations and calls the showMap() function
    function initialize()
    {
    geocoder = new google.maps.Geocoder(); // creating a new geocode object

    // getting the two address values
    address1 = document.getElementById("address1").value;
    address2 = document.getElementById("address2").value;
    address3 = document.getElementById("address2").value;

    // finding out the coordinates
    if (geocoder)
    {
    geocoder.geocode( { 'address': address1}, function(results, status)
    {
    if (status == google.maps.GeocoderStatus.OK)
    {
    //location of first address (latitude + longitude)
    location1 = results[0].geometry.location;
    } else
    {
    alert("Geocode was not successful for the following reason: " + status);
    }
    });
    geocoder.geocode( { 'address': address2}, function(results, status)
    {
    if (status == google.maps.GeocoderStatus.OK)
    {
    //location of second address (latitude + longitude)
    location2 = results[0].geometry.location;
    // calling the showMap() function to create and show the map
    showMap();
    } else
    {
    alert("Geocode was not successful for the following reason: " + status);
    }

    });
    geocoder.geocode( { 'address': address3}, function(results, status)
    {
    if (status == google.maps.GeocoderStatus.OK)
    {
    //location of second address (latitude + longitude)
    location3 = results[0].geometry.location;
    // calling the showMap() function to create and show the map
    showMap();
    } else
    {
    alert("Sorry we could not find the address following reason: " + status);
    }

    });
    }
    }

    // creates and shows the map
    function showMap()
    {
    // center of the map (compute the mean value between the two locations)
    latlng = new google.maps.LatLng((location1.lat()+location2.lat()+location3.lat())/2,(location1.lng()+location2.lng()+location3.lng())/2);

    // set map options
    // set zoom level
    // set center
    // map type
    var mapOptions =
    {
    zoom: 1,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
    };

    // create a new map object
    // set the div id where it will be shown
    // set the map options
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    // show route between the points
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer(
    {
    suppressMarkers: true,
    suppressInfoWindows: true
    });
    directionsDisplay.setMap(map);
    var request = {
    origin:location1,
    destination:location2,
    waypoints:[location1,location2,location3],
    travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status)
    {
    if (status == google.maps.DirectionsStatus.OK)
    {
    directionsDisplay.setDirections(response);
    distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
    distance += "<br/>The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
    document.getElementById("distance_road").innerHTML = distance;
    }
    });

    // show a line between the two points
    var line = new google.maps.Polyline({
    map: map,
    path: [location1, location2, location3],
    strokeWeight: 7,
    strokeOpacity: 0.8,
    strokeColor: "#FFAA00"
    });

    // create the markers for the two locations
    var marker1 = new google.maps.Marker({
    map: map,
    position: location1,
    title: "First location"
    });
    var marker2 = new google.maps.Marker({
    map: map,
    position: location2,
    title: "Second location"
    });
    var marker3= new google.maps.Marker({
    map: map,
    position: location3,
    title: "Third location"
    });


    // create the text to be shown in the infowindows
    var text1 = '<div id="content">'+
    '<h1 id="firstHeading">First location</h1>'+
    '<div id="bodyContent">'+
    '<p>Coordinates: '+location1+'</p>'+
    '<p>Address: '+address1+'</p>'+
    '</div>'+
    '</div>';

    var text2 = '<div id="content">'+
    '<h1 id="firstHeading">Second location</h1>'+
    '<div id="bodyContent">'+
    '<p>Coordinates: '+location2+'</p>'+
    '<p>Address: '+address2+'</p>'+
    '</div>'+
    '</div>';

    var text3= '<div id="content">'+
    '<h1 id="firstHeading">Second location</h1>'+
    '<div id="bodyContent">'+
    '<p>Coordinates: '+location3+'</p>'+
    '<p>Address: '+address3+'</p>'+
    '</div>'+
    '</div>';


    // create info boxes for the two markers
    var infowindow1 = new google.maps.InfoWindow({
    content: text1
    });
    var infowindow2 = new google.maps.InfoWindow({
    content: text2
    });
    var infowindow3 = new google.maps.InfoWindow({
    content: text3
    });


    // add action events so the info windows will be shown when the marker is clicked
    google.maps.event.addListener(marker1, 'click', function() {
    infowindow1.open(map,marker1);
    });
    google.maps.event.addListener(marker2, 'click', function() {
    infowindow2.open(map,marker1);
    });
    google.maps.event.addListener(marker3, 'click', function() {
    infowindow3.open(map,marker1);
    });

    // compute distance between the two points
    var R = 6371;
    var dLat = toRad(location2.lat()-location1.lat());
    var dLon = toRad(location2.lng()-location1.lng());

    var dLat1 = toRad(location1.lat());
    var dLat2 = toRad(location2.lat());

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(dLat1) * Math.cos(dLat1) *
    Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;

    document.getElementById("distance_direct").innerHTML = "<br/>The distance between the two points (in a straight line) is: "+d;
    }

    function toRad(deg)
    {
    return deg * Math.PI/180;
    }
    </script>

    </head>

    <body bgcolor="#eeeeee">
    <div id="form" style="width:100%; height:20%">
    <table align="center" valign="center">
    <tr>
    <td colspan="7" align="center"><b>Find the distance between three locations</b></td>
    </tr>
    <tr>
    <td colspan="7">&nbsp;</td>
    </tr>
    <tr>
    <td>First address:</td>
    <td>&nbsp;</td>
    <td><input type="text" name="address1" id="address1" size="50"/></td>
    <td>&nbsp;</td>
    <td>Second address:</td>
    <td>&nbsp;</td>
    <td><input type="text" name="address2" id="address2" size="50"/></td>
    <td>Third address:</td>
    <td>&nbsp;</td>
    <td><input type="text" name="address3" id="address3" size="50"/></td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td colspan="7">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="7" align="center"><input type="button" value="Show" onClick="initialize();"/></td>
    </tr>
    </table>
    </div>
    <center><div style="width:100%; height:10%" id="distance_direct"></div></center>
    <center><div style="width:100%; height:10%" id="distance_road"></div></center>

    <center><div id="map_canvas" style="width:70%; height:54%"></div></center>
    </body>
    </html>

    Hope to hear your replys
    Last edited by seb2012; 06-21-2011 at 03:10 PM.


 

Tags for this Thread

Posting Permissions

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