谷歌地图v3:标记和信息窗口未显示

Google Maps v3: Marker and infowindow is not displaying

本文关键字：信息窗窗口显示信息 v3 谷歌地图更新时间：2023-09-26

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

js小提琴：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>

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

我进行了以下更改：

（1）图标/阴影变成MarkerImage，因为它们没有排队

    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));

（二）

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

（3）注释此未定义的函数//marker.openInfoWindowTabsHtml(infoTabs);

（四）

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