将图像添加到多个Google地图信息窗口 [英] Adding images to multiple google map infowindows

问题描述

因此，作为任务的一部分，我们必须使用Google Maps API设计地图，该地图需要使用多个infowindows和自定义标记。我已经管理了前两个，但我似乎正在努力与图像？我可以简单地将图像添加到数组中，如果是这样，我该如何正确格式化？

这里是我当前的代码

  //函数$的开始b $ b函数initialise（）{
 
 //在HTML中获取mapArea，基于latlong创建地图
 var map = new google.maps.Map（document.getElementById（'mapArea'）） ，{
 zoom：16，
 center：new google.maps.LatLng（53.470639，-2.238996），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 
 //添加位置和标记数组
 var locations = [
 ['Geoffrey Manton Building'，53.469272，-2.237179，'http：//labs.google.com /ridefinder/images/mm_20_purple.png']，
 ['All Saints Building'，53.471086，-2.238541，'http：//labs.google.com/ridefinder/images/mm_20_red.png']，
 ['Business and Law Schools'，53.470575，-2.239673，'http：//labs.google.com/ridefinder/images/mm_20_green.png']，
 ['John Dalton'，53.471964，-2.240392 ，'http：//labs.google.com/ridefinder/images/mm_20_blue.png']，
]; 
 
 //将变量标记声明为i 
 var marker，i; 
 
 //为位置
声明新的infowindow var infowindow = new google.maps.InfoWindow（）; 
 
 //将标记添加到每个位置
（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{ b $ b位置：new google.maps.LatLng（位置[i] [1]，位置[i] [2]），
地图：地图，
图标：位置[i] [3] 
}）; 
 
 //创建标记功能，允许infowindow打开
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function ）{
 infowindow.setContent（locations [i] [0]）; 
 infowindow.open（map，marker）; 
} 
}）（marker，i））; 
} 
} 
 google.maps.event.addDomListener（window，'load'，initialise）; 
  

解决方案

您可以将图像添加到数组中。那就没事了。

  var locations = [
 ['Geoffrey Manton Building'，53.469272，-2.237179， 'http://labs.google.com/ridefinder/images/mm_20_purple.png'，'http://placehold.it/100x100']，
 ['All Saints Building'，53.471086，-2.238541，'' http://labs.google.com/ridefinder/images/mm_20_red.png'，'http://placehold.it/100x200']，
 ['Business and Law Schools'，53.470575，-2.239673'' http://labs.google.com/ridefinder/images/mm_20_green.png'，'http://placehold.it/100x50']，
 ['John Dalton'，53.471964，-2.240392，'http： //labs.google.com/ridefinder/images/mm_20_blue.png'，'http://placehold.it/200x200']]; 
  

然后使用您需要的任何HTML标记和信息构建您的infowindow内容：

$ p $ google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（） {

var html ='< h4>'+ locations [i] [0] +'< / h4>;
html + ='< img src ='' + locations [i] [4] +'/>';

infowindow.setContent（html）;
infowindow.open（map，marker）;
}
}）（marker，i））;


更改过了。 将元素ID从 mapArea 映射到 map-canvas 。

So, as part of an assignment we have to design a map using the Google Maps API which needs to use multiple infowindows and custom markers. I have managed the first two, but I seem to be struggling with the images? Could I simply add the images into the array, and if so, how do I format this properly?

Here is my current code

//Beginning of Function
function initialise() {

        //Get mapArea in HTML, create map based around latlong
        var map = new google.maps.Map(document.getElementById('mapArea'), {
            zoom: 16,
            center: new google.maps.LatLng(53.470639, -2.238996),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        //add array of locations and markers
        var locations = [
            ['Geoffrey Manton Building', 53.469272, -2.237179,'http://labs.google.com/ridefinder/images/mm_20_purple.png'],
            ['All Saints Building', 53.471086, -2.238541,'http://labs.google.com/ridefinder/images/mm_20_red.png'],
            ['Business and Law Schools', 53.470575, -2.239673,'http://labs.google.com/ridefinder/images/mm_20_green.png'],
            ['John Dalton', 53.471964, -2.240392,'http://labs.google.com/ridefinder/images/mm_20_blue.png'],
        ];

        //declare variable marker as i
        var marker, i;

        //Declare new infowindow for locations
        var infowindow = new google.maps.InfoWindow();

        //add marker to each location
        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,
                icon: locations[i][3]
            });

            //Create marker functionality, allow infowindow opening
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }
    google.maps.event.addDomListener(window, 'load', initialise);

解决方案

You can add the images to your array. That'd be fine.

var locations = [
    ['Geoffrey Manton Building', 53.469272, -2.237179, 'http://labs.google.com/ridefinder/images/mm_20_purple.png', 'http://placehold.it/100x100'],
    ['All Saints Building', 53.471086, -2.238541, 'http://labs.google.com/ridefinder/images/mm_20_red.png', 'http://placehold.it/100x200'],
    ['Business and Law Schools', 53.470575, -2.239673, 'http://labs.google.com/ridefinder/images/mm_20_green.png', 'http://placehold.it/100x50'],
    ['John Dalton', 53.471964, -2.240392, 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 'http://placehold.it/200x200']];

Then build your infowindow content with whatever HTML markup and information you need from your array:

google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {

        var html = '<h4>' + locations[i][0] + '</h4>';
        html += '<img src="' + locations[i][4] + '" />';

        infowindow.setContent(html);
        infowindow.open(map, marker);
    }
})(marker, i));

JSFiddle demo

Note that I have changed your main function name from initialise to initialize and you map element id from mapArea to map-canvas.

这篇关于将图像添加到多个Google地图信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！