Javascript 谷歌地图商店定位和搜索
我有一个谷歌搜索和显示标记的例子。我正试图让谷歌显示一个标记地图，然后是一个搜索栏，供用户输入city或zip，并显示带有标记的区域。 我跟着 一切都很好，但当地图第一次加载时，它不会显示任何标记。只有当你搜索的时候。我需要一直戴着这些记号笔Javascript 谷歌地图商店定位和搜索,javascript,api,maps,markers,Javascript,Api,Maps,Markers,我有一个谷歌搜索和显示标记的例子。我正试图让谷歌显示一个标记地图，然后是一个搜索栏，供用户输入city或zip，并显示带有标记的区域。 我跟着 一切都很好，但当地图第一次加载时，它不会显示任何标记。只有当你搜索的时候。我需要一直戴着这些记号笔 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Store Locate</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false&libraries=places&key=AIzaSyDOorkShHO1xhw2zbjz-OZdSKP-xQ65AS0"></script>
<style>
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.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;
}
</style>
<script type="text/javascript">
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
var gmarkers = [];
var marker;
var map = null;
var t=1;
function initialize() {
// create the map
var myOptions = {
center: new google.maps.LatLng(35.467560, -97.516428),
zoom:6,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
initSearchBox(map, 'pac-input');
}//----------------INIT END--------------------
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function initSearchBox(map, controlId) {
// Create the search box and link it to the UI element.
var input = (document.getElementById(controlId));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(input);
// [START region_getplaces]
// 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;
}
//get first place
var place = places[0];
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50),
content : place.info
});
// Add markers to the map
// Set up the markers with info windows
// add the points
var point = new google.maps.LatLng(35.979088,-96.112985);
var marker = createMarker(point,"Firestone, Oklahoma City<br>211 411 2311")
var point = new google.maps.LatLng(38.0409333,23.7954601);
var marker = createMarker(point,"Nespresso S.A.","<b>Nespresso S.A.</b><br>Agiou Thoma 27,15124,Marousi")
var point = new google.maps.LatLng(38.0473031,23.8053483);
var marker = createMarker(point,"Regency Entertainment","<b>Regency Entertainment</b><br>Agiou Konstantinou 49,15124,Marousi <br>210 614 9800")
var point = new google.maps.LatLng(38.050986,23.8084322);
var marker = createMarker(point,"Just4U","<b>Just4U</b> <br>Dimitriou Gounari 84, 15124, Marousi<br>210 614 1923")
var point = new google.maps.LatLng(38.0400533,23.8011982);
var marker = createMarker(point,"Ekka Cars S.A.","<b>Ekka</b> <br>Leoforos Kifisias 79,15124,Marousi<br>210 349 8000")
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
t -=1;//This is so if you search again, it doesn't display again in sidebar
map.fitBounds(place.geometry.viewport);
});
}
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
//zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body style="margin:0px; padding:0px;" >
<input id="pac-input" class="controls" type="text" placeholder="City, State or Zip Code">
<div id="map_canvas" style="width: 550px; height: 450px"></div>
</body>
</html>
商店地址
#pac输入{
背景色：#fff；
字体系列：Roboto；
字体大小：15px；
字体大小：300；
左边距：12px；
填充：0 11px 0 13px；
文本溢出：省略号；
宽度：400px；
}
#pac输入：焦点{
边框颜色：#4d90fe；
}
.pac容器{
字体系列：Roboto；
}
#类型选择器{
颜色：#fff；
背景色：#4d90fe；
填充：5px11px 0px 11px；
}
#类型选择器标签{
字体系列：Roboto；
字体大小：13px；
字体大小：300；
}
var side_bar_html=“”；
//数组，用于保存侧栏使用的标记和html的副本
var gmarkers=[]；
var标记；
var-map=null；
var t=1；
函数初始化（）{
//创建地图
变量myOptions={
中心：新google.maps.LatLng（35.467560，-97.516428），
缩放：6，
disableDefaultUI:true，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
initSearchBox（映射“pac输入”）；
}//----------------初始结束------------------
var infowindow=new google.maps.infowindow（
{
尺寸：新谷歌地图尺寸（150,50）
});
//此函数拾取单击并打开相应的信息窗口
函数myclick（i）{
google.maps.event.trigger（gmarkers[i]，“点击”）；
}
函数initSearchBox（映射，控件ID）{
//创建搜索框并将其链接到UI元素。
var输入=（document.getElementById（controlId））；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
var searchBox=newgoogle.maps.places.searchBox（输入）；
//[开始区域\u getplaces]
//侦听当用户从中选择项目时激发的事件
//选择列表。检索该项目的匹配位置。
google.maps.event.addListener（搜索框，'places_changed'，函数（）{
var places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
//获得第一名
变量位置=位置[0]；
var infowindow=new google.maps.infowindow（
{
尺寸：新谷歌地图尺寸（150,50），
内容：place.info
});
//向地图添加标记
//使用信息窗口设置标记
//加分
var point=new google.maps.LatLng（35.979088，-96.112985）；
var marker=createMarker（点，“俄克拉荷马州火石城
211 411 2311”）
var point=new google.maps.LatLng（38.0409333,23.7954601）；
var marker=createMarker（点，“Nespresso S.A.”，“Nespresso S.A.
Agiou Thoma 2715124，Marousi”）
var point=new google.maps.LatLng（38.0473031,23.8053483）；
var marker=createMarker（点，“摄政娱乐”、“摄政娱乐”
Agiou Konstantinou 4915124，Marousi
210 614 9800）
var point=new google.maps.LatLng（38.050986,23.8084322）；
var marker=createMarker（点，“Just4U”，“Just4U
Dimitriou Gounari 8415124，Marousi
210 614 1923”）
var point=new google.maps.LatLng（38.0400533,23.8011982）；
var marker=createMarker（点，“Ekka汽车有限公司”，“Ekka
Leoforos Kifisias 7915124，Marousi
210 349 8000”）
//将组装好的side_bar_html内容放入side_bar div
document.getElementById（“side\u bar”）.innerHTML=side\u bar\u html；
t-=1；//如果再次搜索，它不会再次显示在侧边栏中
map.fitBounds（place.geometry.viewport）；
});
}
//创建标记和设置事件窗口功能的函数
函数createMarker（latlng，name，html）{
var contentString=html；
var marker=new google.maps.marker（{
位置：latlng，
地图：地图，
//zIndex:Math.round（latlng.lat（）*-100000）这是因为您正在places\u changed
事件中添加标记。只需将标记创建代码移动到initialize
函数中即可
var point = new google.maps.LatLng(35.979088,-96.112985);
var marker = createMarker(point,"Firestone, Oklahoma City<br>211 411 2311");
var point = new google.maps.LatLng(38.0409333,23.7954601);
var marker = createMarker(point,"Nespresso S.A.","<b>Nespresso S.A.</b><br>Agiou Thoma 27,15124,Marousi");
var point = new google.maps.LatLng(38.0473031,23.8053483);
var marker = createMarker(point,"Regency Entertainment","<b>Regency Entertainment</b><br>Agiou Konstantinou 49,15124,Marousi <br>210 614 9800");
var point = new google.maps.LatLng(38.050986,23.8084322);
var marker = createMarker(point,"Just4U","<b>Just4U</b> <br>Dimitriou Gounari 84, 15124, Marousi<br>210 614 1923");
var point = new google.maps.LatLng(38.0400533,23.8011982);
var marker = createMarker(point,"Ekka Cars S.A.","<b>Ekka</b> <br>Leoforos Kifisias 79,15124,Marousi<br>210 349 8000");
因此，初始化
函数如下所示：
function initialize() {
// create the map
var myOptions = {
center: new google.maps.LatLng(35.467560, -97.516428),
zoom:6,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var point = new google.maps.LatLng(35.979088,-96.112985);
var marker = createMarker(point,"Firestone, Oklahoma City<br>211 411 2311");
point = new google.maps.LatLng(38.0409333,23.7954601);
marker = createMarker(point,"Nespresso S.A.","<b>Nespresso S.A.</b><br>Agiou Thoma 27,15124,Marousi");
point = new google.maps.LatLng(38.0473031,23.8053483);
marker = createMarker(point,"Regency Entertainment","<b>Regency Entertainment</b><br>Agiou Konstantinou 49,15124,Marousi <br>210 614 9800");
point = new google.maps.LatLng(38.050986,23.8084322);
marker = createMarker(point,"Just4U","<b>Just4U</b> <br>Dimitriou Gounari 84, 15124, Marousi<br>210 614 1923");
point = new google.maps.LatLng(38.0400533,23.8011982);
marker = createMarker(point,"Ekka Cars S.A.","<b>Ekka</b> <br>Leoforos Kifisias 79,15124,Marousi<br>210 349 8000");
initSearchBox(map, 'pac-input');
}
函数初始化（）{
//创建地图
变量myOptions={
中心：新google.maps.LatLng（35.467560，-97.516428），
缩放：6，
disableDefaultUI:true，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
var point=new google.maps.LatLng（35.979088，-96.112985）；
var marker=createMarker（点，“俄克拉荷马州火石城
211 411 2311”）；
point=new google.maps.LatLng（38.0409333,23.7954601）；
marker=createMarker（点，“Nespresso S.A.”，“Nespresso S.A.
Agiou Thoma 2715124，Marousi”）；
point=new google.maps.LatLng（38.0473031,23.8053483）；
marker=createMarker（点，“摄政娱乐”、“摄政娱乐”
Agiou Konstantinou 4915124，Marousi
210 614 9800）；
point=new google.maps.LatLng（38.050986,23.8084322）；
marker=createMarker（点，“Just4U”，“Just4U
Dimitriou Gounari 8415124，Marousi
210 614 1923”）；
point=new google.maps.LatLng（38.0400533,23.8011982）；
marker=createMarker（点，“Ekka汽车有限公司”，“Ekka
Leoforos Kifisias 7915124，Marousi
210 3
function initialize() {
// create the map
var myOptions = {
center: new google.maps.LatLng(35.467560, -97.516428),
zoom:6,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var point = new google.maps.LatLng(35.979088,-96.112985);
var marker = createMarker(point,"Firestone, Oklahoma City<br>211 411 2311");
point = new google.maps.LatLng(38.0409333,23.7954601);
marker = createMarker(point,"Nespresso S.A.","<b>Nespresso S.A.</b><br>Agiou Thoma 27,15124,Marousi");
point = new google.maps.LatLng(38.0473031,23.8053483);
marker = createMarker(point,"Regency Entertainment","<b>Regency Entertainment</b><br>Agiou Konstantinou 49,15124,Marousi <br>210 614 9800");
point = new google.maps.LatLng(38.050986,23.8084322);
marker = createMarker(point,"Just4U","<b>Just4U</b> <br>Dimitriou Gounari 84, 15124, Marousi<br>210 614 1923");
point = new google.maps.LatLng(38.0400533,23.8011982);
marker = createMarker(point,"Ekka Cars S.A.","<b>Ekka</b> <br>Leoforos Kifisias 79,15124,Marousi<br>210 349 8000");
initSearchBox(map, 'pac-input');
}