Google Maps API - Grey Map With Controls

Question

I've looked over the other questions/answers that might have pertained to my issue, and none seemed to answer it.

Problem: When loading & placing a marker, the map appears to "freeze," goes grey, but still shows controls. The marker loads in the upper left corner of the map.

While I can't provide a fiddle of this, temporarily the malfunction can be observed (link removed). Click on "Path One" (in the top menu, after the map has initially loaded) and you'll see the behavior. To see the proper behavior, go (link removed), then click on "Path Two." I have to change over to what I'm doing for Path One due to pending application function changes.

I'm not sure this relates to the async GET calls to fetch the data for the map or not (I'm not making any claims to be a Javascript expert by any stretch).

Any help appreciated.

Thanks!

poemmap.js:

// contains the currently plotted markers
var myMarkers = Array();
// contains the path data
var myPath = Array();
// holds the poem text
var poemHTML = "";
// the map canvas
var map;
//var src = 'geodata/Westbury.kml';
//var src = 'geodata/poems1.kml';

// the current poem index (zero-based)
var currentPoem;

function initialize() {
    var mapCanvas = document.getElementById('poemMap');
    var mapOptions = {
        center: new google.maps.LatLng(51.258476, -2.184906),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(mapCanvas, mapOptions);
    //loadKmlLayer(src, map);
}

/*function loadKmlLayer(src, map) {
    var kmlLayer = new google.maps.KmlLayer(src, {
      suppressInfoWindows: true,
      preserveViewport: false,
      map: map
    });
    google.maps.event.addListener(kmlLayer, 'click', function(event) {
      var content = event.featureData.infoWindowHtml;
      //var poem = document.getElementById('thePoem');
      //poem.innerHTML = content;
      $.get(content).success(function(data) {
             $('#thePoem.content').html(data);
      }); 
      $('#poemText').foundation('open');
    });
  }*/

function shufflePath() {
  var currentIndex = myPath.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = myPath[currentIndex];
    myPath[currentIndex] = myPath[randomIndex];
    myPath[randomIndex] = temporaryValue;
  }
}

function fetchPathPoemData(thePath) {
    // define the start id and the ending 
    // id for the specific path
    var start = 0;
    var end = 1;
    // temporary data structure to contain 
    // the XML data from the file
    var tempPath;


    switch (thePath) {
        case 1: start = 1; end = 16; break;
        case 2: start = 17; end = 36; break;
        case 3: start = 37; end = 53; break;
        case 4: start = 54; end = 75; break;
        case 5: start = 1; end =75; break;
    }

    // read in the XML file that contains the basic poem data
    $.ajax({
        type: "GET",
        url: "geodata/poems.xml",
        dataType: "xml",
        contentType: "text/xml",
        async: true,
        error: function(xhr, statusText) { alert("Error: "+statusText + "\n\n" + xhr.responseText); },
        success: function(data){ 
            parsePoemXML(data, start, end);
            if (thePath == 5) {
                // shuffle the data
                shufflePath();
            }
            loadMap(0, 1);
         }
    });
}

function parsePoemXML(data, start, end) {
    $(data).find('poem').each(function(){
        var $poem = $(this); 
        var id = $poem.attr("id");
        var path = $poem.attr("path");
        var longitude = $poem.find("longitude").text();
        var latitude = $poem.find("latitude").text();
        var title = $poem.find("title").text();
        var file = $poem.find("file").text();
        var tempPath = new Array();
        tempPath.id = id;
        tempPath.path = path;
        tempPath.longitude = longitude;
        tempPath.latitude = latitude;
        tempPath.title = title;
        tempPath.file = file;
        if (id >= start && id <= end) {
            myPath.push(tempPath);
        }
     });
}

function initPoemPathArray(whichPath) {
    // clear the myPath array
    myPath.length = 0;
    // load in the data
    fetchPathPoemData(whichPath);
}

