Marcadores múltiples en un mapa de Google

StackOverflow https://stackoverflow.com/questions/606515

Pregunta

Agregué un mapa de Google con dos marcadores (solo estoy probando), el código es: 

function load() {

    var map = new GMap2(document.getElementById("map"));


    var marker = new GMarker(new GLatLng(<%=coordinates%>));
    var marker2 = new GMarker(new GLatLng(31.977211,35.951729));
    var html="<%=maptitle%><br/>" +
         "<%=text%>";
    var html2="<img src='simplemap_logo.jpg' width='20' height='20'/> " +
         "<%=maptitle%><br/>" +
         "<%=text%>" + "Alper";
    map.setCenter(new GLatLng(<%=coordinates%>), 5);
    map.setMapType(G_HYBRID_MAP);
    map.addOverlay(marker);
    map.addOverlay(marker2);
    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMapTypeControl());


    marker.openInfoWindowHtml(html);
    marker2.openInfoWindowHtml(html2);
    }

El problema es que solo uno de los marcadores de texto muestra (el triángulo blanco con el texto en su interior) el otro no es visible, ¿por qué? Otra cosa, tengo una tabla de Mapas, me gusta: mapID, mapCoordinates, mapMarkerTitle, mapMarkerText, puedo recuperar esta tabla, pero quiero una manera de poder pasar todos sus registros a mi javascript y crear un marcador para cada mapa Tengo en mi mesa, sé que esto es mucho, pero ¿alguien puede sugerirme o ayudarme con el código? como no sé nada de javascript: D

La SALIDA HTML es: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
    Untitled Page
</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANgu3GlobW5KtQorgXrnJ_xTHM4EYhrvsce8mdg4KdiCoPfCQKxSOZ_5sjy4O31twg6cxfZqam24TCw"
      type="text/javascript"></script>

    <script type="text/javascript">

     function load() {

    var map = new GMap2(document.getElementById("map"));


    var marker = new GMarker(new GLatLng(32.523251,35.816068));
    var marker2 = new GMarker(new GLatLng(31.977211,35.951729));
    var html="maen<br/>" +
         " maen tamemi";
    var html2="<img src='simplemap_logo.jpg' width='20' height='20'/> " +
         "maen<br/>" +
         " maen tamemi" + "Alper";
    map.setCenter(new GLatLng(32.523251,35.816068), 5);
    map.setMapType(G_HYBRID_MAP);
    map.addOverlay(marker);
    map.addOverlay(marker2);
    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMapTypeControl());



    marker2.openInfoWindowHtml(html2);
    marker.openInfoWindowHtml(html);
    }

    //]]>
    </script>

    <script type="text/javascript">

      function pageLoad() {
      }

    </script>

</head>
<body onload = "load()">
    <form name="form1" method="post" action="Xhome.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDI5NDcxNTY4ZGTjxbb38769ZB2N9Ow9kAzPz2PIqA==" />
</div>

    <div id="map" style="width:400px;height:300px" >

    </div>
    </form>
</body>
</html>
¿Fue útil?

Solución

En respuesta a la segunda parte de su pregunta:

  

quiero una forma de poder pasar todos sus registros a mi javascript y crear un marcador para cada mapa que tengo en mi tabla

Tengo (como ejemplo, escrito hace aproximadamente un año) el siguiente código:

En el código subyacente tengo algo como esto (c # Me temo): 

[WebMethod]
public LatitudeLogitudeMessage[] GetPoints(string postCodes)
{
    string[] postCodeArray = postCodes.Split(",".ToCharArray());

    LatitudeLogitudeMessage[] pointArray = 
                   new LatitudeLogitudeMessage[postCodeArray.Length];
    int index = 0;
    foreach (string postCode in postCodeArray)
    {
        pointArray[index] = GetPoint(postCode);
        index++;
    }

    return pointArray;
}

LatitudeLogitudeMessage es una clase personalizada que se parece a esto: 

public class LatitudeLogitudeMessage
{
    public decimal? Latitude { get; set; }
    public decimal? Longitude { get; set; }
    public string Message { get; set; }
    public string Details { get; set; }
    public string Address { get; set; }

    public LatitudeLogitudeMessage(string addressToFind)
    {
        Address = addressToFind;
        Details = addressToFind.Replace(",", ",<br />");
    }
}

El método GetPoint rellena básicamente esos detalles.

En el código que tenía enfrente yo tenía: 

PageMethods.GetPoints(address, showPoints);

Que llama al método GetPoints en el código subyacente y pasa el resultado a showPoints: 

function showPoints(latLongs)
{
  GLog.write("Showing points");
  var points = [];
  var latLngBounds = new GLatLngBounds();

  for (var i = 0; i < latLongs.length; i++)
  {
    if ("" == latLongs[i].Message)
    {
      points[i] = new GLatLng(latLongs[i].Latitude, latLongs[i].Longitude);
      var marker = 
            new GMarker(points[i], {title: latLongs[i].Details, clickable: false});
      map.addOverlay(marker);
      latLngBounds.extend(points[i]);
    }
    else
    {
      GLog.write(latLongs[i].Message);
    }
  }

  if (points.length > 1)
  {
    var bounds = new GBounds(points);
    var center = new GLatLng(
         (latLngBounds.getSouthWest().lat() 
           + latLngBounds.getNorthEast().lat()) /2.,
         (latLngBounds.getSouthWest().lng() 
           + latLngBounds.getNorthEast().lng()) /2.);
    var newZoom = map.getBoundsZoomLevel(latLngBounds, map.getSize());
    map.setCenter(center, newZoom);
  }
  else
  {
    map.setCenter(points[0], defaultZoomLevel);
  }
}

Así que esto toma la matriz de puntos, e itera sobre ellos creando un marcador a medida que avanza, centrándose en el primer elemento de la lista (no es inteligente, pero funcionó para mí).

Otros consejos

Pruebe el API del Administrador de marcadores , es más fácil lidiar con . Aquí está el ejemplo de Google: 

function setupMap() {
 if (GBrowserIsCompatible()) {
   map = new GMap2(document.getElementById("map"));
   map.addControl(new GLargeMapControl());
   map.setCenter(new GLatLng(41, -98), 4);
   window.setTimeout(setupWeatherMarkers, 0);
 }
}

function getWeatherMarkers(n) {
  var batch = [];
  for (var i = 0; i < n; ++i) {
    batch.push(new GMarker(getRandomPoint(), 
      { icon: getWeatherIcon() }));
  }
  return batch;
}

function setupWeatherMarkers() {
  mgr = new GMarkerManager(map);
  mgr.addMarkers(getWeatherMarkers(20), 3);
  mgr.addMarkers(getWeatherMarkers(200), 6);
  mgr.addMarkers(getWeatherMarkers(1000), 8);
  mgr.refresh();
}

No creo que los mapas de Google puedan mostrar más de una ventana de información a la vez, así que cuando abres la segunda, la primera se cierra.

Editar: Los marcadores tampoco abren automáticamente la ventana de información al hacer clic en ellos. Debe adjuntar un controlador de clic al marcador que llama al método showInfoWindowHtml. Utilizo una función auxiliar que crea un marcador y agrega el controlador de clic automáticamente. 

function createMarkerHtml(point, title, html) {
    var marker = new GMarker(point, { title: title });
    GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
    return marker;
}

map.addOverlay(createMarkerHtml(new GLatLng(<%=coordinates%>), "Marker 1", html));
map.addOverlay(createMarkerHtml(new GLatLng(31.977211,35.951729), "Marker 2", html2));
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top