javascript - Uncaught TypeError: Cannot read property 'route' -
i used google maps api build map plot points based on latitude , longitude 'wherenew.js' markers color dependent on parameter 'marketdata.js' . when marker clicked, it'll display infowindow button-"show routes" , informations based on 'marketdata.js'. code executed upto point.
after this, when "show routes" button marker clicked, want google maps api show routes every location of 8th column of 'marketdata.js" marker. however, when click on button, giving error :
uncaught typeerror: cannot read property 'route' of undefined @ calculateanddisplayroute
wherenewtest1.html:162
i don't understand i'm doing wrong. please help
wherenewtest1.html
<html> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>markets of kolkata</title> <style> #map { height: 100%; } /* optional: makes sample page fill window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'roboto', 'sans-serif'; line-height: 30px; padding-left: 10px; } #warnings-panel { width: 100%; height: 10%; text-align: center; } </style> <link href="http://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> <!-- if in china, may need use theis site google maps code <script src="http://maps.google.cn/maps/api/js" type="text/javascript"></script> --> <!--<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> --> <!-- <script async defer src= "https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=aizasydrdsh53e0mrifajugzqifhab0alfzfivu&v=3&v=3&callback=displaydirections"></script> </script> --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=aizasybbxta5ppmyzpmtcgnsyp-djmlsogj9t9o&callback=initialize"> </script> <script src="wherenew.js"></script> <script src="marketdata.js"></script> <script> var directionsdisplay; var directionsservice = new google.maps.directionsservice(); var map; var markerarray = []; var dest ; function initialize() { //alert("to see title of marker, hover on marker don't click."); var mylatlng = new google.maps.latlng(22.39361,88.099263) var mapoptions = { zoom: 3, center: mylatlng, maptypeid: google.maps.maptypeid.roadmap } var markerarray = []; var directionsservice = new google.maps.directionsservice; var directionsdisplay = new google.maps.directionsrenderer( { map: map }); var map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); = 0; var markers = []; ( pos in mydata ) { var row = mydata[pos]; var row1 = marketinfo[i]; window.console && console.log(row) && console.log(row1); // if ( < 3 ) { alert(row); } var newlatlng = new google.maps.latlng(row[0], row[1]); var marker = new google.maps.marker( { position: newlatlng, map: map, title: row[3], }); var infowindow = new google.maps.infowindow({ }); var largeinfowindow = new google.maps.infowindow({ }); dest = row1[1]; var content = row1[2] + '<br/><button onclick = "calculateanddisplayroute(directionsdisplay, directionsservice, markerarray, map, dest);">show routes</button>'; if((content.search("wholesale"))>-1) { marker.seticon('http://maps.google.com/mapfiles/ms/icons/red-dot.png'); } else if((content.search("whole sale"))>-1) { marker.seticon('http://maps.google.com/mapfiles/ms/icons/red-dot.png'); } else if((content.search("major"))>-1) { marker.seticon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png'); } else { marker.seticon('http://maps.google.com/mapfiles/ms/icons/green-dot.png'); } google.maps.event.addlistener(marker,'click', (function(marker,content,infowindow) { return function() { infowindow.setcontent(content); infowindow.open(map,marker); }; })(marker,content,infowindow)); markers.push(marker); = + 1; } function populateinfowindow(marker, infowindow) { if(infowindow.marker != marker) { infowindow.marker = marker; infowindow.setcontent('<div>'+infowindow.content+'</div>'); infowindow.open(map, marker); infowindow.addlistener('closeclick', function(){ infowindow.setmarker(null); }); } } } function calculateanddisplayroute(directionsdisplay, directionsservice, markerarray, map, dest) { (var = 0; < markerarray.length; i++) { markerarray[i].setmap(null); } (pos in marketinfo) { var row = marketinfo[pos]; // second loop multiple destination var str_array = row[7].split(','); (var j = 0; j < str_array.length; j++) { directionsservice.route( { origin: str_array[j], destination: dest, travelmode: 'driving' }, function(response, status) { if (status === 'ok') { document.getelementbyid('warnings-panel').innerhtml = '<b>' + response.routes[0].warnings + '</b>'; var dirdisplay = new google.maps.directionsrenderer({ map: map }); dirdisplay.setdirections(response); }else { window.alert('directions request failed due ' + status); } }); } } } </script> <body onload="initialize()"> <div id="map_canvas" style="height: 600px"></div> <p> <b>developed by</b> <a href="http://www.linkedin.com/in/arnab-chakravarty-8a329111b?trk=nav_responsive_tab_profile"><b>arnab chakravarty</b></a>. </p> </body> </html> wherenew.js
mydata = [ [22.5193768,88.3656851, 'k.m.c. market, 3rd floor market complex, 212, rash behari avenue road, hindustan park, gariahat, kolkata, west bengal 700019, india', 'pal bazar'], [22.4977887,88.3796042, 'garfa main rd, kolkata, west bengal 700075, india', 'ramlal bazar'], [22.5048463,88.3882325, 'purbachal main rd, ramlal bazar, haltu, kolkata, west bengal 700078, india', 'college street market ( sports goods)'] ]; marketdata.js
marketinfo = [ ["gariahat kmc market", "k.m.c. market, 3rd floor market complex, 212, rash behari avenue road, hindustan park, gariahat, kolkata- 700019", "major (1400shop + howker)", "fruits, vegetables, flower, fish, meat, grocery, clothing, furniture , household, footwear electrical etc", "", "", "barabazar, koleymart", "howrah", "we collect goods ourselves", "", "many", "cars, light goods vehicles (lgv), heavy goods vehicles/lorries (hgv)", "within 1 hour", "", "", "no problems encountered", "", "if unloading space can provide govt. better"], ["pal bazar", "garifa main road, kolkata - 700 075", "minor (150shop + 70howkers)", "fresh, cool , frozen product, other type of consumer goods, textile,footwear, electronic , electrical equipment, building materials", "", "sandhya bazar", "bara bazar, chadni chowk", "", "the goods delivered multiple suppliers", "many", "10 20", "bicycles/tricycles/carts, motorised two/three-wheelers", "within 1 hour", "", "", "delivery vehicle causes traffic jams in front of establishment", "", ""], ["ramlal bazar", "purbachal main rd, ramlal bazar, haltu. kolkata-700078", "minor (150 shop+ 180 howkers)", "fruits, vegetable, fish, meat, grocery, textile, electrical, building materials etc", "", "baghajatin , sandhya bazar", "bara bazar, ezra st.", "", "we collect goods ourselves", "", "many", "bicycles/tricycles/carts, motorised two/three-wheelers, light goods vehicles (lgv)", "within 1 hour", "", "", "limited storage space available, delivery vehicle causes traffic jams in front of establishment, high delivery costs", "", "parking place require"] ];
the problem in line of code
var content = row1[2] + '<br/><button onclick = calculateanddisplayroute(directionsdisplay, directionsservice, markerarray, map, row1[1]);>show routes</button>'; onclick expects function name in double quotes
since creating html string, parameters passing not being captured. can try global variables , see result.
edit:
i have made following changes code
declare global variables outside initialize function:
var directionsdisplay; var directionsservice = new google.maps.directionsservice(); var map; var markerarray = []; function initialize() { change erroneous line to:
var content = row1[2] + '<br/><button onclick="calculateanddisplayroute(' + + ')">show routes</button>'; notice, sending row identifier (i). have removed other parameters.
the signature calculateanddisplayroute :
function calculateanddisplayroute(i) { var destination1 = marketinfo[i][1]; ... } 
Comments
Post a Comment