您可以使用下面的脚本来查看它,
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>What's Near Me</title>
<meta name="description" content="Find what's near you">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://www.gurchet-rai.net/places/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.gurchet-rai.net/places/css/style.css">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">NearMe</a>
<!--
<button class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="icon-chevron-down"></i>
</button> -->
<form id="search" class="navbar-form form-search" action="#">
<div class="input-append">
<input id="query" type="text" class="search-query" placeholder="Where to?" >
<button type="submit" class="btn"><i class="icon-search"></i></button>
</div>
<!--
<div class="nav-collapse" style="float: right">
<div id="view-type" class="btn-group pull-right" data-toggle="buttons-radio">
<button id="map-view" type="button" class="btn active">Map View</button>
<button id="list-view" type="button" class="btn">List View</button>
</div>
</div>
-->
</form>
</div>
</div>
</div>
<div id="content">
<div id="padded-content">
<div id="location-details"></div>
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.gurchet-rai.net/places/css/bootstrap.min.css"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript">
var loc;
var map;
var service;
var infoWindow;
var overlays = [];
var resultList = [];
var isMobile = $(window).width < 767;
loc = new window.google.maps.LatLng(29.750824, -95.362151);
//new google.maps.LatLng(coords.latitude, coords.longitude);
map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
center: loc,
zoom: 13
});
service = new google.maps.places.PlacesService(map);
infoWindow = new google.maps.InfoWindow();
function plotResultList(){
var iterator = 0;
for(var i = 0; i < resultList.length; i++){
setTimeout(function(){
var lat = resultList[iterator].geometry.location.Za;
var lng = resultList[iterator].geometry.location.Ya;
var name = resultList[iterator].name;
var addr = resultList[iterator].formatted_address;
var reference = resultList[iterator].reference;
var image = {
url:resultList[iterator].icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
position: resultList[iterator].geometry.location,
map: map,
title: name,
icon: image,
animation: isMobile? 'undefined' : google.maps.Animation.DROP
});
overlays.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
var request = {
reference: reference
};
service.getDetails(request, function(place, status){
var content = "<h6>" + name + "</h6>";
if(status == google.maps.places.PlacesServiceStatus.OK){
if(typeof place.rating !== 'undefined'){
var badgeType = '';
if (place.rating < 2){
badgeType = 'badge-important';
} else if (place.rating >= 2 && place.rating <= 3){
badgeType = 'badge-warning';
} else {
badgeType = 'badge-success';
}
content += "<p><small>Rating: <span class='badge " + badgeType + "'>" + place.rating + "</span></small></p>";
}
if(typeof place.formatted_address !== 'undefined'){
content += "<br><small>" + place.formatted_address + "</small>";
}
if(typeof place.formatted_phone_number !== 'undefined'){
content += "<br><small><a href='tel:" + place.formatted_phone_number + "'>" + place.formatted_phone_number + "</a></small>";
}
if(typeof place.website !== 'undefined'){
content += "<br><small><a href='" + place.website + "'>website</a></small>";
}
}
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
});
iterator++;
}, isMobile? 0: (i * 75));
}
}
var query = 'airports,hospitals,atm';//$('#query').val();
//alert(map);
var request = {
location: map.getCenter(),
radius: '5000',
query: query
};
service.textSearch(request, function(results, status, pagination){
for(var i = 0; i < overlays.length; i++){
overlays[i].setMap(null);
}
resultList.length = 0;
overlays.length = 0;
if (status == google.maps.places.PlacesServiceStatus.OK) {
resultList = resultList.concat(results);
plotResultList();
}
});
</script>
</body>
</html>