Question

I’m having trouble with the setMap function with Google Maps API v3 when trying to draw a polyline between two coords.

I’ve checked to see where about the code is failing with an alert() and it seems to be at the setMap function. Does anyone have any ideas why this would be happening?

function showPosition(position)
  {
  lat=position.coords.latitude;
  lon=position.coords.longitude;
  speed= position.coords.speed;
  altitude = position.coords.altitude;


  latlon=new google.maps.LatLng(lat, lon, speed, altitude)
  mapholder=document.getElementById('mapholder')
  mapholder.style.height='250px';
  mapholder.style.width='500px';

  var myOptions={
  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
  var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});


    x.innerHTML="Latitude: " + lat + " Long: " + lon;
  mapRoute();

  }

function mapRoute(showPosition, position){


var routeCoordinates = [
    new google.maps.LatLng(53.379763, -1.4658453999999999),
    new google.maps.LatLng(21.291982, -157.821856)   
  ];



  var flightPath = new google.maps.Polyline({
    path: routeCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });


 flightPath.setMap(map);


}

Thanks in advance,
Matt

Answer 1

This is a scope problem

the var map is defined inside of function showPosition(position) instead of being a global variable

add a var map; above any function call and remove the var from var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);

then you should be able to access map inside flightPath.setMap(map);