Autoorientación Mapa Gooogle Maps

[carlosuc99]

Buenas,

Tengo un mapa de google maps obtenido de la API, y lo que quiero ya que obtine unos datos de la base de datos en PHP es que si los iconos que se ponen no están dentro de las coordenadas y el zoom que se definen para visualizar el mapa por defecto se reoriente.

¿Cómo lo puedo hacer?

[marlanga]

Ésto te facilitará la vida:
http://hpneo.github.com/gmaps/

[carlosuc99]

Iniciado por marlanga

Ésto te facilitará la vida:
[url]http://hpneo.github.com/gmaps/[/url]

Pero qué debo modificar?

[carlosuc99]

Y como puedo hacer para que cada vez que pulse un LatLng se me abra una Polyline??

[stramin]

Para orientar el mapa para mostrar todos los eventos que quieres primero en PHP has algo que recorra todos los elementos de manera de obtener los 4 valores máximos (margen izquierdo, , derecho, superior e inferior, puedes hacer algo como esto:

Código PHP:

  $map_lft=0; //margen izq
$map_top=0; //margen superior
$map_rgt=0; //margen derecho
$map_btn=0; // margen inferior

//en el while de tu consulta recorres todas las longitudes y latitudes:

while(){

//si no se ha definido el márgen aún lo creas
if(!$map_lft) $map_lft=$MFRcnf['Longitude'];
//si ya está definido revisas si es inferior al del ciclo anterior:
elseif($MFRcnf['Longitude']<$map_lft) $map_lft=$MFRcnf['Longitude'];

//haces lo mismo con los otros 4 lados
if(!$map_top) $map_top=$MFRcnf['Latitude'];
elseif($MFRcnf['Latitude']>$map_top) $map_top=$MFRcnf['Latitude'];

if(!$map_rgt) $map_rgt=$MFRcnf['Longitude'];
elseif($MFRcnf['Longitude']>$map_rgt) $map_rgt=$MFRcnf['Longitude'];

if(!$map_btn) $map_btn=$MFRcnf['Latitude'];
elseif($MFRcnf['Latitude']<$map_btn) $map_btn=$MFRcnf['Latitude'];

} 
   

luego aplicas la instruccion bounds que la API de google nos facilita para estos casos indicando los 4 lados:

Código Javascript:

var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(<?php echo $map_top ?>,<?php echo $map_lft ?>),new google.maps.LatLng(<?php echo $map_btn ?>,<?php echo $map_rgt ?>));
map.fitBounds(bounds);
 

----------------------------------------------------

Para crear un polyline al hacer contacto con el mapa puedes hacer algo como esto:

Código Javascript:

//primero creas un elemento poligono con el nombre polyshape
var PolyShape = new google.maps.Polygon({
    strokeColor: "#FFF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFF",
    fillOpacity: 0.35
});
 
// creas un listener al mapa para saber cuando el usuario hace clic
google.maps.event.addListener(map, 'click', function(event) {
    //esto guarda la coordenada en event.latLng
    //ahora creas el poligono en esa coordenada:
    var polyCords = new Array();
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat()+0.001,event.latLng.lng());
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()+0.001);
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat()-0.001,event.latLng.lng());
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()-0.001);
 
//le das las coordenadas que he inventado en base al clic
PolyShape.setPath(polyCords);
//lo ubicas en el mapa
PolyShape.setMap(map);
});
 

creo que no me he olvidado de nada, no lo he probado, pero por ahi va

[carlosuc99]

Iniciado por stramin

