本文介绍了Google Maps Embed +搜索框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试为我的网站制作一张地图，其中将显示一些餐馆标记.我还希望人们能够搜索地图，以便他们可以查找地址并能够看到该地区的餐馆.我得到了带有我想要的标记的地图代码:
I'm trying to make a map for my website, that will show a few markers of restaurants.I would also like people to be able to search the map, so they can look for an address and would be able to see the restaurants in that area.I got a code for the map with markers like i want it:
<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script>
<script>
google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(48.142265,11.577987),
zoom: 12,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: true,
mapTypeControl: false,
scaleControl: false,
scrollwheel: true,
panControl: true,
streetViewControl: false,
draggable : true,
overviewMapControl: false,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
"featureType": "water",
"stylers": [
{
"visibility": "on"
},
{
"color": "#b5cbe4"
}
]
},
{
"featureType": "landscape",
"stylers": [
{
"color": "#efefef"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#83a5b0"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#bdcdd3"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e3eed3"
}
]
},
{
"featureType": "administrative",
"stylers": [
{
"visibility": "on"
},
{
"lightness": 33
}
]
},
{
"featureType": "road"
},
{
"featureType": "poi.park",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
},
{
"lightness": 20
}
]
},
{},
{
"featureType": "road",
"stylers": [
{
"lightness": 20
}
]
}
],
}
var mapElement = document.getElementById('restaurantmap');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
['blahfl', 'falfjlfs', '9480240', 'undefined', 'www.google.com', 48.1303358, 11.5911791, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['fahfah', 'ljlsg', '2742470', 'undefined', 'www.google.com', 48.1367075, 11.5556444, 'https://mapbuildr.com/assets/img/markers/solid-pin-green.png']
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
if (web.substring(0, 7) != "http://") {
link = "http://" + web;
} else {
link = web;
}
bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link);
}
function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
var infoWindowVisible = (function () {
var currentlyVisible = false;
return function (visible) {
if (visible !== undefined) {
currentlyVisible = visible;
}
return currentlyVisible;
};
}());
iw = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if (infoWindowVisible()) {
iw.close();
infoWindowVisible(false);
} else {
var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>"+title+"</h4><p>"+desc+"<p><p>"+telephone+"<p><a href='"+link+"'' >"+web+"<a></div>";
iw = new google.maps.InfoWindow({content:html});
iw.open(map,marker);
infoWindowVisible(true);
}
});
google.maps.event.addListener(iw, 'closeclick', function () {
infoWindowVisible(false);
});
}
}
</script>
<style>
#restaurantmap {
height:400px;
width:550px;
}
.gm-style-iw * {
display: block;
width: 100%;
}
.gm-style-iw h4, .gm-style-iw p {
margin: 0;
padding: 0;
}
.gm-style-iw a {
color: #4272db;
}
</style>
<div id='restaurantmap'></div>
，我发现以下代码添加了搜索框(具有自动完成功能，这对我很重要): https://google-developers.appspot.com/maps/documentation/javascript/examples/places-searchbox
and I found this code to add the search box (with autocomplete which is important to me):https://google-developers.appspot.com/maps/documentation/javascript/examples/places-searchbox
但是我似乎无法弄清楚如何将两者混合在一起以使它们一起工作.我的编码知识仍然很有限:(
But I can't seem to figure out how to mix the two together to make them work together. My coding knowledge is still very limited :(
非常感谢您的帮助！
谢谢
推荐答案
- SearchBox的文档
- 场所库的文档
包括以下地方信息库:
<script src="http://maps.google.com/maps/api/js?libraries=places"></script>
工作代码段:
google.maps.event.addDomListener(window, 'load', init);
var map;
var markers = [];
function init() {
var mapOptions = {
center: new google.maps.LatLng(48.142265, 11.577987),
zoom: 12,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: true,
mapTypeControl: false,
scaleControl: false,
scrollwheel: true,
panControl: true,
streetViewControl: false,
draggable: true,
overviewMapControl: false,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "water",
"stylers": [{
"visibility": "on"
}, {
"color": "#b5cbe4"
}]
}, {
"featureType": "landscape",
"stylers": [{
"color": "#efefef"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#83a5b0"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#bdcdd3"
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#e3eed3"
}]
}, {
"featureType": "administrative",
"stylers": [{
"visibility": "on"
}, {
"lightness": 33
}]
}, {
"featureType": "road"
}, {
"featureType": "poi.park",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"lightness": 20
}]
}, {}, {
"featureType": "road",
"stylers": [{
"lightness": 20
}]
}],
}
var mapElement = document.getElementById('restaurantmap');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
['blahfl', 'falfjlfs', '9480240', 'undefined', 'www.google.com', 48.1303358, 11.5911791, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],
['fahfah', 'ljlsg', '2742470', 'undefined', 'www.google.com', 48.1367075, 11.5556444, 'https://mapbuildr.com/assets/img/markers/solid-pin-green.png']
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] == 'undefined') {
description = '';
} else {
description = locations[i][1];
}
if (locations[i][2] == 'undefined') {
telephone = '';
} else {
telephone = locations[i][2];
}
if (locations[i][3] == 'undefined') {
email = '';
} else {
email = locations[i][3];
}
if (locations[i][4] == 'undefined') {
web = '';
} else {
web = locations[i][4];
}
if (locations[i][7] == 'undefined') {
markericon = '';
} else {
markericon = locations[i][7];
}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
if (web.substring(0, 7) != "http://") {
link = "http://" + web;
} else {
link = web;
}
bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link);
}
function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
var infoWindowVisible = (function() {
var currentlyVisible = false;
return function(visible) {
if (visible !== undefined) {
currentlyVisible = visible;
}
return currentlyVisible;
};
}());
iw = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if (infoWindowVisible()) {
iw.close();
infoWindowVisible(false);
} else {
var html = "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>" + title + "</h4><p>" + desc + "<p><p>" + telephone + "<p><a href='" + link + "'' >" + web + "<a></div>";
iw = new google.maps.InfoWindow({
content: html
});
iw.open(map, marker);
infoWindowVisible(true);
}
});
google.maps.event.addListener(iw, 'closeclick', function() {
infoWindowVisible(false);
});
}
// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.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)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
} #restaurantmap {
height: 400px;
width: 550px;
}
.gm-style-iw * {
display: block;
width: 100%;
}
.gm-style-iw h4,
.gm-style-iw p {
margin: 0;
padding: 0;
}
.gm-style-iw a {
color: #4272db;
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}<script src="http://maps.google.com/maps/api/js?libraries=places"></script>
<div id='restaurantmap'></div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">这篇关于Google Maps Embed +搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！