Google places Javascript API not showing places!

Get Started | Login

Discussion Forums > WebViews and HTML for Mobile

Replies: 2 Views: 211

Electronincantation Android Fan Posts: 35 Reg: Dec 26, 2011 Accrington 350	confirm \| cancel 04/10/12 09:12 AM (13 years ago) Google places Javascript API not showing places! Hi. I am playing around with the Google places API and Data urls.The code below reads the Devices location from a custom URL and displays a map of stores local to the user. The markers show OK but it looks like the infowindow does'nt show the address of the store.Anybody else working on this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script> <style type="text/css"> <!-- body { color: #FFF; } --> #map { height: 800px; width:600px; border: 1px solid #333; margin-top: 0.6em; } </style> </head> <body> <?php $lat = $_GET['deviceLatitude']; $long = $_GET['deviceLongitude']; $test = $_GET['test']; echo "<p> Stores near " . $lat . "</p>"; echo $long; ?> <script type="text/javascript"> var map; var infowindow; function initialize() { var location = new google.maps.LatLng(<?php echo $lat ?>, <?php echo $long ?>); map = new google.maps.Map(document.getElementById('map'), { mapTypeId: google.maps.MapTypeId.ROADMAP, center: location, zoom: 15 }); var request = { location: location, radius: 500, types: ['store'] }; infowindow = new google.maps.InfoWindow(); var service = new google.maps.places.PlacesService(map); service.search(request, callback); } function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { createMarker(results[i]); } } } function createMarker(place) { var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(place.name); infowindow.open(map, this); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map"></div> <div id="text"> <pre> var request = { location: new google.maps.LatLng(users location), radius: 500, types: ['store'] }; </pre> </body> </html> the documentation is below: https://developers.google.com/maps/documentation/javascript/places Title Comments Hi. I am playing around with the Google places API and Data urls.The code below reads the Devices location from a custom URL and displays a map of stores local to the user. The markers show OK but it looks like the infowindow does'nt show the address of the store.Anybody else working on this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script> <style type="text/css"> <!-- body { color: #FFF; } --> #map { height: 800px; width:600px; border: 1px solid #333; margin-top: 0.6em; } </style> </head> <body> <?php $lat = $_GET['deviceLatitude']; $long = $_GET['deviceLongitude']; $test = $_GET['test']; echo "<p> Stores near " . $lat . "</p>"; echo $long; ?> <script type="text/javascript"> var map; var infowindow; function initialize() { var location = new google.maps.LatLng(<?php echo $lat ?>, <?php echo $long ?>); map = new google.maps.Map(document.getElementById('map'), { mapTypeId: google.maps.MapTypeId.ROADMAP, center: location, zoom: 15 }); var request = { location: location, radius: 500, types: ['store'] }; infowindow = new google.maps.InfoWindow(); var service = new google.maps.places.PlacesService(map); service.search(request, callback); } function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { createMarker(results[i]); } } } function createMarker(place) { var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(place.name); infowindow.open(map, this); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map"></div> <div id="text"> <pre> var request = { location: new google.maps.LatLng(users location), radius: 500, types: ['store'] }; </pre> </body> </html> the documentation is below: https://developers.google.com/maps/documentation/javascript/places

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	04/10/12 10:12 AM (13 years ago) Looks like an interesting topic...following. Comments Looks like an interesting topic...following.

Electronincantatio... Android Fan Posts: 35 Reg: Dec 26, 2011 Accrington 350	04/10/12 11:13 AM (13 years ago) The Code now works, use the search string below via a custom URL screen.Upload the PHP page to your own server and use that domain. I will leave the test script up for a while,on the Domain below, so you could also use that to play with. Still need a way to stop the web view from zooming, maybe a project for somebody? http://www.transporthistory.net/wordpress/places.php/?deviceLatitude=[deviceLatitude]&deviceLongitude=[deviceLongitude]&test=test <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script> <style type="text/css"> <!-- body { background-color: #FFF; } --> #map { height: 800px; width:600px; border: 1px solid #333; margin-top: 0.6em; } </style> <?php $lat = $_GET['deviceLatitude']; $long = $_GET['deviceLongitude']; $test = $_GET['test']; ?> <script type="text/javascript"> var map; var infowindow; function initialize() { var location = new google.maps.LatLng(<?php echo $lat ?>, <?php echo $long ?>); map = new google.maps.Map(document.getElementById('map'), { mapTypeId: google.maps.MapTypeId.ROADMAP, center: location, zoom: 15 }); var request = { location: location, radius: 500, types: ['store'] }; infowindow = new google.maps.InfoWindow(); var service = new google.maps.places.PlacesService(map); service.search(request, callback); } function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { createMarker(results[i]); } } } function createMarker(place) { var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(place.name); infowindow.open(map, this); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <?php echo "<p> Stores near " . $lat . $long; "</p>"; ?> <div id="map"></div> <div id="text"> <pre> var request = { location: new google.maps.LatLng(-33.8665433, 151.1956316), radius: 500, types: ['store'] }; </pre> </body> </html> Comments The Code now works, use the search string below via a custom URL screen.Upload the PHP page to your own server and use that domain. I will leave the test script up for a while,on the Domain below, so you could also use that to play with. Still need a way to stop the web view from zooming, maybe a project for somebody? http://www.transporthistory.net/wordpress/places.php/?deviceLatitude=[deviceLatitude]&deviceLongitude=[deviceLongitude]&test=test <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script> <style type="text/css"> <!-- body { background-color: #FFF; } --> #map { height: 800px; width:600px; border: 1px solid #333; margin-top: 0.6em; } </style> <?php $lat = $_GET['deviceLatitude']; $long = $_GET['deviceLongitude']; $test = $_GET['test']; ?> <script type="text/javascript"> var map; var infowindow; function initialize() { var location = new google.maps.LatLng(<?php echo $lat ?>, <?php echo $long ?>); map = new google.maps.Map(document.getElementById('map'), { mapTypeId: google.maps.MapTypeId.ROADMAP, center: location, zoom: 15 }); var request = { location: location, radius: 500, types: ['store'] }; infowindow = new google.maps.InfoWindow(); var service = new google.maps.places.PlacesService(map); service.search(request, callback); } function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { createMarker(results[i]); } } } function createMarker(place) { var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(place.name); infowindow.open(map, this); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <?php echo "<p> Stores near " . $lat . $long; "</p>"; ?> <div id="map"></div> <div id="text"> <pre> var request = { location: new google.maps.LatLng(-33.8665433, 151.1956316), radius: 500, types: ['store'] }; </pre> </body> </html>

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.