API Карт Google - серая карта с элементами управления

Question

Я рассмотрел другие вопросы/ответы, которые могли иметь отношение к моей проблеме, и никто, казалось, не ответил на это.

Проблема: при загрузке &, помещая маркер, карта кажется «замерзающей», становится серым, но все еще показывает элементы управления. Маркер загружается в верхнем левом углу карты.

В то время как я не могу представить себе это, временно можно обнаружить неисправность (ссылка удалена). Нажмите «Путь один» (в верхнем меню после загрузки карты), и вы увидите поведение. Чтобы увидеть правильное поведение, перейдите (ссылка удалена), затем нажмите «Путь два». Я должен перейти к тому, что я делаю для Path One из-за изменений в ожидании работы приложения.

Я не уверен, что это связано с вызовами async GET для извлечения данных для карты или нет (я не претендую на то, чтобы быть экспертом по Javascript любым растяжением).

Любая помощь приветствуется.

Спасибо!

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

Вопрос в том, когда вы разбираете широту и долготу они хранятся в виде строк. Когда вы поместите точку останова на строке в poemmap.js по строке var sTitle = myPath[poemIndex].title;
вы увидите свою первую переменную finallat, которая будет иметь значение 54.155578-0.00029992116265930235. Просто убедитесь, чтобы обернуть результат с плавающей точкой разбора, как это:

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