Google Maps APIでマーカーが機能しない

Google Maps APIが初めてです。私はwhere.jsで与えられた緯度と経度に従って、すべての点にマーカーを付けるプログラムを書いた。マップをロードしますが、マーカーは配置されていません。私は何が間違っているのか分かりません。Google Maps APIでマーカーが機能しない

ここfollows-

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title>Markets of Kolkata</title> 
<link href="http://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 

<script src="http://maps.google.cn/maps/api/js" type="text/javascript"></script> --> 
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script src="where.js"></script> 
    <script> 

    function initialize() { 
    //alert("To see the title of a marker, hover over the marker but don't click."); 
    var myLatlng = new google.maps.LatLng(22.39961,88.101350) 
    var mapOptions = { 
     zoom: 3, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

    i = 0; 
    var markers = []; 
    for (pos in myData) { 
     i = i + 1; 
     var row = myData[pos]; 
     window.console && console.log(row); 
     // if (i < 3) { alert(row); } 
     var newLatlng = new google.maps.LatLng(row[0], row[1]); 
     var marker = new google.maps.Marker({ 
      position: newLatlng, 
      map: map, 
      title: row[3] 
     }); 
     markers.push(marker); 
    } 
    } 
</script> 

</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="height: 600px"></div> 
<p> 
<b>Developed By </b> 
<a href="http://www.linkedin.com/in/arnab-chakravarty-8a329111b? 
trk=nav_responsive_tab_profile"><b>Arnab Chakravarty</b></a>. 
</p> 
</body> 
</html>

は「where.js'-

myData = [ 
[22.5193768,88.3656851, 'K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata, West Bengal 700019, India','COLLEGE STREET MARKET(SPORTS GOOD)'], 
[22.4977887,88.3796042, 'Garfa Main Rd, Kolkata, West Bengal 700075, India','COLLEGE STREET MARKET'], 
[22.5048463,88.3882325, 'Purbachal Main Rd, Ramlal Bazar, Haltu, Kolkata, West Bengal 700078, India','COLLEGE STREET MARKET'], 
[22.5867867,88.3564619, 'Kolkata, West Bengal 700073, India', 'BAITHAK KHANA PAPER MARKET'], 
[22.5867867,88.3564619, 'Kolkata, West Bengal 700073, India', 'SAKUNTALA PARK VEGETABLE MARKET'], 
[22.5867867,88.3564619, 'Kolkata, West Bengal 700073, India', 'SANTOSHPUR MUNICIPAL MARKET']];

出典

2017-07-17 ArnabC

どのように 'initialize'関数を呼び出しますか？あなたのブラウザ**の開発者**ツールコンソールに何かエラーがありますか？ idとdivはどこですか？あなたのコードのいくつかは動作します - https://jsfiddle.net/Luwpmunp/ - でもエラーがあります –

ここに完全なHTMLコードがあります。@ JaromandaX – ArnabC

「http：// google-maps-utility-library-v3」 googlecode.com' 404エラー - あなたのコードの残りの部分をあまり信じていない –

Javascriptの配列はゼロインデックス化されている助けるために：何らかのエラーがあればそれは http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js

チェックにconsole.logを開きません。あなたのコードは、それらが1つの索引付けされているかのようにそれらを参照しています。

すなわち、あなたのコード：

i = 0; 
var markers = []; 
for (pos in myData) { 
    i = i + 1; 
    var row = myData[pos]; 
    ... 
}

あなたはmyData[1]を参照している（第2項目）、myData[2]（第3項）など、へとmyData[6]を含めて最大。あなたのマーカーが6つしかないことを除いて、あなたのマーカーの配列の7番目のアイテムになります。だからあなたはおそらく、JSエラー（コンソールをチェック）を取得しているので、マーカーがまったく読み込まれません。

i = i + 1;行をループの末尾に配置するだけです。または、ループスタイルを変更します。

for (var pos = 0; pos < myData.length; pos++) { 
    var row = myData[pos]; 
    window.console && console.log(row); 
    var newLatlng = new google.maps.LatLng(row[0], row[1]); 
    var marker = new google.maps.Marker({ 
     position: newLatlng, 
     map: map, 
     title: row[3] 
    }); 
    markers.push(marker); 
}

出典

2017-07-17 13:24:09 duncan

実際、 'myData'はオブジェクトであるかのように、実際には2D配列のときに扱われます – duncan

' i = i + 1;行末にマーカーが置かれます。しかしマーカーの上にマウスを置くと、マーカーのタイトルが表示されません。 – ArnabC

@ArnabC 'title：row [3]'を 'title：row [2]'に変更します。 – duncan

は、この行を訂正用のJavascriptファイルであるとして、HTMLコードは次のとおりです。は// forループでは、この行を追加します。：
markers.setMap（map）; markerers.push（marker）;

そしてまた、このリンクをチェック：幸せあなたが

出典

2017-07-17 11:34:25

Google Maps APIでマーカーが機能しない

答えて

関連する問題