Google Maps v3：标记和信息窗口未显示答案

【问题标题】：Google Maps v3: Marker and infowindow is not displayingGoogle Maps v3：标记和信息窗口未显示
【发布时间】：2012-06-06 05:40:14
【问题描述】：

这张地图正在部分工作。它显示了两个地图，但我无法弄清楚为什么标记和信息窗口没有显示在路线图上。你们能帮帮我吗？

jsFiddle：http://jsfiddle.net/btqVx/2/

Javascript：

//<![CDATA[
// ************************   Variables   ************************
//****** Map Options ******//
var roadmap =
        {
        infoWindow: new google.maps.InfoWindow(),
        options:
            {
            map:
                {
                center: new google.maps.LatLng( 34.021868, -118.29322300000001 ),
                zoom: 15,
                mapTypeId: 'roadmap'
                }
            }
        };
        roadmap.options.marker =
            {
            position: roadmap.options.center,
            title: 'Hello',
            icon: 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
            shadow: 'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png'
            };

//****** Street view Options ******//
var StreetView =
        {
        options:
            {
            position: roadmap.options.map.center,
            zoom: 1
            },
        geometry:
            {
            MaxDistance: 30,
            cameraHeading: 0
            }
        };
        StreetView.StreetViewService = new google.maps.StreetViewService();


// ************************   Functions   ************************
//****** InfoWindow ******//
function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
        infoWindow.getContent();marker.openInfoWindowTabsHtml(infoTabs);
    });
}


//****** onLoad ******//
function googleMaps()
{
    // ************************   Road map   ************************
    roadmap.map = new google.maps.Map(document.getElementById("map"), roadmap.options.map );


    // ************************   Road map's Marker   ************************
    roadmap.options.marker.map = new google.maps.Map(document.getElementById("map"), roadmap.options.map );
    roadmap.marker = new google.maps.Marker( roadmap.options.marker );


    // ************************   Add infoWindow & click Listener to Marker   ************************
    bindInfoWindow( roadmap.marker, roadmap.map, roadmap.infoWindow, roadmap.options.marker.title );


    // ************************   Street view map   ************************
    var building = StreetView.options.position;

    function getHeading(buildingLatLng, callback) {
        StreetView.StreetViewService.getPanoramaByLocation(buildingLatLng, StreetView.geometry.MaxDistance, function (streetViewPanoramaData, status) {
            if(status === google.maps.StreetViewStatus.OK) {
                var car = streetViewPanoramaData.location.latLng;
                callback(google.maps.geometry.spherical.computeHeading(car, building));         
            }
        });
    }

    getHeading(building, function(carHeading) {
      StreetView.map = new google.maps.StreetViewPanorama(document.getElementById("map_StreetView"), {
        position: StreetView.options.position,
        pov: { heading: carHeading, pitch: 0, zoom: 1 }
      });
    });

} //end of load()


// ************************   Load   ************************
//Call googleMaps after document is loaded
google.maps.event.addDomListener(window, 'load', function(){
    googleMaps();
    //you can add more code here
    });
//]]>

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Street View & Road map</title>

    <!-- START: Google Maps API -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="street_view.js"></script>
    <!-- __END: Google Maps API -->
</head>

<body>
    <div id="map-container" >
        <div id="map_StreetView" style="width: 350px; height: 250px"></div><br/>
        <div id="map" style="width: 350px; height: 250px"></div>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers infowindow

【解决方案1】：

你好 :) 这是我更新的演示 http://jsfiddle.net/RgaCe/

我做了这些更改：

(1) 图标/阴影变成了MarkerImages，因为他们没有排队

    var bluePin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
      new google.maps.Size(32, 32),
      new google.maps.Point(0, 0),
      new google.maps.Point(15, 32));

    var pinShadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
      new google.maps.Size(59, 32),
      new google.maps.Point(0, 0),
      new google.maps.Point(15, 32));

(2)

roadmap.options.marker = 
        {
        // CHANGE add .map.
        position: roadmap.options.map.center,

(3) 注释掉这个未定义的函数//marker.openInfoWindowTabsHtml(infoTabs);

(4)

// CHANGE roadmap.map TO roadmap.options.marker.map
    bindInfoWindow( roadmap.marker, roadmap.options.marker.map, 
      roadmap.infoWindow, roadmap.options.marker.title );

【讨论】：

如您所见，这是您帮助我处理的同一张地图，并进行了一些自定义。非常感谢 =)
@Omar 我尽力了 :) 不过，您应该对 MarkerImages 进行一些小修正。我更新了上面的答案，每个 MarkerImage 中的最后一个点应该是（15,32），而不是（0,32）。我正在复制的示例使用了不同的图标，并与具有默认图标的地图进行比较，我注意到它们不匹配。初始缩放时偏移量约为四分之一块。
@liliana 我发现了一个故障 >_
@liliana streetVew 地图在使用此坐标时为空白 34.0351030, -118.2821230
我能够找到一个替代答案，基于谷歌地图 api v2 过去的做法。但是，我更新了代码以使用 api v3：jsfiddle.net/ZzJFb/3 如果你想了解它，这里是参考 groups.google.com/group/google-maps-js-api-v3/browse_thread/… BTW，我还修改了标记的阴影图标，所以你不必使用“hack” .