Google Maps API InfoWindow不显示内容

My Code looks like this:

我的代码看起来像这样：

var map = /*some google map - defined earlier in the code*/;
var geocoder = new google.maps.Geocoder();
var address = 'Some Address, Some Street, Some Place';
geocoder.geocode({'address':address},function(results,status){
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var infobox = new google.maps.InfoWindow({
            content: 'Hello world'
        });
        for(i in results){
            var marker = new google.maps.Marker({
                map: map, 
                position: results[i].geometry.location
            });
            google.maps.event.addListener(marker, 'click', function() {
                infobox.setContent('blablabla');
                infobox.open(map,marker);
                alert(infobox.content); //displays 'blablabla'
            });
        }
    }
});

Basically it's creating some markers on a single map based on a given address-string. It adds an infoWindow to the markers that opens on click.

基本上它是基于给定的地址字符串在单个地图上创建一些标记。它将infoWindow添加到单击时打开的标记。

Problem is: the infoWindow displays empty.

问题是：infoWindow显示为空。

Screenshot here:

屏幕截图：

PS: Using Maps API V3

PS：使用Maps API V3

4 个解决方案

#1

I just ran into the same problem, and found the very simple cause of it: The text in the info window was actually displayed, but in white color, and therefore just not visible on the white background. Giving the content a different color via CSS solved the problem for me.

我遇到了同样的问题，并找到了它的简单原因：信息窗口中的文本实际上是显示的，但是是白色的，因此在白色背景上看不到。通过CSS为内容提供不同的颜色解决了我的问题。

#2

Basically you need to use a function external to your marker adding-loop to add the infobox message to each marker... for an example and detailed explanation see: http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures

基本上，您需要使用标记添加循环外部的函数将信息框消息添加到每个标记...有关示例和详细说明，请参阅：http：//code.google.com/apis/maps/documentation/javascript /events.html#EventClosures

#3

Here is how I have done it.

我是这样做的。

var map,markersArray,infowindow; //infowindow has been declared as a global variable.

function initialize(){
    var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(51.5001524,-0.1262362),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

    infowindow = new google.maps.InfoWindow(
                    { 
                        size: new google.maps.Size(150,50)
                    });

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

    markersArray = [];
}

function createMarker(latlng, html,zoom) {
   var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
    });
    marker.MyZoom = zoom; 
    return marker; 
}

You can find the working example here and the complete javascript here.

你可以在这里找到工作示例和完整的javascript。

#4

I have resolved issue by adding below code.

我通过添加以下代码解决了问题。

setTimeout(function () { GeocodeMarker.info.open(GoogleMap, GeocodeMarker); }, 300);

setTimeout（function（）{GeocodeMarker.info.open（GoogleMap，GeocodeMarker）;}，300）;

Thanks

谢谢

#1

#2

#3