I'm a bit uncertain about how to proceed with this task.
What I aim to achieve: I want to showcase the information that one would typically find by searching for the nearest farmers' market on Google Maps.
I desire an Info window that not only provides the address and hours of operation but also includes any other relevant details available through Google Maps for the particular business.
Current situation: Currently, I have an Angular JS code block that populates an array structured like this:
var locations = [
['Findlay Market', 39.115398, -84.518481, 5],
['Hyde Park Farmers' Market', 39.139601, -84.442496, 4],
['Lettuce Eat Well Farmers' Market', 39.166134, -84.611613, 3],
['College Hill Farm Market', 39.195641, -84.545453, 2],
['Anderson Farmers' Market', 39.078364, -84.350539, 1]
];
Using the Infowindow, I am able to display the name of each farmers' market.
While I understand that I could create a new table in my database to store hours and additional data for each market, and then use this to generate an Angular JS card within the Infowindow... I was hoping there might be a way to leverage the Google Map API along with the Google Places API to access this information directly without the need for storing it locally.
Credit goes to uksz for providing me with the following code snippet which proved useful in fetching the required details:
<!DOCTYPE html>
<html>
<head>
<title>Place details</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(39.115398, -84.518481),
zoom: 15
});
var request = {
location: map.getCenter(),
radius: '500',
query: 'Findlay Market'
};
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
place: {
placeId: results[1].place_id,
location: results[1].geometry.location
}
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
var content = results[1].name + '<br>' +
results[1].formatted_address + '<br>' +
results[1].opening_hours + '<br>' +
results[1].place_id + '<br>';
infowindow.setContent(content);
infowindow.open(map, this);
});
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>