Google Maps sample code not running in localhost -
i not sure reason this.i copied sample code , trying run in dreamweaver on localhost.but reasons dont see map getting loaded.i remember before used load not loading.i have valid api keys , site still not public.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>google maps javascript api v3 example: geocoding simple</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"> </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 mapoptions = { zoom: 8, center: latlng, maptypeid: google.maps.maptypeid.roadmap } map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); } 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 next reason: ' + status); } }); } </script> </head> <body onload="initialize()"> <!-- <div> <input id="address" type="textbox" value="myaddress"> <input type="button" value="geocode" onclick="codeaddress()"> </div>--> <div id="map_canvas" style="height:90%;top:30px"></div> </body> </html> this simplest code still not able up.
enter code here key value request /maps/api/js/quotaservice.recordevent?1shttp%3a%2f%2flocalhost%2fgeoc.html&4e1&5e0&6u1&7sc7c7sc&callback=xdc._papnzo&token=120226 http/1.1
can take , suggest me how ? have geocode address , pass places api.
you need set size map, works me:
<div id="map_canvas" style="height:500px;width:600px;"></div> or css:
body, html, #map_canvas { height: 100%; width: 100%; } working example
code snippet:
class="snippet-code-js lang-js prettyprint-override">var geocoder; var map; function initialize() { geocoder = new google.maps.geocoder(); var latlng = new google.maps.latlng(-34.397, 150.644); var mapoptions = { zoom: 8, center: latlng, maptypeid: google.maps.maptypeid.roadmap } map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); } 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 next reason: ' + status); } }); } google.maps.event.adddomlistener(window, 'load', initialize); class="snippet-code-css lang-css prettyprint-override">body, html, #map_canvas { height: 100%; width: 100%; } class="snippet-code-html lang-html prettyprint-override"><script src="https://maps.googleapis.com/maps/api/js"></script> <div> <input id="address" type="textbox" value="126 beacon avenue bailiwick of jersey city nj 07306 usa"> <input type="button" value="geocode" onclick="codeaddress()"> </div> <div id="map_canvas"></div>
google-maps google-maps-api-3
No comments:
Post a Comment