Google Maps v3: Маркер и информационное окно не отображаются

Эта карта частично рабочая. Он отображает обе карты, НО я не могу понять, почему маркер и информационное окно не отображаются на дорожной карте. Не могли бы вы, ребята, помочь мне?

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>

google-maps javascript google-maps-api-3 google-maps-markers infowindow
person Omar    schedule 31.05.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Привет еще раз :) Вот моя обновленная демонстрация 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 );
person Tina CG Hoehr    schedule 31.05.2012
comment
Как видите, это та же карта, с которой вы мне помогаете, но с некоторыми изменениями. Большое спасибо =) - person Omar; 01.06.2012
comment
@ Омар, я стараюсь изо всех сил :) Тем не менее, есть небольшая поправка, которую вы должны внести в MarkerImages. Я обновил ответ выше, последние точки в каждом MarkerImage должны быть (15,32), а не (0,32). В примере, который я копировал, использовался другой значок, и по сравнению с картой со значком по умолчанию я заметил, что они не совпадают. Смещение составляет около четверти блока при начальном увеличении. - person Tina CG Hoehr; 01.06.2012
comment
@liliana Я нашла глюк ›_‹ , объяснила в нашем чате - person Omar; 01.06.2012
comment
Карта @liliana streetVew пуста при использовании этих координат 34.0351030, -118.2821230 - person Omar; 01.06.2012
comment
Мне удалось найти альтернативный ответ, основанный на том, как это делал Google Maps API v2. Однако я обновил код для использования API v3: jsfiddle.net/ZzJFb/3 Если вы хотите чтобы прочитать об этом, вот ссылка groups.google.com/group/google-maps-js-api-v3/browse_thread/ Кстати, я также изменил значок тени маркера, чтобы вам не пришлось использовать хак. - person Omar; 02.06.2012
comment
вот дополнительная информация groups.google .com/group/google-maps-js-api-v3/browse_thread/ - person Omar; 02.06.2012
comment
Я думаю, что это намного лучше! Не нужно играть с переменной max Distance. - person Tina CG Hoehr; 02.06.2012