我有这张我正在制作的地图，它在旧金山开放。我想将其更改为在我选择的国家/地区的指定城镇开放。（即英国伦敦或西班牙哈维亚）我网站的每个页面上的位置都发生了变化，并且“城镇和国家”从数据库中插入到页面中。
Example: {$listing_city} = Town {$listing_country} = Country
不需要顶部的搜索框，因为我想显示该地区的当地餐馆、酒吧和医生。但是，搜索框可以留下我只想在相应的城镇打开地图。
我是新手，想知道是否有人可以提供帮助。
提前致谢
马尔
<!DOCTYPE html>
<html>
<head>
<title>Google Developers</title>
<link rel="stylesheet" type="text/css" href="/_static/css/screen.css" />
<link rel="stylesheet" href="//www.google.com/cse/style/look/default.css" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script id="jqueryui" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" defer async></script>
<script src="//www.google.com/jsapi?key=AIzaSyCrlr1LScCevQ1epeHArLVww0eHlB6o1wg"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="docs framebox_body">
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var map, places, iw;
var markers = [];
var autocomplete;
function initialize() {
var myLatlng = new google.maps.LatLng(37.783259, -122.402708);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
places = new google.maps.places.PlacesService(map);
google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);
autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));
google.maps.event.addListener(autocomplete, 'place_changed', function() {
showSelectedPlace();
});
}
function tilesLoaded() {
google.maps.event.clearListeners(map, 'tilesloaded');
google.maps.event.addListener(map, 'zoom_changed', search);
google.maps.event.addListener(map, 'dragend', search);
search();
}
function showSelectedPlace() {
clearResults();
clearMarkers();
var place = autocomplete.getPlace();
map.panTo(place.geometry.location);
markers[0] = new google.maps.Marker({
position: place.geometry.location,
map: map
});
iw = new google.maps.InfoWindow({
content: getIWContent(place)
});
iw.open(map, markers[0]);
}
function search() {
var type;
for (var i = 0; i < document.controls.type.length; i++) {
if (document.controls.type[i].checked) {
type = document.controls.type[i].value;
}
}
autocomplete.setBounds(map.getBounds());
var search = {
bounds: map.getBounds()
};
if (type != 'establishment') {
search.types = [type];
}
places.search(search, function(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
clearResults();
clearMarkers();
for (var i = 0; i < results.length; i++) {
markers[i] = new google.maps.Marker({
position: results[i].geometry.location,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
setTimeout(dropMarker(i), i * 100);
addResult(results[i], i);
}
}
});
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
if (markers[i]) {
markers[i].setMap(null);
markers[i] == null;
}
}
}
function dropMarker(i) {
return function() {
markers[i].setMap(map);
}
}
function addResult(result, i) {
var results = document.getElementById('results');
var tr = document.createElement('tr');
tr.style.backgroundColor = (i% 2 == 0 ? '#F0F0F0' : '#FFFFFF');
tr.onclick = function() {
google.maps.event.trigger(markers[i], 'click');
};
var iconTd = document.createElement('td');
var nameTd = document.createElement('td');
var icon = document.createElement('img');
icon.src = result.icon.replace('http:', '');
icon.setAttribute('class', 'placeIcon');
var name = document.createTextNode(result.name);
iconTd.appendChild(icon);
nameTd.appendChild(name);
tr.appendChild(iconTd);
tr.appendChild(nameTd);
results.appendChild(tr);
}
function clearResults() {
var results = document.getElementById('results');
while (results.childNodes[0]) {
results.removeChild(results.childNodes[0]);
}
}
function getDetails(result, i) {
return function() {
places.getDetails({
reference: result.reference
}, showInfoWindow(i));
}
}
function showInfoWindow(i) {
return function(place, status) {
if (iw) {
iw.close();
iw = null;
}
if (status == google.maps.places.PlacesServiceStatus.OK) {
iw = new google.maps.InfoWindow({
content: getIWContent(place)
});
iw.open(map, markers[i]);
}
}
}
function getIWContent(place) {
var content = '<table style="border:0"><tr><td style="border:0;">';
content += '<img class="placeIcon" src="' + place.icon + '"></td>';
content += '<td style="border:0;"><b><a href="' + place.url + '">' + place.name + '</a></b>';
content += '</td></tr></table>';
return content;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: arial;
font-size: 13px;
overflow: hidden;
}
#map_canvas {
float: left;
width: 420px;
height: 406px;
}
#listing {
float: left;
margin-left: 1px;
width: 210px;
height: 406px;
overflow: auto;
cursor: pointer;
}
#controls {
padding: 5px;
}
.placeIcon {
width: 16px;
height: 16px;
margin: 2px;
}
#results {
border-collapse: collapse;
width: 184px;
}
#locationField {
margin-left: 1px;
}
#autocomplete {
width: 516px;
border: 1px solid #ccc;
}
</style>
<div id="locationField">
<input id="autocomplete" type="text">
</div>
<div id="map_canvas"></div>
<div id="listing">
<div id="controls">
<form name="controls">
<!--<input type="radio" name="type" value="establishment" onclick="search()" checked="checked"/>All<br/>-->
<input type="radio" name="type" value="restaurant" onclick="search()" />Restaurants<br/>
<input type="radio" name="type" value="police" onclick="search()" />Police Station<br/>
<input type="radio" name="type" value="church" onclick="search()" />Churches<br/>
<input type="radio" name="type" value="doctor" onclick="search()" />Doctor<br/>
<input type="radio" name="type" value="bar" onclick="search()" />Bars<br/>
<input type="radio" name="type" value="bank" onclick="search()" />Banks<br/>
</form>
</div>
<table id="results"></table>
</div>
</body>
</html>