Google Maps Embed +搜索框 [英] Google Maps Embed + Search box
本文介绍了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 +搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
