Les marqueurs ne fonctionnent pas dans l'API Google Maps

Je ne connais pas l'API Google Maps. J'ai écrit un programme qui mettra des marqueurs sur tous les points en fonction de leur latitude et longitude donnée dans where.js. Il charge la carte mais aucun marqueur n'est placé. Je ne comprends pas ce que je fais mal.Les marqueurs ne fonctionnent pas dans l'API Google Maps

Le code HTML est comme suit-

<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>

Voici le fichier Javascript pour « 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']];

Source

2017-07-17 ArnabC

Comment appelez-vous la fonction 'initialize'? avez-vous des erreurs dans la console de votre navigateur ** developer ** tools? où est la div avec l'id? Certains de votre code fonctionne - https://jsfiddle.net/Luwpmunp/ - mais il y a des erreurs –

Voici le code HTML complet. @ JaromandaX – ArnabC

ouais, encore 'http: // google-maps-utility-library-v3. googlecode.com' 404 erreur - donc, pas beaucoup de foi dans le reste de votre code –

tableaux Javascript sont égaux à zéro indexées. Votre code se réfère à eux comme s'ils étaient indexés.

dire votre code:

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

Vous faites référence à myData[1] (2ème point), myData[2] (3ème point), etc., jusqu'à et y compris myData[6]. Ce qui serait le 7ème élément de votre tableau de marqueurs, sauf que vous n'avez que 6 éléments. Donc, vous obtenez probablement une erreur JS (vérifiez votre console), ce qui empêche les marqueurs de se charger du tout.

Il suffit de mettre la ligne i = i + 1; au et de votre boucle. Ou changez le style de boucle, par ex.

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); 
}

Source

2017-07-17 13:24:09 duncan

En fait, vous êtes vraiment traiter 'myData' comme si c'était un objet, quand il s'agit vraiment d'un tableau 2D – duncan

Mettre le' i = i + 1; 'à la fin de la ligne travaillé et les marqueurs sont placés. Mais le titre des marqueurs ne s'affiche pas lorsque je survole le marqueur. – ArnabC

@ArnabC Changer 'title: row [3]' en 'title: row [2]' – duncan

correcte cette ligne: // ajouter cette ligne dans la boucle for :
markers.setMap (map); markers.push (marqueur);

Et aussi vérifier ce lien: Il ne s'ouvre pas http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js

contrôle console.log si une erreur: heureux de vous aider

Source

2017-07-17 11:34:25

Les marqueurs ne fonctionnent pas dans l'API Google Maps

Répondre

Questions connexes