Databases
StackOverflow2013
Postsdbo
POCustom Polylines on Google Maps API V3
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCustom Polylines on Google Maps API V3
    text
    copied!<p>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 =)</p> <pre><code>//This is My complete code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; &lt;style type="text/css"&gt; html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } &lt;/style&gt; &lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; 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 = '&lt;iframe width="560" height="315" src="http://www.youtube.com/embed/v2ORAUREQUo" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt; '; 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); } &lt;/script&gt; &lt;/head&gt; &lt;body onload="initialize()"&gt; &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This is the part that's do the rote</p> <pre><code>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); } }); } }); </code></pre> <p>To finish, thats my try of put collor</p> <pre><code>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); } }); } }); </code></pre> <p>Whats the error ?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload