javascript - Google maps wont show up on the browser -
i trying use google map api v3 , display map route between few geolocation points. far able generate single path wrote code below, doesn't give error in js while running wont show on browser. not sure wrong , might doing coding wrong. sorry that.
<style type="text/css"> html, body, #map_canvas { margin: 0; padding: 0; height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var start = [-33.890542, 151.274856]; var end = [ -33.950198, 151.259302]; var beaches = [ [ -33.923036, 151.259052], [ -34.028249, 151.157507], [ -33.80010128657071, 151.28747820854187] ]; var map; var mapoptions = { center: new google.maps.latlng(start[0], start[1]), zoom: 3, maptypeid: google.maps.maptypeid.roadmap }; function drawroute(src,dest,i){ var d_dis_name = 'directionsdisplay'+i d_dis_name = new google.maps.directionsrenderer({ suppressmarkers: false, suppressinfowindows: true }); d_dis_name.setmap(map); var src = new google.maps.latlng(src[0],src[1]); var dest = new google.maps.latlng(dest[0],dest[1]); var request = { origin: src, destination: dest, travelmode: google.maps.directionstravelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { d_dis_name.setdirections(response); } }); } function initialize() { directionsservice = new google.maps.directionsservice(); var counter = 1; drawroute(start,beaches[0],counter); counter = counter +1; (var x = 0; x < beaches.length-1; x++){ drawroute(beaches[x],beaches[x+1],counter); counter = counter+1; } drawroute(beaches[beaches.length-1],end,counter); } google.maps.event.adddomlistener(window, 'load', initialize); </script> <div id="map_canvas"></div>
what wrong ?
you have forgot create google maps object add map on page.
//var map; var mapoptions = { center: new google.maps.latlng(start[0], start[1]), zoom: 3, maptypeid: google.maps.maptypeid.roadmap }; // create object var map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions);
jsfiddle + create map object @ google api v3 documentation
Comments
Post a Comment