Google地图添加新标记并弹出标题 [英] Google Maps add new marker and pop up title
本文介绍了Google地图添加新标记并弹出标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
很抱歉，如果这是一个真正的新手问题，但我永远无法在Google Maps API中找到自己的头。
以下是我的谷歌地图的JS代码。我只想简单地添加另一个标记，并在点击标记时弹出标题。
// Init Google Maps
函数initGoogleMaps（）{$ b $ （$（'＃contact-map'）。length> 0）{
var myLatlng = new google.maps.LatLng（50.373667，-4.138203），
mapOptions = {
center：myLatlng，
zoom：10，
图标：'http://goodmans.co.uk.s171938.gridserver.com/images/23.png '，
mapTypeId：google.maps.MapTypeId.MAP，
滚动：false
// disableDefaultUI：true
}，
map = new google .maps.Map（document.getElementById（contact-map），mapOptions），
marker = new google.maps.Marker（{
position：myLatlng，
map ：地图，
图标：'http://goodmans.co.uk.s171938.gridserver.com/images/23.png'，
标题：拜访我们
}） ;
}
}
init_GoogleMaps（）;
解决方案
- 添加 infowindow
infowindow = new google.maps.InfoWindow（），
- 在标记上添加一个click侦听器以打开它：
google.maps.event.addListener（marker，'click'，function（e）{
infowindow.setContent（marker.getTitle（））;
infowindow.open（map，marker）;
}）;
- 添加第二个标记并点击侦听器：
marker2 = new google.maps.Marker {
位置：myLatlng2，
地图：地图，
图标：'http://goodmans.co.uk.s171938.gridserver.com/images/23.png'，
标题：请访问我们这里也
））
google.maps.event.addListener（marker2，'click'，function（e）{
infowindow.setContent（marker2.getTitle （））;
infowindow.open（map，marker2）;
}）;
代码段：
//初始化Google Mapsfunction initGoogleMaps（）{//在联系页面上初始化if（$（'＃contact-map'）.length> 0）{var myLatlng = new google.maps.LatLng（50.373667， -4.138203），myLatlng2 = new google.maps.LatLng（50.37，-4.2）mapOptions = {center：myLatlng，zoom：10，icon：'http://goodmans.co.uk.s171938.gridserver.com/images/ 23.png'，mapTypeId：google.maps.MapTypeId.MAP，scrollwheel：false // disableDefaultUI：true}，map = new google.maps.Map（document.getElementById（contact-map），mapOptions），infowindow =新的google.maps.InfoWindow（），marker = new google.maps.Marker（{position ：myLatlng，map：map，icon：'http://goodmans.co.uk.s171938.gridserver.com/images/23.png'，标题：来拜访我们}），marker2 =新的google.maps。标记（{位置：myLatlng2，地图：地图，图标：'http://goodmans.co.uk.s171938.gridserver.com/images/23.png'，标题：请访问我们这里也}）谷歌。 maps.event.addListener（marker，'click'，function（e）{infowindow.setContent（marker.getTitle（））; infowindow.open（map，marker）; }）; google.maps.event.addListener（marker2，'click'，function（e）{infowindow.setContent（marker2.getTitle（））; infowindow.open（map，marker2）;}）; }} initGoogleMaps（）;
html，body，＃contact -map {height：100％;宽度：100％; margin：0px; < script src =https：//
Sorry if this is a real rookie question but I can never get my head around Google Maps API.
Below is my JS code for my google map. I just want to simply add another marker and make the title pop up when you click on the marker. Can someone show me how this is done?
// Init Google Maps
function initGoogleMaps() {
// Init on contact page
if ($('#contact-map').length > 0) {
var myLatlng = new google.maps.LatLng(50.373667, -4.138203),
mapOptions = {
center: myLatlng,
zoom: 10,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
mapTypeId: google.maps.MapTypeId.MAP,
scrollwheel: false
// disableDefaultUI: true
},
map = new google.maps.Map(document.getElementById("contact-map"), mapOptions),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us"
});
}
}
initGoogleMaps();
解决方案
- add an infowindow
infowindow = new google.maps.InfoWindow(),
- add a "click" listener to the marker to open it:
google.maps.event.addListener(marker,'click',function(e) {
infowindow.setContent(marker.getTitle());
infowindow.open(map,marker);
});
- add a second marker and click listener for it:
marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us here also"
})
google.maps.event.addListener(marker2,'click',function(e) {
infowindow.setContent(marker2.getTitle());
infowindow.open(map,marker2);
});
code snippet:
// Init Google Maps
function initGoogleMaps() {
// Init on contact page
if ($('#contact-map').length > 0) {
var myLatlng = new google.maps.LatLng(50.373667, -4.138203),
myLatlng2 = new google.maps.LatLng(50.37, -4.2)
mapOptions = {
center: myLatlng,
zoom: 10,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
mapTypeId: google.maps.MapTypeId.MAP,
scrollwheel: false
// disableDefaultUI: true
},
map = new google.maps.Map(document.getElementById("contact-map"), mapOptions),
infowindow = new google.maps.InfoWindow(),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us"
}),
marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
title: "Come visit us here also"
})
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.setContent(marker.getTitle());
infowindow.open(map, marker);
});
google.maps.event.addListener(marker2, 'click', function(e) {
infowindow.setContent(marker2.getTitle());
infowindow.open(map, marker2);
});
}
}
initGoogleMaps();
html,
body,
#contact-map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="contact-map" style="border: 2px solid #3872ac;"></div>
这篇关于Google地图添加新标记并弹出标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
