I need a help, I tried to change my polyline color, it dont works, I dont know if my solution for the drawline is right, please, help me =) I will poste 2 codes of my normal code and one code with my try. thanks =)
//This is My complete code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var infowindow, map, path = [], service = new google.maps.DirectionsService(), poly;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
},
disableDoubleClickZoom: true, //Desabilitar atalho do zoom por clique
draggableCursor: "crosshair" //Cursor do Mouse em +
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
// FAZ A ROTA
google.maps.event.addListener(map, "click", function(evt) {
if (path.length == 0) {
path.push(evt.latLng);
poly = new google.maps.Polyline ({ map: map});
poly.setPath(path);
} else {
service.route({
origin: path[path.length - 1],
destination: evt.latLng,
travelMode: google.maps.DirectionsTravelMode.DRIVING //Pode ser Walking, Driving ou Bicycling
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
path = path.concat(result.routes[0].overview_path);
poly.setPath(path);
}
});
}
});
//Marcador
/*var marker = new google.maps.Marker({ position: latlng, title:"Hello World!"});
marker.setMap(map);
setMap()*/
var image = 'http://i47.tinypic.com/11wg1o0.png'
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(41.810033, -87.8500523),
icon : image,
draggable: true
});
var marker2 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(41.850033, -87.6500523),
draggable: true
});
var pointA = marker;
var pointB = marker2;
//var jsonObj = Maps.newDirectionFinder().setOrigin(pointA).setDestination(pointB).getDirections();
// InfoBox
var content = '<iframe width="560" height="315" src="http://www.youtube.com/embed/v2ORAUREQUo" frameborder="0" allowfullscreen></iframe> ';
infowindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', function()
{
infowindow.open(map, this);
});
// rotas de bike
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
This is the part that’s do the rote
google.maps.event.addListener(map, "click", function(evt) {
if (path.length == 0) {
path.push(evt.latLng);
poly = new google.maps.Polyline ({ map: map});
poly.setPath(path);
} else {
service.route({
origin: path[path.length - 1],
destination: evt.latLng,
travelMode: google.maps.DirectionsTravelMode.DRIVING //Pode ser Walking, Driving ou Bicycling
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
path = path.concat(result.routes[0].overview_path);
poly.setPath(path);
}
});
}
});
To finish, thats my try of put collor
var polylineOptions = {
strokeColor:"#FF0000",
strokeOpacity: 1,
strokeWeight: 2,
zIndex: 5
}
google.maps.event.addListener(map, "click", function(evt) {
if (path.length == 0) {
path.push(evt.latLng);
poly = new google.maps.Polyline (polylineOptions)({map: map});
poly.setPath(path);
} else {
service.route({
origin: path[path.length - 1],
destination: evt.latLng,
travelMode: google.maps.DirectionsTravelMode.DRIVING //Pode ser Walking, Driving ou Bicycling
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
path = path.concat(result.routes[0].overview_path);
poly.setPath(path);
}
});
}
});
Whats the error ?
This doesn’t look like the right syntax to me:
Instead I’d say either add the map attribute to your polylineOptions, or call the setMap function on the poly object.