Google Maps API V3で作成された地図作成ツールがあります。ユーザーは2つ以上の場所を入力して地図とルートを作成できます。私はまた、クリックすると近くの注目点を示すマーカーを表示するチェックボックスを持っています。Google Maps API v3マーカーのみがロードされる場合があります
初めてツールを作成したときは、毎回うまく機能すると思います。しかし、最近では、チェックボックスをクリックしたときにマーカーが常に表示されるとは限りません。マップとルーティングは正常に機能しますが、マーカーは時折しか動作しません。このエラーは、動作しない場合に発生するようです。
Uncaught ReferenceError: map is not defined
これは、javascriptの「cmarkers」セクションのセクションを参照しています（下記参照）。
背景詳細：これは、Rails Webアプリケーションの一部であり、「旅程」と呼ばれるウェブページ/レイアウトの一部です。旅程のWebページに移動して[Map Maker]アイコンをクリックすると、マップ作成ツールが表示されます。これはiフレームに読み込まれ、 "map.html.erb"と呼ばれ、マップビューは/ views/itinerariesにあります。ただし、地図メーカーのすべてのjavascriptは、旅行計画ファイルに収められています。
これらの記事をレビューした結果、コードを注文したり初期化したことがあるかもしれないと思います。主な原因はコードの「cmarkers」セクションにある可能性が高いと思います。
- Google Maps API Sometimes Not Showing Markers
- Google maps api(v3) doesn't show markers
- Google Maps API v3 javascript Markers don't always load
私はいくつかの異なる変化を試してみたが、それぞれが働いたか、初期化からマップを停止していませんどちらか。ここに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"}}]