Para orientar el mapa para mostrar todos los eventos que quieres primero en PHP has algo que recorra todos los elementos de manera de obtener los 4 valores máximos (margen izquierdo, , derecho, superior e inferior, puedes hacer algo como esto:

Código PHP:

  $map_lft=0; //margen izq
$map_top=0; //margen superior
$map_rgt=0; //margen derecho
$map_btn=0; // margen inferior
 
//en el while de tu consulta recorres todas las longitudes y latitudes:
 
while(){
 
//si no se ha definido el márgen aún lo creas
if(!$map_lft) $map_lft=$MFRcnf['Longitude'];
//si ya está definido revisas si es inferior al del ciclo anterior:
elseif($MFRcnf['Longitude']<$map_lft) $map_lft=$MFRcnf['Longitude'];
 
//haces lo mismo con los otros 4 lados
if(!$map_top) $map_top=$MFRcnf['Latitude'];
elseif($MFRcnf['Latitude']>$map_top) $map_top=$MFRcnf['Latitude'];
 
if(!$map_rgt) $map_rgt=$MFRcnf['Longitude'];
elseif($MFRcnf['Longitude']>$map_rgt) $map_rgt=$MFRcnf['Longitude'];
 
if(!$map_btn) $map_btn=$MFRcnf['Latitude'];
elseif($MFRcnf['Latitude']<$map_btn) $map_btn=$MFRcnf['Latitude'];
 
} 
   

Primero de todo, muchas gracias. Segundo, si suponemos que la latitud y la longitud las tengo en $latitud y $longitud. ¿Cómo lo hago?

[stramin]

si es solo una posición entonces es más fácil, olvida todo lo que puse del bound y simplemente usa:

map.setCenter(new google.maps.LatLng(<?php echo $latitud; ?>,<?php echo $longitud; ?>);

[carlosuc99]

Iniciado por stramin

Para crear un polyline al hacer contacto con el mapa puedes hacer algo como esto:

Código Javascript:

//primero creas un elemento poligono con el nombre polyshape
var PolyShape = new google.maps.Polygon({
    strokeColor: "#FFF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFF",
    fillOpacity: 0.35
});
 
// creas un listener al mapa para saber cuando el usuario hace clic
google.maps.event.addListener(map, 'click', function(event) {
    //esto guarda la coordenada en event.latLng
    //ahora creas el poligono en esa coordenada:
    var polyCords = new Array();
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat()+0.001,event.latLng.lng());
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()+0.001);
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat()-0.001,event.latLng.lng());
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()-0.001);
 
//le das las coordenadas que he inventado en base al clic
PolyShape.setPath(polyCords);
//lo ubicas en el mapa
PolyShape.setMap(map);
});
 

creo que no me he olvidado de nada, no lo he probado, pero por ahi va

Lo que yo quería aquí no era exactamente al hacer contacto con el mapa sino con un marcador. Como esto (http://www.bertair.com/index.php?option=com_wrapper&view=wrapper&Itemid=4 3).

[carlosuc99]

Código Javascript:

// creas un listener al mapa para saber cuando el usuario hace clic
google.maps.event.addListener(map, 'click', function(event) {
 

creo que no me he olvidado de nada, no lo he probado, pero por ahi va[/QUOTE]

Si en vez de Map pongo el nombre del Marker?

[stramin]

justamente

en este caso no necesitas la posición del mouse, solo la posición del marcador, así que puedes omitir el "event"

Código Javascript:

google.maps.event.addListener(marker, 'click', function() {
...
}
 

[carlosuc99]

Para crear un polyline al hacer contacto con el mapa puedes hacer algo como esto:

Código Javascript:

//primero creas un elemento poligono con el nombre polyshape
var PolyShape = new google.maps.Polygon({
    strokeColor: "#FFF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFF",
    fillOpacity: 0.35
});
 
// creas un listener al mapa para saber cuando el usuario hace clic
google.maps.event.addListener(map, 'click', function(event) {
    //esto guarda la coordenada en event.latLng
    //ahora creas el poligono en esa coordenada:
    var polyCords = new Array();
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat()+0.001,event.latLng.lng());
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()+0.001);
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat()-0.001,event.latLng.lng());
    polyCords[polyCords.length]=new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()-0.001);
 
//le das las coordenadas que he inventado en base al clic
PolyShape.setPath(polyCords);
//lo ubicas en el mapa
PolyShape.setMap(map);
});
 

