Comment utiliser l'API google maps avec plusieurs marqueurs sur la même carte

Question

Donc, j'ai le script suivant pour utiliser l'API Google Maps, tout va bien, mais j'ai besoin de créer une carte qui a plus d'un marqueur (le ballon icône en forme pointant vers quelque chose) et j'ai besoin de chacun de ces marqueurs pour pointer sur une zone différente de la carte (c.-à-d. différentes coordonnées), comment puis-je le faire?

<script type="text/javascript"> 

     function load() { 

     var map = new GMap2(document.getElementById("map")); 
     var marker = new GMarker(new GLatLng(<%=coordinates%>)); 

     var html="<img src='simplemap_logo.jpg' width='20' height='20'/> " + 
      "<%=maptitle%><br/>" + 
      "<%=text%>"; 



     map.setCenter(new GLatLng(<%=coordinates%>), <%=zoom%>) 
     map.setMapType(G_HYBRID_MAP); 
     map.addOverlay(marker); 
     map.addControl(new GLargeMapControl()); 
     map.addControl(new GScaleControl()); 
     map.addControl(new GMapTypeControl()); 


     marker.openInfoWindowHtml(html); 
     } 

     //]]> 
     </script> 

Une autre question, si je passe le script texte comme une variable, permet de dire quelque chose comme:

<script type="text/javascript"> 
<%=ScriptText%> 
</script> 

et mon <% = ScriptText%> sera une chaîne que je vais construire et assigner sa valeur à une variable Friend ou Public appelée ScriptText, va-t-elle encore fonctionner et fonctionner correctement? (Je le fais pour rendre mon script dynamique et différent basé sur la façon dont je le construis comme STRING, en raison de mon analphabétisme dans javascripting; P)

Answer 1

En général, vous devez enregistrer les paramètres de marqueurs dans une sorte de tableau que vous utiliserez plus tard au-moins deux fois:

1. lors de l'ajout de la superposition à la carte
2. lors de l'ajout à un objet GLatLngBounds pour calculer le point central et le niveau de zoom

le tableau ou des marqueurs ressembleraient un tableau d'objets, quelque chose comme:

var latlng1 = [ 
    new GLatLng(48.1234, -120.1234), 
    new GLatLng(48.5678, -120.5678), 
    new GLatLng(48.9101, -120.9112), 
    new GLatLng(48.1121, -120.1314), 
    new GLatLng(48.3145, -120.1516), 
    new GLatLng(48.1617, -120.1718), 
    new GLatLng(48.1819, -120.1920), 
    new GLatLng(48.2021, -120.2122) 
]; 

le code pour ajouter des marqueurs wou ld regard quelque chose de similaire à:

// assume that map1 is an instance of a GMap2 object 

    // #0 -- google maps api requires us to call setCenter first before calling any other operation on the map 
    map1.setCenter(new GLatLng(0, 0), 0); 

    // #1 -- add markers 
    for (var i = 0; i < latlng1.length; i++) 
    { 
    var marker = new GMarker(latlng1[ i ]); 
    map1.addOverlay(marker); 
    } 

    // #2a -- calculate center 
    var latlngbounds = new GLatLngBounds(); 
    for (var i = 0; i < latlng1.length; i++) 
    { 
    latlngbounds.extend(latlng1[ i ]); 
    } 

    // #2b -- set center using the calculated values 
    map1.setCenter(latlngbounds.getCenter(), map1.getBoundsZoomLevel(latlngbounds)); 

Quant à votre question sur l'utilisation de script côté serveur à l'intérieur javascript côté client, oui, vous pouvez les mélanger. A en juger par votre description, je pense que c'est ce que vous devez faire:

<script type="text/javascript"> 
    var latlng1 = new Array(); 
</script> 
<script type="text/javascript"> 
    <% 
     do until rs.eof 
      %> 
      latlng1.push(new GLatLng(parseFloat('<%= rs("Lat") %>'), parseFloat('<%= rs("Lng") %>'))); 
      <% 
      rs.movenext 
     loop 
    %> 
</script> 

J'ai posté un article à: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

Vous aurez besoin de créer un nouveau pour chaque endroit que vous voulez marque sur la carte. Il y a assez bonne documentation disponible here pour GMarker s.

Pour créer un GMarker, vous verrez dans la documentation que vous devez d'abord créer un GLatLng représentant l'emplacement où vous souhaitez déposer le marqueur. Vous n'avez pas mentionné vouloir du contenu dans un ballon, donc je suppose que c'est juste le marqueur que vous recherchez. Dans votre cas, le code serait probablement ressembler à ceci:

