javascript - Map not displaying on webpage (Google Maps/Places API) -
this first html/javascript project , i'm having trouble. goal take address , display map markers on stores within 500m of address. issue blank page; nil shows @ all. of code copied verbatim google's examples, don't know wrong.
html:
<!doctype html> <html> <head> <title>make impression</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=mykeygoeshere"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <script type="text/javascript" src="coffee_and_donuts.js"></script> </head> <body> <div id="map" style="float:left;width:30%;height 100%"></div> </body> </html> coffee_and_donuts.js:
var directionsdisplay; var directionsservice = new google.maps.directionsservice(); var geocoder = new google.maps.geocoder(); var destination_address = "new york, new york"; var destination_latlng; // destination's latlng object geocoder.geocode( {'address': destination_address}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { destination_latlng = results[0].geometry.location; } }); // feed destination's latlng object places api find nearest stores var map; var service; var infowindow; function initialize2() { map = new google.maps.map(document.getelementbyid('map'), { center: destination_latlng, zoom: 15 }); var request = { location: destination_latlng, radius: '500', types: ['store'] }; service = new google.maps.places.placesservice(map); service.nearbysearch(request, callback); } function callback(results, status) { if (status == google.maps.places.placesservicestatus.ok) { (var = 0; < results.length; i++) { var place = results[i]; createmarker(results[i]); } } } initialize2();
you need phone call initialize2(); within geocode function callback:
// destination's latlng object geocoder.geocode( {'address': destination_address}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { destination_latlng = results[0].geometry.location; initialize2(); } }); the problem trying initialise map before geocoder had finished.
you can set in 1 link:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=api_key&libraries=places"></script> javascript html google-maps google-places-api
No comments:
Post a Comment