我如何设置此 Google 地图信息窗口的样式？
How can I style this Google Maps infoWindow?
我有以下 javascript：
<!--Google Maps Script-->
<script type="text/javascript">
var locations = [
["1 Severn", 45.489886, -73.595116],
["16 Grenville", 45.486391, -73.607096],
["17 Winchester", 45.477646, -73.603917],
["19 Winchester", 45.477607, -73.603962],
["52 Brookfield", 45.514604, -73.632722],
["317 Chemin du Golf", 45.467418, -73.548665],
["319 Chemin du Golf", 45.467418, -73.548665],
["447 Mt. Stephen", 45.483900, -73.600203],
["449 Mt. Stephen", 45.483933, -73.600179],
["603 Lansdowne", 45.484876, -73.609120],
["649 Belmont", 45.485654, -73.609270],
["652 Roslyn", 45.484788, -73.611407],
["1235 Bishop", 45.496458, -73.575373],
["1355 Scarboro", 45.523431, -73.639453],
["2184 De Cologne", 45.515823, -73.704550],
["2302 Brookfield", 45.514738, -73.632688],
["3013 De Breslay", 45.492288, -73.590195],
["3019 De Breslay", 45.492092, -73.590437],
["3021 Jean Girard", 45.493183, -73.590212],
["3025 De Breslay", 45.492075, -73.590771],
["4389 Decarie", 45.480705, -73.620274]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(45.484876, -73.609120),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
<!--End Google Maps Script-->
产生以下内容：http://lexis250.github.io/groupecopley/map/
我想设置我的信息 windows（单击图钉时弹出的 window）的样式，以便它们具有标题、图像和 link。我该怎么做呢？
不确定您需要什么款式
但是您可以在代码的这一行中添加 html 标记，如下所示：
使用 class 名称，您可以在 css 文件中格式化您的样式。
请参阅此处的 jsfiddle。希望这有帮助。
...
infowindow.setContent('<h4 class="modern">'+locations[i][0]+'</h4>');
一个选项：
将标题和描述添加到位置数组：
// address, latitude, longitude, title, description
[["1 Severn", 45.489886, -73.595116, "Title 1", "description for marker #1"],
...
然后从那里将其放入信息窗口。
var locations = [
["1 Severn", 45.489886, -73.595116, "first title", "description 0<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris eros, fermentum eu venenatis sed, aliquet in tortor. Etiam urna turpis, varius sed cursus vel, pretium eget sapien. Vestibulum ut vehicula nisi, ultricies pretium lectus. Praesent elementum lacus a purus cursus, quis laoreet risus semper. Morbi condimentum pellentesque tortor, eget dictum ligula cursus sit amet. Vestibulum fermentum, tellus non aliquam tristique, ligula neque eleifend nisl, nec condimentum sapien magna id tellus. Mauris commodo at nibh in hendrerit. Nunc lacinia lobortis pellentesque. Curabitur quis tincidunt ligula. Sed vel vestibulum lorem. Aliquam nec porttitor dolor. Suspendisse potenti. Sed et vestibulum ipsum, nec ullamcorper leo. Mauris mollis pellentesque arcu. Etiam et sem dictum augue bibendum pretium. Donec id justo orci."],
["16 Grenville", 45.486391, -73.607096, "second title", "description 1"],
["17 Winchester", 45.477646, -73.603917, "third title", "description 2"],
["19 Winchester", 45.477607, -73.603962, "fourth title", "description 3"],
["52 Brookfield", 45.514604, -73.632722, "fifth title", "description 4"],
["317 Chemin du Golf", 45.467418, -73.548665, "sixth title", "description 5"],
["319 Chemin du Golf", 45.467418, -73.548665, "seventh title", "description 6"],
["447 Mt. Stephen", 45.483900, -73.600203, "8th title", "description 7"],
["449 Mt. Stephen", 45.483933, -73.600179, "9th title", "description 8"],
["603 Lansdowne", 45.484876, -73.609120, "10th title", "description 9"],
["649 Belmont", 45.485654, -73.609270, "12th title", "description 10"],
["652 Roslyn", 45.484788, -73.611407, "13th title", "description 11"],
["1235 Bishop", 45.496458, -73.575373, "14th title", "description 12"],
["1355 Scarboro", 45.523431, -73.639453, "15th title", "description 13"],
["2184 De Cologne", 45.515823, -73.704550, "16th title", "description 14"],
["2302 Brookfield", 45.514738, -73.632688, "17th title", "description 15"],
["3013 De Breslay", 45.492288, -73.590195, "18th title", "description 16"],
["3019 De Breslay", 45.492092, -73.590437, "19th title", "description 17"],
["3021 Jean Girard", 45.493183, -73.590212, "20th title", "description 18"],
["3025 De Breslay", 45.492075, -73.590771, "21st title", "description 19"],
["4389 Decarie", 45.480705, -73.620274, "22nd title", "description 20"]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(45.484876, -73.609120),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
title: locations[i][0],
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("<h3 class='title'>" + locations[i][3] + "</h3><div style='text-align: center'>" + locations[i][0] + "</div><div class='description'>" + locations[i][4]+"</div");
infowindow.open(map, marker);
}
})(marker, i));
}
html,
body,
#map {
height: 100%;
width: 100%;
}
h3 {
text-align: center;
}
.title {
color: blue;
}
.description {
color: green;
font-face: "Courier";
}
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map"></div>
我有以下 javascript：
<!--Google Maps Script-->
<script type="text/javascript">
var locations = [
["1 Severn", 45.489886, -73.595116],
["16 Grenville", 45.486391, -73.607096],
["17 Winchester", 45.477646, -73.603917],
["19 Winchester", 45.477607, -73.603962],
["52 Brookfield", 45.514604, -73.632722],
["317 Chemin du Golf", 45.467418, -73.548665],
["319 Chemin du Golf", 45.467418, -73.548665],
["447 Mt. Stephen", 45.483900, -73.600203],
["449 Mt. Stephen", 45.483933, -73.600179],
["603 Lansdowne", 45.484876, -73.609120],
["649 Belmont", 45.485654, -73.609270],
["652 Roslyn", 45.484788, -73.611407],
["1235 Bishop", 45.496458, -73.575373],
["1355 Scarboro", 45.523431, -73.639453],
["2184 De Cologne", 45.515823, -73.704550],
["2302 Brookfield", 45.514738, -73.632688],
["3013 De Breslay", 45.492288, -73.590195],
["3019 De Breslay", 45.492092, -73.590437],
["3021 Jean Girard", 45.493183, -73.590212],
["3025 De Breslay", 45.492075, -73.590771],
["4389 Decarie", 45.480705, -73.620274]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(45.484876, -73.609120),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
<!--End Google Maps Script-->
产生以下内容：http://lexis250.github.io/groupecopley/map/
我想设置我的信息 windows（单击图钉时弹出的 window）的样式，以便它们具有标题、图像和 link。我该怎么做呢？
不确定您需要什么款式
但是您可以在代码的这一行中添加 html 标记，如下所示： 使用 class 名称，您可以在 css 文件中格式化您的样式。
请参阅此处的 jsfiddle。希望这有帮助。
...
infowindow.setContent('<h4 class="modern">'+locations[i][0]+'</h4>');
一个选项： 将标题和描述添加到位置数组：
// address, latitude, longitude, title, description
[["1 Severn", 45.489886, -73.595116, "Title 1", "description for marker #1"],
...
然后从那里将其放入信息窗口。
var locations = [
["1 Severn", 45.489886, -73.595116, "first title", "description 0<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris eros, fermentum eu venenatis sed, aliquet in tortor. Etiam urna turpis, varius sed cursus vel, pretium eget sapien. Vestibulum ut vehicula nisi, ultricies pretium lectus. Praesent elementum lacus a purus cursus, quis laoreet risus semper. Morbi condimentum pellentesque tortor, eget dictum ligula cursus sit amet. Vestibulum fermentum, tellus non aliquam tristique, ligula neque eleifend nisl, nec condimentum sapien magna id tellus. Mauris commodo at nibh in hendrerit. Nunc lacinia lobortis pellentesque. Curabitur quis tincidunt ligula. Sed vel vestibulum lorem. Aliquam nec porttitor dolor. Suspendisse potenti. Sed et vestibulum ipsum, nec ullamcorper leo. Mauris mollis pellentesque arcu. Etiam et sem dictum augue bibendum pretium. Donec id justo orci."],
["16 Grenville", 45.486391, -73.607096, "second title", "description 1"],
["17 Winchester", 45.477646, -73.603917, "third title", "description 2"],
["19 Winchester", 45.477607, -73.603962, "fourth title", "description 3"],
["52 Brookfield", 45.514604, -73.632722, "fifth title", "description 4"],
["317 Chemin du Golf", 45.467418, -73.548665, "sixth title", "description 5"],
["319 Chemin du Golf", 45.467418, -73.548665, "seventh title", "description 6"],
["447 Mt. Stephen", 45.483900, -73.600203, "8th title", "description 7"],
["449 Mt. Stephen", 45.483933, -73.600179, "9th title", "description 8"],
["603 Lansdowne", 45.484876, -73.609120, "10th title", "description 9"],
["649 Belmont", 45.485654, -73.609270, "12th title", "description 10"],
["652 Roslyn", 45.484788, -73.611407, "13th title", "description 11"],
["1235 Bishop", 45.496458, -73.575373, "14th title", "description 12"],
["1355 Scarboro", 45.523431, -73.639453, "15th title", "description 13"],
["2184 De Cologne", 45.515823, -73.704550, "16th title", "description 14"],
["2302 Brookfield", 45.514738, -73.632688, "17th title", "description 15"],
["3013 De Breslay", 45.492288, -73.590195, "18th title", "description 16"],
["3019 De Breslay", 45.492092, -73.590437, "19th title", "description 17"],
["3021 Jean Girard", 45.493183, -73.590212, "20th title", "description 18"],
["3025 De Breslay", 45.492075, -73.590771, "21st title", "description 19"],
["4389 Decarie", 45.480705, -73.620274, "22nd title", "description 20"]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(45.484876, -73.609120),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
title: locations[i][0],
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("<h3 class='title'>" + locations[i][3] + "</h3><div style='text-align: center'>" + locations[i][0] + "</div><div class='description'>" + locations[i][4]+"</div");
infowindow.open(map, marker);
}
})(marker, i));
}
html,
body,
#map {
height: 100%;
width: 100%;
}
h3 {
text-align: center;
}
.title {
color: blue;
}
.description {
color: green;
font-face: "Courier";
}
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map"></div>