Home/ Questions/Q 8031027
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T00:57:33+00:00

This map that is partially working. It displays both maps BUT I can’t figure

  • 0

This map that is partially working. It displays both maps BUT I can’t figure out why the marker and infowindow are not showing up on the road map. Can you guys please help me?

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hello again 🙂 Here’s my updated demo http://jsfiddle.net/RgaCe/

    I made these changes:

    (1) icon/shadow became MarkerImages because they didn’t line up

        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) Comment this function that is not defined //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 );
    • 0