forked from amenadiel's block: Appending place details to html element
xxxxxxxxxx
<html>
<head>
<title>Place searches</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&libraries=places"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
var map, placesList;
var infowindow;
var service; //declare globally
function initialize() {
var pyrmont = new google.maps.LatLng(40.062664, -83.069101);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: 500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
placesList = document.getElementById('places');
service = new google.maps.places.PlacesService(map);
service.nearbySearch(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
});
var request = { placeId: place.place_id };
google.maps.event.addListener(marker, 'click', function() {
service.getDetails(request, function(details, status) {
console.log(details,status);
var content=details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number;
infowindow.setContent(content);
infowindow.open(map, marker);
});
});
jQuery('#places').append('<li data-placeid="'+place.place_id+'">' + place.name + '<small></small></li>');
}
google.maps.event.addDomListener(window, 'load', initialize);
jQuery(document).on('click','#places li',function() {
var self=jQuery(this);
var request = { placeId: self.data('placeid') };
service.getDetails(request, function(details, status) {
var content="<br />"
+ details.formatted_address
+ "<br />"
+ details.website
+ "<br />"
+ details.rating
+ "<br />"
+ details.formatted_phone_number;
jQuery('small',self).html(content);
});
});
</script>
<style>
#results {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
right: 5px;
top: 50%;
margin-top: -195px;
height: 380px;
width: 500px;
padding: 5px;
z-index: 5;
border: 1px solid #999;
background: #fff;
}
h2 {
font-size: 22px;
margin: 0 0 5px 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
height: 321px;
width: 500px;
overflow-y: scroll;
}
li {
background-color: #f1f1f1;
padding: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
li:nth-child(odd) {
background-color: #fcfcfc;
}
#more {
width: 100%;
margin: 5px 0 0 0;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<div id="results">
<h2>Results</h2>
<ul id="places"></ul>
<button id="more">More results</button>
</div>
</body>
</html>
Modified http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js to a secure url
https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places
https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js