Reputation: 217
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
Upvotes: 0
Views: 3106
Reputation: 5312
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);
Upvotes: 1