function loadMap(poemIndex, thePath) {
    var marker;
    var bAdd = true;
    var finalCoords;

    var lat = myPath[poemIndex].latitude;
    var lng = myPath[poemIndex].longitude;
    var sTitle = myPath[poemIndex].title;
    var sPoem = myPath[poemIndex].file;

    // zoom out
    //map.setZoom(12);

    setTimeout(function() {

        // check to see if marker exists
        // if not, add it, otherwise
        // just get the coords

        for( i = 0; i < myMarkers.length; i++ ) {
            if (myMarkers[i].poemUrl == sPoem) {
                bAdd = false;
                finalCoords = myMarkers[i].getPosition();
                marker = myMarkers[i];
                break;
            }
        }

        if(bAdd == true) {
            // set new coords
            var finalLat = lat + ((Math.random() - .5) / 1200);
            var finalLng = lng + ((Math.random() - .5) / 1200);
            var coords = new google.maps.LatLng(finalLat,finalLng);

            // load marker
            marker = new google.maps.Marker({
                position: coords,
                title: sTitle,
                //label: sLabel,
                draggable: false,
                //icon: "http://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png",
                animation: google.maps.Animation.DROP,
                map: map/*,
                poemUrl: sPoem*/
            });
            marker.info = new google.maps.InfoWindow({
              content: sTitle
            });
            marker.info.open(map, marker);
            myMarkers.push(marker);
            finalCoords = coords;
            google.maps.event.addListener(marker, 'click', function(event) {
                marker.info.open(map, marker);
                loadPoem(poemIndex, thePath, 0);
            });
        }
        // zoom in & center
        map.setCenter(finalCoords);
        map.setZoom(18);
        setTimeout(function() { 
            loadPoem(poemIndex, thePath, 2000);
        }, 2000);
    }, 0);

}

function loadPoem(poemIndex, thePath, waitTime) {
    var file = myPath[poemIndex].file;
    $.ajax({
        type: "GET",
        url: file,
        dataType: "html",
        async: true,
        error: function(xhr, statusText) { alert("Error: "+statusText + "\n\n" + xhr.responseText); },
        success: function(data){ 
            poemHTML = parsePoemFile(data, poemIndex, thePath);
            $("#thePoem").html(poemHTML);
            setTimeout(function() { $('#poemText').foundation('open'); }, waitTime);
         }
    });
}