var markerCoords = [ 
    new GLatLng(<latitude>, <longitude>), 
    new GLatLng(<latitude>, <longitude>), 
    [...] 
]; 

for (coord in markerCoords){ 
    map.addOverlay(new GMarker(coord)); 
}; 

Je suis sûr que vous pouvez probablement dire exactement ce qui se passe ici, mais juste au cas où, je crée un tableau de GLatLng objets (ce qui peut être de toute longueur [within hans haha]), puis itérer dessus, en ajoutant des marqueurs à la carte pour chaque GLatLng défini dans le tableau. Si vous envisagez de créer beaucoup de marqueurs, vous trouverez probablement utile d'utiliser le Marker Manager, qui accélérera le rendu de nombreux marqueurs simultanément (en ne rendant pas les marqueurs hors écran et en se condensant à l'écran). ceux s'il y en a beaucoup dans une région de l'écran).

Answer 3

obeattie a répondu à votre question plutôt bonne. Mais à partir de votre exemple de code, il semble que vous souhaitiez également que la carte fasse un zoom sur la zone contenant les marqueurs. Pour ce faire avec plusieurs marqueurs, vous pouvez créer un GLatLngBounds que vous étendez pour chaque marqueur. Vous pouvez ensuite obtenir le centre et le zoom correspondant à votre collection de marqueurs à partir de l'objet bounds.

var markersBounds = GLatLngBounds(); var coord = null; for (coord in markerCoords){ coord = new GMarker(coord); map.addOverlay(); markersBounds.extend(coord); };

var markersCenter = markersBounds.getCenter(); 
var markersZoom = G_HYBRID_MAP.getBoundsZoomLevel(markersBounds); 

map.setCenter(markersCenter, markersZoom); 

Je ne suis pas sûr à 100% du G_HYBRID_MAP. getBoundsZoomLevel, mais si je me souviens bien, G_HYBRID_MAP est une instance de GMapType. Obeattie et gregers ont tous les deux raison.

Answer 4

Je ne peux pas modifier mon poste (voir ci-dessus), donc je ll poster quelques révisions. Son pas exactement ce que vous voulez, est juste une ébauche:

var map; 
var markers = new Array(); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('47.59'), parseFloat('-120.65')), 
     name: 'Some html here' 
    } 
); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('48.84'), parseFloat('-122.59')), 
     name: 'Some html here as well' 
    } 
); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('47.83'), parseFloat('-120.01')), 
     name: 'And some more html...' 
    } 
); 
function create_gmarker(marker) 
{ 
    var gmarker = new GMarker(marker.latlng); 
    GEvent.addListener(gmarker, 'click', function() { 
      gmarker.openInfoWindowHtml(marker.name); 
     } 
    ); 
    return gmarker; 
} 
function initialize_gmap() 
{ 
    if (GBrowserIsCompatible()) 
    { 
     // initialize map etc here and other yada yada 
     for (var i in markers) 
     { 
      map.addOverlay(create_gmarker(markers[ i ])); 
     } 
    } 
} 

L'exemple ci-dessus montre également l'utilisation naïve de javascript [tableaux] et {} objets. Vous devriez utiliser un peu :)

Answer 5

J'ai quelque chose comme ça mais les événements ne fonctionnent pas. Puis-je ajouter des écouteurs dans un constructeur d'objet?

//Localization object onstructor 
function Localization(width, height, description, img_source){ 
    this.point = new GLatLng(width, height); 
    this.marker = new GMarker(this.point); 
    this.description = description; 
    this.img_source = img_source; 
    GEvent.addListener(this.marker, "click", function(){marker.openInfoWindowHtml(this.description);}); 
} 

//map localizations to show on map 
var localizations = [ 
    new Localization(52.9015797, 15.2602200, 'Poznań1', 'eye1'), 
    new Localization(52.9025797, 15.1602200, 'Poznań2', 'eye2'), 
    new Localization(52.9035797, 15.2702200, 'Poznań3', 'eye3'), 
    new Localization(52.9045797, 15.2102200, 'Poznań4', 'eye4'), 
] 

var map = new GMap2(document.getElementById("mapa")); 
map.setCenter(localizations[3].point, 13); 
map.setUIToDefault(); 


for(i=0; i < localizations.length; i++){ 
    localization=localizations[i]; 
    map.addOverlay(localization.marker); 
    localization.marker.openInfoWindowHtml(localization.description); 
}