Question

Hi Can anyone help with this? I have a map where markers note each location (duh) and then inside the marker is a get directions link which spawans a popup. Everything works fine except the map(2nd map which contains the directions) that sits above the directions in the popup doesn’t show. It’s just a grey box with the directions markers.

This is the js:

/* ::::::::::::::::::::::::::::::::::::DIRECTIONS:::::::::::::::::::::::::::::: */

var mapContainer = document.getElementById('map-container');
var dirContainer = document.getElementById('dir-container');
var fromInput = document.getElementById('from-input');
var toInput = document.getElementById('to-input');

// API Objects
var dirService = new google.maps.DirectionsService();
var dirRenderer = new google.maps.DirectionsRenderer();
var map2 = null;

function showDirections(dirResult, dirStatus) {
    if (dirStatus != google.maps.DirectionsStatus.OK) {
        alert('Directions failed: ' + dirStatus);
        return;
    }

    // Show directions
    dirRenderer.setMap(map2);
    dirRenderer.setPanel(dirContainer);
    dirRenderer.setDirections(dirResult);
};

function getSelectedTravelMode() {
    value = google.maps.DirectionsTravelMode.DRIVING;
    return value;
};

function getDirections() {
    var fromStr = fromInput.value;
    var toStr = toInput.value;
    var dirRequest = {
        origin: fromStr,
        destination: toStr,
        travelMode: getSelectedTravelMode()
    };
    dirService.route(dirRequest, showDirections);
};

function init() {
    var latLng2 = new google.maps.LatLng(37.77493, -122.419415);
    map2 = new google.maps.Map(mapContainer, myOptions2);

    var myOptions2 = {
        zoom: 13,
        center: latLng2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // Show directions onload
    getDirections();
}




/* :::::::::::::::::::::::::::MAIN MAP::::::::::::::::::::::::::::::::::::::: */



var address;
var markers;
var windows;
var mapMarkers = new Array();
var map, marker, i;
var infoWindow = new google.maps.InfoWindow();


function initialize() {
    var map_center = new google.maps.LatLng(37.0902, -95.7129);
    var myOptions = {
        zoom: 4,
        center: map_center,
        scrollwheel: false,
        mapTypeControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    // Create a lettered icon for this point using our icon class
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var bounds = new google.maps.LatLngBounds();

    if (markers !== null && windows !== null) {

        for (i = 0; i < markers.length; i++) {

            marker = new google.maps.Marker({
                position: markers[i],
                map: map,
                draggable: false,
                animation: google.maps.Animation.DROP
            });

            mapMarkers.push(marker);

            bounds.extend(markers[i]);

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function (e) {
                    infoWindow.setContent(windows[i]);
                    infoWindow.open(map, marker);

                    g = document.getElementById("info");
                    address = g.getAttribute("rel");
                    //console.log(address);
                }
            })(marker, i));
        }

        google.maps.event.addListener(infoWindow, 'domready', function () {
            $("#info").on("click", function (e) {
                toInput.value = address;
                $(".dir-overlay").css("visibility", "visible");

                // init();
                // $('#to-text').text(address); 

                e.preventDefault();
            })
        });


        $(".closeDirections").click(function () {
            $(".dir-overlay").css("visibility", "hidden");
        });

        if (markers !== null && markers.length === 1) {
            map.setCenter(markers[0]);
            map.setZoom(11);
        } else {
            map.fitBounds(bounds);
        }
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

This is the html (shortened):

  <div id="map_canvas"></div>


<div class="dir-overlay">
    <div class="overlaymap-wrapper">

        <div class="titlebar">
            <a href="#" class="closeDirections">close</a>
        </div>  
        <div class="innermap-wrapper">
        <div class="directions-inputs">
            <span class="blue-text">Starting Location</span> <input id="from-input" type="text" value="1202 edgewood ave chicago heights il" /> 
            <input id="to-input" type="hidden" value="1600 Amphitheatre Pkwy, Mountain View, CA"/>
            <a href="#" onClick="init();" class="blue-button">Get Directions</a>
            </div>
            <div id="map-container"></div>
            <div id="dir-container"></div>
        </div>

    </div>
</div>

The markers are being populated and pulled from the aspx code behind.

Answer 1

In your init() method, myOptions2 isn’t until declared after the call to google.maps.Map(), which uses myOptions2.
Move your declaration of myOptions2 up one line, just before the call to google.maps.Map().

function init() {
    var latLng2 = new google.maps.LatLng(37.77493, -122.419415);
    var myOptions2 = {
        zoom: 13,
        center: latLng2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map2 = new google.maps.Map(mapContainer, myOptions2);

    // Show directions onload
    getDirections();
}