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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2013
    Posts
    125
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question draw a line between 2 Lat/Long points not working

    hi,

    I trying to do something similar to this:
    http://www.1stwebdesigner.com/wp-con...oogle-maps.php

    here is my code
    Code:
    // MAP
    
    var map;
    
    var localSearch = new GlocalSearch();
    
    
    
    var icon = new GIcon();
    icon.image = "http://www.google.com/mapfiles/marker.png";
    icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    icon.iconSize = new GSize(20, 34);
    icon.shadowSize = new GSize(37, 34);
    icon.iconAnchor = new GPoint(10, 34);
    
    var myicon = new GIcon();
    myicon.image = "http://www.google.com/intl/en_us/mapfiles/ms/icons/yellow.png";
    myicon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    myicon.iconSize = new GSize(30, 34);
    myicon.shadowSize = new GSize(37, 34);
    myicon.iconAnchor = new GPoint(10, 34);
    
    
    var mypoint;
    
    navigator.geolocation.getCurrentPosition(function(position){
                                             
        mypoint = new GLatLng(position.coords.latitude,position.coords.longitude);
                                             
            }, function(){
                                             
        mypoint = new GLatLng(resultLat,resultLng);
                                             
    });
    
    function usePointFromPostcode(postcode, callbackFunction) {
        
        
        
        localSearch.setSearchCompleteCallback(null,
                                              
                                              function() {
                                              
                                              
                                              
                                              if (localSearch.results[0])
                                              
                                              {
                                              
                                              var resultLat = localSearch.results[0].lat;
                                              
                                              var resultLng = localSearch.results[0].lng;
                                              
                                              var point = new GLatLng(resultLat,resultLng);
                                              
                                              
                                              
                                              callbackFunction(point, mypoint);
                                              
                                              }else{
                                              
                                              alert("Postcode not found!");
                                              
                                              }
                                              
                                              });
        
        
        
        localSearch.execute(postcode + ", UK");
        
    }
    
    
    
    function placeMarkerAtPoint(point, mypoint)
    
    {
        
        map.clearOverlays();
        
        var marker = new GMarker(point,icon);
        
        map.addOverlay(marker);
        
        var marker2 = new GMarker(mypoint,myicon);
        
        map.addOverlay(marker2);
        
        map.setCenter(point, 17);
        
        
    }
    
    function calcRoute() {
        var start = mypoint;
        var end = "Worthing";
        var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(result, status) {
                                if (status == google.maps.DirectionsStatus.OK) {
                                directionsDisplay.setDirections(result);
                                }
                                });
    }
    
    
    
    function setCenterToPoint(point)
    
    {
        
        map.setCenter(point, 17);
        
    }
    
    
    
    function showPointLatLng(point)
    
    {
        
        alert("Latitude: " + point.lat() + "\nLongitude: " + point.lng());
        
    }
    
    
    
    function mapLoad() {
        
        if (GBrowserIsCompatible()) {
            
            map = new GMap2(document.getElementById("map"));
            
            
            
            
            
            map.addControl(new GLargeMapControl());
            
            map.addControl(new GMapTypeControl());
            
            map.setCenter(new GLatLng(51.507222,-0.1275), 17, ROADMAP);
            
        }
        
    }
    
    
    
    function addLoadEvent(func) {
        
        var oldonload = window.onload;
        
        if (typeof window.onload != 'function') {
            
            window.onload = func;
            
        } else {
            
            window.onload = function() {
                
                oldonload();
                
                func();
                
            }
            
        }
        
    }
    
    
    
    function addUnLoadEvent(func) {
        
        var oldonunload = window.onunload;
        
        if (typeof window.onunload != 'function') {
            
            window.onunload = func;
            
        } else {
            
            window.onunload = function() {
                
                oldonunload();
                
                func();
                
            }
            
        }
        
    }
    
    
    
    
    //line
    
    var location1;
    var location2;
    
    var address1;
    var address2;
    
    var latlng;
    var geocoder;
    
    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 = mypoint;
        address2 = document.getElementById("postcode").value;
        location1 = address1
        // finding out the coordinates
        if (geocoder)
        {
            
            
            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);
                             }
                             });
            
        }
    }
    
    // creates and shows the map
    function showMap()
    {
        alert("My Location: "+location1+" Pub Location: "+location2);
        // center of the map (compute the mean value between the two locations)
        latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);
        location1 = new google.maps.LatLng(location1);
        location2 = new google.maps.LatLng(location2);
        // 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("map1"), 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,
        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],
                                            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"
                                             });
        
        // 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>';
        
        // create info boxes for the two markers
        var infowindow1 = new google.maps.InfoWindow({
                                                     content: text1
                                                     });
        var infowindow2 = new google.maps.InfoWindow({
                                                     content: text2
                                                     });
        
        // 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);
                                      });
        
        // 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;
    }
    
    //end line
    
    
    
    
    
    
    addLoadEvent(mapLoad);
    
    addUnLoadEvent(GUnload);
    It starts off showing version 2 map, until i call initialize();

    this then alerts the 2 coordinates but when the Version 3 map loads, location1 (mypoint) turns to NaN and I lose both markers

    Please help

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    why are you loading two versions of the map?

    maybe if you showed your page in action it would be easier to see the problem - there certainly seems to be some hokey stuff going on there, at first glance

  • #3
    Regular Coder
    Join Date
    Apr 2013
    Posts
    125
    Thanks
    3
    Thanked 0 Times in 0 Posts
    here is my site, clicking the address line will call initialize()

    http://www.jbiddulph.com/pubsuk

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    you should have a look at your error console. lots to read about there.

    what's an "address line"? I can't see anything that even remotely matches that description

  • #5
    Regular Coder
    Join Date
    Apr 2013
    Posts
    125
    Thanks
    3
    Thanked 0 Times in 0 Posts
    1. go to url: http://www.jbiddulph.com/pubsuk/

    2. click on A-Z

    3. Select a town

    4. Select a pub

    5. Old Map loads

    6. click on the text: (Pub Address: **** ****) to call initialize();

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    oh, yeah. I should have known that.

    well, the closest I got was with firefox (IE and Chrome did nothing) - clicking on every A-Z that I could see, I finally got taken to a page that popped an alert that says "not supported" and then did nothing else.

    so I would suggest that your problem may be slightly more involved than what you think.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    It worked *MODERATELY* well on my version of Firefox (I'm purposely using an older version, trying to debug something else). But only the first time.

    When I refreshed the page I got the same total crap I got in MSIE and Chrome.

    But I doubt that page will ever work except *MAYBE* on mobile devices.
    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.


  •  

    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
    •