Question

我有以下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/

我想设置我的信息窗口（点击一个图钉时弹出的窗口），以便它们有标题，图像和链接。我怎么能这样做呢？

Answer 1

一种选择：将标题和描述添加到locations数组：

// address,   latitude,  longitude,   title,     description
[["1 Severn", 45.489886, -73.595116, "Title 1", "description for marker #1"],
  ...

然后从那里把它放在infowindow。

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>

Answer 2

不确定你需要什么样的风格

但是你可以在代码的这一行添加html标签，如下所示：使用类名，您可以在css文件中格式化您的样式。

请在此处查看jsfiddle。希望这会有所帮助。

...
    infowindow.setContent('<h4 class="modern">'+locations[i][0]+'</h4>');

如何设置此Google Maps infoWindow的样式？

2 个答案: