Google maps multiple Markers V3
Tuve la necesidad de actualizar uno de mis sitio web done tenia múltiples markes, con información adicional del puntos de venta como son dirección, teléfono, nombre del establecimiento, locación/ciudad y la red a la que pertenece el punto de venta, fuera de las modificaciones que se esperan por el cambio de versión , significativas sin lugar a dudas me encontré con que al hacer un barrido sobre la base de datos para ubicar los puntos de venta lo cual trabajo muy bien después de hacer los ajustes del caso, los marcadores de información siempre presentaban el último punto instanciado, después de varios días de intentarlo de todas las formas que me imagine, esta fue la solución que encontré , realmente solo hay que poner dos lineas de instrucciones en los lugares justos pero no como todo, es fácil cuando se encuentra la solución
aquí el código verificado para linux Centos 7;
Este código recorre un tabla postgres con la información de los establecimientos , calculadas sus coordenadas en base a la dirección, previamente mediante un programa de geo-localización se establece las coordenadas de latitud y longitud , aunque se puede hacer de forma directa en este código , esta el inconveniente de que el código de transformación tiene limitaciones de puntos de conversión y tiempos entre el calculo de una coordenada y la siguiente lo que hace que como en este caso que los puntos pueden superar los 5.000 no sea funcional
//****************************************************************
//Área de la pantalla declarada para la presentación del mapa,
//observar el nombre "mapaPin" , usado en la generación
// de la variable del mapa.
<div id="mapaPin"
style="position:relative ;
top :0px ;
left :0px ;
width :1000px ;
height:460px ;
z-index:3">
</div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
//Ubicación local de 1.26.0 gmaps.js, descargada del site de google maps
//desde http://www.tucows.com/preview/48516/Gmap
<script type="text/javascript" src="../JQUERY/gmaps.js"> </script>
<script>
//Definición de lo parámetros básicos de presentación de mapa
var mapOptions = {
center: new google.maps.LatLng(latitud, longitud),
zoom: 6,
panControl : true,
scaleControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
// Llama a la función que genera un marcador plano en base a las
// coordenadas del punto.y muestra en nombre del establecimiento
// al colocar el cursor sobe el globo de google maps
function createMarker(myLatLong, establecimiento)
{
var marker = new google.maps.Marker(
{
position: myLatLong,
map: map,
title: establecimiento
}
);
return marker;
} ;
//función que muestra la Información establecimiento que será presentada //por el marcador
//cuando se da click sobre el globo de punto de venta
// muestra dirección, teléfono, locación y nombre del establecimiento en
una tabla html
function infoPV (establecimiento,direccion,telefono,redComercial,ciudad)
{
var infoPV ;
infoPV = " <center>" ;
infoPV += "<table border='0' bgcolor='black'>" ;
infoPV += "<tr>" ;
infoPV += "<td align=center colspan=2>" ;
infoPV += " <img" ;
infoPV += " border='0'" ;
infoPV += " src= "
infoPV += " '../../../resources/img/MAPA/iconoPV.png'" ;
infoPV += " height='60' width='112'" ;
infoPV += " >" ;
infoPV += "<td>" ;
infoPV += "</tr>" ;
infoPV += "<tr>" ;
infoPV += "<td align=center colspan=2>" ;
infoPV += " <font color=#ffffff size=4>" ;
infoPV += establecimiento ;
infoPV += " </font>" ;
infoPV += "<td>" ;
infoPV += "</tr>" ;
infoPV += " <td><font color=yellow> Direccion : </font></td>";
infoPV += " <td><font color=yellow>" + direccion + "</font></td>";
infoPV += "</tr>" ;
infoPV += "<tr>" ;
infoPV += " <td><font color=yellow> Telefono : </font></td>";
infoPV += " <td><font color=yellow>" + telefono + "</font></td>";
infoPV += "</tr>" ;
infoPV += "<tr>" ;
infoPV += " <td><font color=yellow> RED : </font></td>";
infoPV += " <td><font color=yellow>" + redComercial + "</font></td>";
infoPV += "</tr>" ;
infoPV += "<tr>" ;
infoPV += "<td align = center colspan=2>" ;
infoPV += " <b><font color=yellow> " + ciudad + "</b> " ;
infoPV += "</tr>" ;
infoPV += "</table>"
infoPV += "</center>" ;
infoPV += " <br>"
return infoPV;
};
// Inicializa la variable maps de acuerdo al nuevo formato V3 de google maps
var map = new google.maps.Map(document.getElementById("mapaPin"),mapOptions);
var geocoder = new google.maps.Geocoder() ;
//Inicia el proceso de creación de los puntos de venta en el mapa
function initialize() {
<%
int s = 0 ;
// Lee la tabla de postgres donde está la información de los puntos
// de venta
StringBuffer sqlSb = new StringBuffer() ;
StringBuffer sqlBoton = new StringBuffer() ;
try
{
sqlSb.append(" SELECT ") ;
sqlSb.append("Pais,") ;
sqlSb.append("Departamento,") ;
sqlSb.append("Ciudad,") ;
sqlSb.append("Establecimiento,") ;
sqlSb.append("Direccion,") ;
sqlSb.append("Telefono,") ;
sqlSb.append("RedComercial,") ;
sqlSb.append("Latitud,") ;
sqlSb.append("Longitud,") ;
sqlSb.append("Registro") ;
sqlSb.append(" FROM ") ;
sqlSb.append("PUNTOSVENTA") ;
sqlSb.append(" WHERE ") ;
// El filtro WHERE es necesario pues puede ocurrir que dentro de la //conversión
//previa de dirección a coordenadas , el sistema no pueda ubicar un punto
//en coordenadas del mapa, generando error , y deteniendo el,proceso
//de secuencia de ubicación de puntos
sqlSb.append("substring(Lower(Trim(longitud)) from 1 for 5) !=" + "'" + "error" + "'" );
sqlSb.append(" ORDER BY ") ;
sqlSb.append("Departamento,Ciudad,Establecimiento") ;
rt = st.executeQuery(sqlSb.toString()) ;
while (rt.next())
{
pais = rt.getString(1) ;
departamento = rt.getString(2) ;
ciudad = rt.getString(3) ;
establecimiento = rt.getString(4) ;
direccion = rt.getString(5) ;
telefono = rt.getString(6) ;
redComercial = rt.getString(7) ;
latitud = rt.getString(8) ;
longitud = rt.getString(9) ;
registro = rt.getString(10) ;
// Las siguientes lineas hacen una ajuste del valor leído de las
//coordenadas a modo texto, ya que el sistema de transformación
//lo deja en un formato propio de google maps.
longitud = longitud.replace('(',' ') ;
longitud = longitud.replace(')',' ') ;
longitud = longitud.trim() ;
s = At(",",longitud) ;
if (s != 0)
{
latitud = Left (longitud,s-1) ;
longitud = Right(longitud,Len(longitud)-(s+1)) ;
establecimiento = "'" + establecimiento + "'" ;
direccion = "'" + direccion + "'" ;
telefono = "'" + telefono + "'" ;
redComercial = "'" + redComercial + "'" ;
pais = "'" + pais + "'" ;
departamento = "'" + departamento + "'" ;
ciudad = "'" + ciudad + "'" ;
//lleva el punto de venta de coordenadas a al formato google maps
var puntoVenta = new google.maps.LatLng(<%=latitud%>,<%=longitud%>);
if (puntoVenta != "error")
{
//Consigue la información del establecimiento para pasarlo al marcador
// la linea resaltada y en rojo es la clave del proceso que permite la
//generación secuencial de puntos de venta , y la colación del mark
//en el punto correcto del mapa cuando se le da click sobre el globo
var infoString = infoPV(<%=establecimiento%>,<%=direccion%>,<%=telefono%>,<%=redCo\
mercial%>,<%=ciudad%>);
var marker = new google.maps.Marker(
{
position: puntoVenta,
map: map,
title: <%=establecimiento%>,
html: infoString
}
);
//Genera la venta de presentación de la información del establecimiento
//previamente generado por infoPV()
var infowindow = new google.maps.InfoWindow(
{
content: infoString
}
) ;
//Genera el evento escuchador del marcador que actúa al dar click
// sobre el globo del punto de venta
// Observar la linea, infowindow.open(map,this) , con el parámetro
//this en lugar de mark, esto hace que se cree una instancia indpendiente //del escuchador con la información del marcador
//asignada por el parámetro html en la variable calculada marker=
//new google.maps.Marker()
//Estas dos cosas son las que permiten la generación secuencial
//de puntos de venta con la ubicación correcta del marcador de
//información
google.maps.event.addListener(marker, 'click', function()
{
map.setZoom(8) ;
map.setCenter(marker.getPosition());
infowindow.setContent(this.html) ;
infowindow.open(map,this) ;
}
);
marker.setMap(map) ;
}
<%
}
}
rt.close()
;
}
catch (Exception e)
{
out.println("Error de posicion Mapa Puntos de Venta: " + e) ;
}
%>
}
//Inicia la presentación del mapa
google.maps.event.addDomListener(window, 'load',initialize);</script>
Comentarios
Publicar un comentario