javascript - Google maps drawing example works fine in jsfiddle but not in html -
this jsfiddle link: http://jsfiddle.net/j5zmg/21/
this html try run:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>documento sin tÃtulo</title> <style> #map { height: 420px; width:600px; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing&extension=.js"></script> <script type="text/javascript">//<![cdata[ $(window).load(function(){ var mapoptions = { center: new google.maps.latlng(-34.397, 150.644), zoom: 8, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid('map'), mapoptions); var drawingmanager = new google.maps.drawing.drawingmanager({ drawingcontroloptions: { position: google.maps.controlposition.bottom_left, drawingmodes: [ google.maps.drawing.overlaytype.circle, google.maps.drawing.overlaytype.rectangle, google.maps.drawing.overlaytype.polygon] } }); google.maps.event.addlistener(drawingmanager, 'markercomplete', function (marker) { var position = marker.getposition().tourlvalue(2); $('#marker-position').append(position + '<br>'); }); google.maps.event.addlistener(drawingmanager, 'circlecomplete', function (circle) { var position = circle.getcenter(); var rad = circle.getradius(); $('#marker-position').append('centre => '+position +'<br>radius =>' + rad+'<br>'); }); google.maps.event.addlistener(drawingmanager, 'polygoncomplete', function (polygon) { var position = polygon.getpath(); $('#marker-position').append('polygon => '+position.getarray()); }); google.maps.event.addlistener(drawingmanager, 'polylinecomplete', function (polyline) { var position = polyline.getpath(); $('#marker-position').append('polyline => '+position.getarray()); }); google.maps.event.addlistener(drawingmanager, 'rectanglecomplete', function (rectangle) { var position = rectangle.getbounds(); $('#marker-position').append('rectangle => '+position); }); drawingmanager.setmap(map); });//]]> </script> <!--<script type="text/javascript" src="./js/poly2.js"></script>--> </head> <body> <div id="map"></div> <div id="marker-position"></div> </body> </html> the listeners events never executed in html, in jsfiddle works fine, check external references in jsfiddle , correct.
i add options such rectangleoptions, draggable, editable, etc, , works fine in both.
there i'm not considering , not see it, refference or trigger, see html in http://jsfiddle.net/j5zmg/21/embedded/result/ , can't see difference.
the difference in listeners events, don't know how solve.
any ?
thanks in advance
you forgot include jquery script tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js""></script>
Comments
Post a Comment