creo que no me he olvidado de nada, no lo he probado, pero por ahi va[/QUOTE]

Ahora que me disponía a probarlo creo que te has confundido. Me refería a una polilínea (Polyline) y no a un polígono(Polygon).

[stramin]

No, el que se ha confundido eres tu, mira:

Iniciado por carlosuc99

Y como puedo hacer para que cada vez que pulse un
LatLng se me abra una Polyline??

De todos modos es lo mismo, solo cambias polyline por polygon o como se llame.

[carlosuc99]

Iniciado por stramin

No, el que se ha confundido eres tu, mira:



De todos modos es lo mismo, solo cambias polyline por polygon o como se llame.

Y las coordenadas dónde las pongo? Se supone que un Polyline es una línea que va de un punto a otro.

[stramin]

no, una polilinea son varias lineas

poli=muchas
linea=lineas

estas lineas forman una figura, hecha por varios puntos que van en un array, la única diferencia con el polígono, es que en el polígono estas lineas tienen un relleno de color.

por lo tanto el mismo polyline lo puedes usar como polygon.

Nota: Los polígonos se cierran solos.

[carlosuc99]

Iniciado por stramin

no, una polilinea son varias lineas

poli=muchas
linea=lineas

estas lineas forman una figura, hecha por varios puntos que van en un array, la única diferencia con el polígono, es que en el polígono estas lineas tienen un relleno de color.

por lo tanto el mismo polyline lo puedes usar como polygon.

Nota: Los polígonos se cierran solos.

Si bueno pero yo la utilizo como una línea para unir dos puntos. Aquí el ejemplo del API de Google Maps y auquí la URL https://google-developers.appspot.com/maps/documentation/javascript/examples/polyline-simple

Cómo lo podría hacer con esto.

Ejemplo de código de una polilínea:

Código Javascript:

var routes = [
        new google.maps.LatLng(17.997671, -66.615356)
        , new google.maps.LatLng(18.459418, -66.060646)
    ];
 
    var polyline = new google.maps.Polyline({
        path: routes
        , map: map
        , strokeColor: '#ff0000'
        , strokeWeight: 5
        , strokeOpacity: 0.3
        , clickable: false
    });
};
 

[stramin]

solo necesitas definir más puntos para hacer más lineas:

var routes = [
new google.maps.LatLng(17.997671, -66.615356)
, new google.maps.LatLng(18.459418, -66.060646)
, new google.maps.LatLng(18.997671, -66.015356)
, new google.maps.LatLng(17.459418, -66.660646)
];

si te fijas la palabra "routes" significa "rutas" o sea que puedes definir varias.

[carlosuc99]

Iniciado por stramin

solo necesitas definir más puntos para hacer más lineas:

var routes = [
new google.maps.LatLng(17.997671, -66.615356)
, new google.maps.LatLng(18.459418, -66.060646)
, new google.maps.LatLng(18.997671, -66.015356)
, new google.maps.LatLng(17.459418, -66.660646)
];

si te fijas la palabra "routes" significa "rutas" o sea que puedes definir varias.

Ok, gracias. Dejo el código con el que me ha funcionado por si a alguien le interesa.

Código Javascript:

//primero creas un elemento poligono con el nombre polyshape
    var PolyLine = new google.maps.Polyline({
        strokeColor: "#FF0000",
         strokeOpacity: 2.0,
        strokeWeight: 2
    });
 
    var polyCords = [
    new google.maps.LatLng(39.490277777778, -0.47861111111111),
    new google.maps.LatLng(40.4936, -3.56676)
    ];
    
// creas un listener al mapa para saber cuando el usuario hace clic
    google.maps.event.addListener(marker, 'click', function() {
 
//le das las coordenadas que he inventado en base al clic
    PolyLine.setPath(polyCords);
//lo ubicas en el mapa
    PolyLine.setMap(map);
    });