function parsePoemFile(data, poemIndex, thePath) {
    // the poem itself, plus goodies, but not footer info
    // as that is built below
    var html = data + "<br><div id='poemFooter'>";
    // previous link text
    var pLinkBefore = "<a id='prevPoem' class='", pLinkAfter = "' href='#'>Previous Poem</a>"; 
    // next link text
    var nLinkBefore = "<a id='nextPoem' class='", nLinkAfter = "' href='#'>Next Poem</a>";
    // first link text
    var fLinkBefore = "<a id='nextPoem' class='", fLinkAfter = "' href='#'>First Poem</a>";
    // next path link text
    var zLinkBefore = "This is the end of Path ", zLinkMiddle = ".  To begin Path ", zLinkAfter = ", click <a href='#' id='nextPath'>here</a>";
    var zLinkFinal = "You have reached the end of all the paths.";
    var zLinkFinal2 = "You have reached the end of the random path.";
    // middle stuff
    var filler = "&nbsp;&nbsp;|&nbsp;&nbsp;";
    // color of the anchors
    var aColor;
    var zLinkIDFirst, zLinkIDSecond;
    switch (thePath) {
        case 1: aColor = "blueAnchors"; zLinkIDFirst = "One"; zLinkIDSecond = "Two"; break;
        case 2: aColor = "orangeAnchors"; zLinkIDFirst = "Two"; zLinkIDSecond = "Three"; break;
        case 3: aColor = "greenAnchors"; zLinkIDFirst = "Three"; zLinkIDSecond = "Four"; break;
        case 4: aColor = "redAnchors"; 
        case 5: aColor = "blueAnchors"; break;
    }
    if (poemIndex == 0) {
        // first poem in list, having next
        html += "<p>" + nLinkBefore + aColor + nLinkAfter + "</p>";
        html += "<script>";
        html += "$('#nextPoem').click(function(event) { ";
        html += "   event.preventDefault();";
        html += "   $('#poemText').foundation('close');";
        html += "   loadMap(" + (poemIndex + 1) + ", " + thePath + ");";
        html += "});";
        html += "</script>";
        html += "</div>";
    }
    else if (poemIndex == myPath.length - 1) {
        // last poem in list, having previous, first, and next path
        if (thePath != 5) {
            // not a random path, so continue on
            // if not the last path (path 4)
            if (myPath[poemIndex].path != 4) {
                // not the last path, so can have next path
                html += "<p>" + nLinkBefore + aColor + nLinkAfter + filler + fLinkBefore + aColor + fLinkAfter + filler + zLinkBefore + zLinkIDFirst + zLinkMiddle + zLinkIDSecond + zLinkAfter + "</p>";
                html += "<script>";
                html += "$('#prevPoem').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(" + (poemIndex - 1) + ", " + thePath + ");";
                html += "});";

                html += "$('#nextPoem').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(0, " + thePath + ");";
                html += "});";

                html += "$('#nextPath').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(" + (poemIndex + 1) + ", " + thePath + ");";
                html += "});";
                html += "</script>";
                html += "</div>";
            }
            else {
                // last path, there is no next path
                html += "<p>" + nLinkBefore + aColor + nLinkAfter + filler + fLinkBefore + aColor + fLinkAfter + "</p>";
                html += "<p>" + zLinkFinal + "</p>";
                html += "<script>";
                html += "$('#prevPoem').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(" + (poemIndex - 1) + ", " + thePath + ");";
                html += "});";

                html += "$('#nextPoem').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(0, " + thePath + ");";
                html += "});";

                html += "$('#nextPath').click(function(event) { ";
                html += "   event.preventDefault();";
                html += "   $('#poemText').foundation('close');";
                html += "   loadMap(" + (poemIndex + 1) + ", " + thePath + ");";
                html += "});";
                html += "</script>";
                html += "</div>";
            }
        }
        else {
            // random path
            html += "<p>" + nLinkBefore + aColor + nLinkAfter + filler + fLinkBefore + aColor + fLinkAfter + "</p>";
            html += "<p>" + zLinkFinal2 + "</p>";
            html += "<script>";
            html += "$('#prevPoem').click(function(event) { ";
            html += "   event.preventDefault();";
            html += "   $('#poemText').foundation('close');";
            html += "   loadMap(" + (poemIndex - 1) + ", " + thePath + ");";
            html += "});";

            html += "$('#nextPoem').click(function(event) { ";
            html += "   event.preventDefault();";
            html += "   $('#poemText').foundation('close');";
            html += "   loadMap(0, " + thePath + ");";
            html += "});";

            html += "$('#nextPath').click(function(event) { ";
            html += "   event.preventDefault();";
            html += "   $('#poemText').foundation('close');";
            html += "   loadMap(" + (poemIndex + 1) + ", " + thePath + ");";
            html += "});";
            html += "</script>";
            html += "</div>";
        }
    }
    else {
        // any other poem, having previous and next
        html += "<p>" + nLinkBefore + aColor + nLinkAfter + filler + pLinkBefore + aColor + pLinkAfter + "</p>";
        html += "<script>";
        html += "$('#prevPoem').click(function(event) { ";
        html += "   event.preventDefault();";
        html += "   $('#poemText').foundation('close');";
        html += "   loadMap(" + (poemIndex - 1) + ", " + thePath + ");";
        html += "});";

        html += "$('#nextPoem').click(function(event) { ";
        html += "   event.preventDefault();";
        html += "   $('#poemText').foundation('close');";
        html += "   loadMap(" + (poemIndex + 1) + ", " + thePath + ");";
        html += "});";

        html += "</script>";
        html += "</div>";
    }
    html += "</div>";

    return html;
}

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

Answer 1

The issue is when you parse the latitude and longitude they are being stored as strings. When you place a breakpoint at the line in poemmap.js at line var sTitle = myPath[poemIndex].title;
you'll see your first finallat variable will have the value 54.155578-0.00029992116265930235 . Just make sure to wrap the result with parse float like this:

var longitude = parseFloat($poem.find("longitude").text());
var latitude = parseFloat($poem.find("latitude").text());`