google maps V3 polyline circle drawing, error: invalid value for constructor parameter 0 -
i creating map allows user enter zip code , radius drawn around it. having problem google.maps.polyline. error message receiving "invalid value constructor parameter 0.
<!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="http://maps.google.com/maps/api/js?sensor=false"> </script> </script> <script type= "text/javascript"> var geocoder; var map; function initialize() { geocoder = new google.maps.geocoder(); var latlng = new google.maps.latlng(-34.397, 150.644); var myoptions = { zoom: 8, center: latlng, maptypeid: google.maps.maptypeid.roadmap } map = new google.maps.map(document.getelementbyid("map_canvas"),myoptions); } function codeaddress() { var address = document.getelementbyid("address").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location }); } else { alert("geocode not successful following reason: " + status); } }); } function drawcircle() { var address=document.getelementbyid("address").value; var radius=document.getelementbyid("radius").value; var latitude=40; var longitude=0; geocoder.geocode( { 'address': address}, function(results, status){ if (status==google.maps.geocoderstatus.ok){ latlng=(results[0].geometry.location); latitude=latlng.lat(); longitude=latlng.lng(); alert(latitude); alert(longitude); alert (radius); } else{ alert("geocode not successful following reason: " + status); } }); //degrees radians var d2r = math.pi / 180; alert("calc d2r " + d2r); // radians degrees var r2d = 180 / math.pi; alert("calc r2d " + r2d); // earth radius 3,963 miles var clat = (radius / 3963) * r2d; alert("calc clat " + clat); var clng = clat / math.cos(latitude * d2r); alert("calc clng " + clng); //store points in array var points = []; alert("declare array "); // calculate points // work around 360 points on circle (var i=0; < 360; i++) { var theta = math.pi * (i/16); // calculate next x point circlex = longitude + (clng * math.cos(theta)); // calculate next y point circley = latitude + (clat * math.sin(theta)); // add point array points.push(new google.maps.point(circlex, circley)); }; alert("completed loop"); var polyline_path = new google.maps.polyline({ path: points, strokecolor: "#003f87", // color of outline of polyline strokeopacity: 1, // between 0.0 , 1.0 strokeweight: 5 // stroke width in pixels }); polyline_path.setmap(map); //add points map //var scolor="#003f87"; //alert("color"); //var stroke=.5; //alert("stroke"); //map.addoverlay(new gpolyline(points, scolor, stroke)); //alert("added points map"); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:500px; height:460px; -moz-outline-radius:20px; -moz-box-sizing:padding-box; -moz-outline-style:solid ;-moz-outline-color:#9fb6cd; -moz-outline-width:10px;"></div> <div> zip code: <input id="address" type="textbox" value=""> radius:<input id="radius" type="textbox" value=""> <input type="button" value="find" onclick="codeaddress() "> <input type="button" value="draw radius" onclick= "drawcircle() "> </div> </body> </html>
you trying create polyline
(as variable polyline_path
) using array of point
objects path
property. however, path
property must array of latlng
objects.
Comments
Post a Comment