Google Maps API v3標記有時只會加載

Question

我有一個使用Google Maps API V3構建的地圖制作工具。 它允許用戶輸入兩個或多個位置並生成地圖和路線。 我還有一個復選框，單擊該復選框可顯示指示附近的景點的標記。

當我第一次構建該工具時，我認為它每次都運行良好。 不過，最近我注意到，單擊復選框時，標記並不總是出現。 地圖和路線可以正常工作，但標記僅偶爾起作用。 當它們不起作用時，似乎會發生此錯誤：

Uncaught ReferenceError: map is not defined

它引用了javascript的“標記”部分的一部分（請參見下文）。

背景詳細信息：這是Rails Web應用程序和稱為“行程”的網頁/布局的一部分。 當您進入路線網頁並單擊“地圖制作器”圖標時，將顯示地圖制作工具。 它加載在i框架中，稱為“ map.html.erb”，地圖視圖位於/ views / itineraries中。 但是，地圖制作者的所有JavaScript都位於“路線”布局文件中。

基於對這些帖子的回顧，我認為這可能是我訂購或初始化代碼的方式，並且我認為，罪魁禍首可能在代碼的“標記”部分。

• Google Maps API有時不顯示標記
• Google Maps API（v3）不顯示標記
• Google Maps API v3 javascript標記不會始終加載

我嘗試了幾種不同的更改，但是每種更改都沒有起作用或停止了地圖的初始化。 這是javascript； 請注意，API密鑰和其他小節均已刪除。 下面是標記的代碼。

        <script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false"></script>
    <script type='text/javascript'> 
    $(function(){
        var directionsDisplay;
        var map;            

        function overlaysClear() {
          if (markersArray) {
            for( var i = 0, n = markersArray.length; i < n; ++i ) {
              markersArray[i].setVisible(false);
            }
          }
        }

        function overlaysShow() {
          if (markersArray) {
            for( var i = 0, n = markersArray.length; i < n; ++i ) {
              markersArray[i].setVisible(true);
            }
          }
        }

        $("#showmapview").click(function() {
        overlaysClear();
        $('#mapeach').attr('checked', false);
        });

        $('#mapeach').change(function() {
         if( $('#mapeach').attr("checked")) {
                  overlaysShow();
                  }
                  else  {
                  overlaysClear();
                  }
        });
        cmarkers();

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

    var directionsService = new google.maps.DirectionsService();
        var markersArray = [];
        var arrInfoWindows = null;

    function initialize() {
          var rendererOptions = {
          draggable: true,
          panel:document.getElementById('directions_panel')
         };

          directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
          var chicago = new google.maps.LatLng(41.850033, -87.6500523);
              var mapOptions = {
              zoom: 6,
              center: chicago,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

          directionsDisplay.setMap(map);
        }

        function calcRoute() {

            var start = document.getElementById("start").value;
            var end = document.getElementById("end").value;
            var waypts = [];
          var checkboxArray = document.getElementById("waypoints");
          for (var i = 0; i < checkboxArray.length; i++) {
             waypts.push({
                  location:checkboxArray[i].value,
                  stopover:true
              });
         }

          var request = {
              origin: start,
              destination: end,
              waypoints: waypts,
              optimizeWaypoints: optimize,
              travelMode: google.maps.TravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
              var route = response.routes[0];
            }    
          });
        }; 

        function cmarkers() {
                    $.getJSON( "/mapeach.js", {}, function( data ) {
                    $.each( data, function( i, item ) {
                    var loc = item.mainlocation;
                    $("#markers").append('<li><a href="#" rel="' + i + '">' + loc.nickname + '</a></li>');
                    var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
                    map: map,
                    title: loc.nickname,
                    });
                    markersArray.push(marker);

                      var infowindow = new google.maps.InfoWindow({
                            content: '<a class="clink" href="/spots/'+ loc.id +'/'+ loc.nickname +'" target="_blank">'+ loc.nickname +'</a>'
                            });

                    google.maps.event.addListener(marker, 'click', function() {
                         if (arrInfoWindows != null) { 
                            arrInfoWindows.close(); 
                        } 
                        infowindow.open(map,marker);
                        arrInfoWindows = infowindow;
                        });
                      });
                    });
                };  
    </script>

mapeach.js文件的格式如下：

[{"mainlocation":{"latitude":"40.706352","nickname":"First Location","id":100000,"longitude":"-73.987650"}},{"mainlocation":{"latitude":"34.061148","nickname":"Second Location","id":100001,"longitude":"-118.273067"}}]

Answer 1

我可以通過將cmarkers代碼移到Initialize中來解決此問題。 我認為javascript並未明確指出initialize中的map變量還是cmarkers函數中的map變量（對不起，如果語言不准確；我對js不太滿意）。 見下文：

function initialize() {
              var rendererOptions = {
              draggable: true,
              panel:document.getElementById('directions_panel')
             };

          directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
          var chicago = new google.maps.LatLng(41.850033, -87.6500523);
              var mapOptions = {
              zoom: 6,
              center: chicago,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

          directionsDisplay.setMap(map);

          cmarkers();
          function cmarkers() {
                $.getJSON( "/mapeach.js", {}, function( data ) {
                $.each( data, function( i, item ) {
                var loc = item.mainlocation;
                $("#markers").append('<li><a href="#" rel="' + i + '">' + loc.nickname + '</a></li>');
                var marker = new google.maps.Marker({
                position: new google.maps.LatLng(+loc.latitude, +loc.longitude),
                map: map,
                title: loc.nickname,
                });
                markersArray.push(marker);

                  var infowindow = new google.maps.InfoWindow({
                        content: '<a class="clink" href="/spots/'+ loc.id +'/'+ loc.nickname +'" target="_blank">'+ loc.nickname +'</a>'
                        });

                google.maps.event.addListener(marker, 'click', function() {
                     if (arrInfoWindows != null) { 
                        arrInfoWindows.close(); 
                    } 
                    infowindow.open(map,marker);
                    arrInfoWindows = infowindow;
                    });
                  });
                });
            };  

特別感謝這篇帖子，讓我有了一個主意： 看不到Google標記