信息框到谷歌地图显示标题

Question

我正在尝试在标题中添加一个带有一些 html 内容的信息框。问题是。当我使用 close x 信息框并选择另一个标记时，它会在信息框中显示旧标题 html

我的代码：

for (i = 0; i < markers.length; i++) {
    var m = markers[i];

    google.maps.event.addListener(m, 'click', (function (m) {
        return function () {
            $('#infobox').html(m.getTitle());
            infobox.open(gm_map, this);
        }
    })(m));
}

我错过了什么。谢谢

Answer 1

您需要等待domready 事件才能访问信息框的 DOM 中的元素。

for (i = 0; i < markers.length; i++) {
   var m = markers[i];

   google.maps.event.addListener(m, 'click', (function (m) {
     return function () {
       infobox.open(gm_map, this);
       google.maps.event.addListener(infobox, 'domready', function() {
         $('#infobox').html(m.getTitle());
       }
     }
   })(m));
}

下面的代码sn-p：

var infobox = new InfoBox({
		 disableAutoPan: false
		,maxWidth: 0
		,pixelOffset: new google.maps.Size(-50, -10)
		,zIndex: null
		,boxStyle: { 
		  background: "url('tipbox.gif') no-repeat"
		  ,opacity: 0.75
		  ,width: "100px"
		 }
		,closeBoxMargin: "10px 2px 2px 2px"
		,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
		,infoBoxClearance: new google.maps.Size(1, 1)
		,isHidden: false
		,pane: "floatPane"
		,enableEventPropagation: false,
    content: "<div id='infobox' style='border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;'></div>"
});
var markers = [];

function initialize() {
    var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(41.924832, -87.697456),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var gm_map = new google.maps.Map($("#map_canvas")[0], myOptions);
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < data.photos.length; i++) {
        markers.push(new google.maps.Marker({
            map: gm_map,
            position: new google.maps.LatLng(
            data.photos[i].latitude,
            data.photos[i].longitude),
            title: data.photos[i].photo_title
        }));
    }
    for (i = 0; i < markers.length; i++) {
        var m = markers[i];
        bounds.extend(markers[i].getPosition());
        google.maps.event.addListener(m, 'click', (function (m) {
            return function () {
                infobox.open(gm_map, this);
                google.maps.event.addListener(infobox, 'domready', function () {
                    $('#infobox').html(m.getTitle());
                });
            };
        })(m));
    }
    gm_map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
      
var data = { "count": 10785236, "photos": [{"photo_id": 27932, "photo_title": "Atardecer en Embalse", "photo_url": "http://www.panoramio.com/photo/27932", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/27932.jpg", "longitude": -64.404945, "latitude": -32.202924, "width": 500, "height": 375, "upload_date": "25 June 2006", "owner_id": 4483, "owner_name": "Miguel Coranti", "owner_url": "http://www.panoramio.com/user/4483"},{"photo_id": 522084, "photo_title": "In Memoriam Antoine de Saint Exupéry", "photo_url": "http://www.panoramio.com/photo/522084", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/522084.jpg", "longitude": 17.470493, "latitude": 47.867077, "width": 500, "height": 350, "upload_date": "21 January 2007", "owner_id": 109117, "owner_name": "Busa Péter", "owner_url": "http://www.panoramio.com/user/109117"},{"photo_id": 1578881, "photo_title": "Rosina Lamberti,Sunset,Templestowe , Victoria, Australia", "photo_url": "http://www.panoramio.com/photo/1578881", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1578881.jpg", "longitude": 145.141754, "latitude": -37.766372, "width": 500, "height": 474, "upload_date": "01 April 2007", "owner_id": 140796, "owner_name": "rosina lamberti", "owner_url": "http://www.panoramio.com/user/140796"},{"photo_id": 97671, "photo_title": "kin-dza-dza", "photo_url": "http://www.panoramio.com/photo/97671", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/97671.jpg", "longitude": 30.785408, "latitude": 46.639301, "width": 500, "height": 375, "upload_date": "09 December 2006", "owner_id": 13058, "owner_name": "Kyryl", "owner_url": "http://www.panoramio.com/user/13058"},{"photo_id": 25514, "photo_title": "Arenal", "photo_url": "http://www.panoramio.com/photo/25514", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/25514.jpg", "longitude": -84.693432, "latitude": 10.479372, "width": 500, "height": 375, "upload_date": "17 June 2006", "owner_id": 4112, "owner_name": "Roberto Garcia", "owner_url": "http://www.panoramio.com/user/4112"},{"photo_id": 57823, "photo_title": "Maria Alm", "photo_url": "http://www.panoramio.com/photo/57823", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/57823.jpg", "longitude": 12.900009, "latitude": 47.409968, "width": 500, "height": 333, "upload_date": "05 October 2006", "owner_id": 8060, "owner_name": "Norbert MAIER", "owner_url": "http://www.panoramio.com/user/8060"},{"photo_id": 532693, "photo_title": "Wheatfield in afternoon light", "photo_url": "http://www.panoramio.com/photo/532693", "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/532693.jpg", "longitude": 11.272659, "latitude": 59.637472, "width": 500, "height": 333, "upload_date": "22 January 2007", "owner_id": 39160, "owner_name": "Snemann", "owner_url": "http://www.panoramio.com/user/39160"}]
                 

            };

html, body, #map_canvas {
  width: 100%;
  height: 100%;
}

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>