Google maps api V3 - Ajouter dynamiquement plusieurs marqueurs à partir des résultats de la requête

Question

J'essaie de créer une carte sur une page avec quelques liens configurés en dessous qui, lorsqu'on clique dessus, interroge dynamiquement ma base de données et la sortie du jeu de résultats sur la carte. J'ai passé beaucoup de temps à googler cela, mais je ne trouve pas ce que je cherche. J'ai aussi loin qu'utiliser AJAX pour retourner les coordonnées lat et lon OK, mais je me trompe en essayant de créer des marqueurs sur la carte, rien ne s'affiche bien que je ne génère aucune erreur.

Answer 1

Vous avez ce pour la création de nouveaux marqueurs:

var marker = new google.maps.Marker({ 
    position: results.DATA[i][2], 
    map: map, 
    title:"New marker" 
}); 
marker.setMap(map); 

La valeur de results.DATA[i][2] est comme "54,016893, -0,970721". Mais la position doit être un objet LatLng:

// turn "54.016893,-0.970721" into [54.016893,-0.970721"] 
var latLng = results.DATA[i][2].split(","); 

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(latLng[0], latLng[1]), 
    map: map, 
    title:"New marker" 
}); 

PS: Aussi, si vous spécifiez la carte dans les markerOptions, vous ne devez alors également appeler la fonction setMap().

Answer 2

code non testé, mais vous pouvez faire quelque chose comme ça

carte Declare, marqueurs

var map; 
var markersArray = []; 
var myOptions = { 
    zoom: 10, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

Ci-dessous la fonction serait ajouter un point à la carte

function plotPoint(srcLat,srcLon,title,popUpContent,markerIcon) 
{ 
    var myLatlng = new google.maps.LatLng(srcLat, srcLon);    
    var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title:title, 
      icon: markerIcon 
     }); 
    markersArray.push(marker); 
    var infowindow = new google.maps.InfoWindow({ 
     content: popUpContent 
    }); 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
    });           
} 

Fetch vos points et ajouter les comme

var lat = 44.856051; 
var lng = -93.242539; 
plotPoint(lat,lng,'Mall of America','<span class="gBubble"><b>Mall of America</b><br>60 East Brodway<br>Bloomington, MN 55425</span>');