ajax+php+mysql+google maps Muy buenas tardes, leyendo y leyendo logré realizar una consulta en ajax con php rescatando datos desde una base de datos mysql.
El resultado de éste listado es mostrar por "paises" desde donde en el formulario de registro se inscribieron inicialmente.
Hasta ahí no hay problemas, tambien extrayendo los datos desde la base de datos y listando los "paises" que estan registrados , un mapa en google maps integrado al sitio, se colorea.
Estoy utilizando los codigos ISO de 2 letras para los paises , ya que la libreria country points , está con esa nomeclatura.
(http://countrypoints.googlecode.com/files/countrypoints.js)
Mi problema es ahora el siguiente, quiero que a la hora de el usuario "seleccionar" el pais a listar:
<select id="pais_select" onChange="chk_pais();">
<option value="">Seleccione pais</option>
<? $query6="SELECT DISTINCT pais FROM usuarios order by pais"; //aca saqué los paises sin repetirse
$exalumnos6=mysql_query($query6);
while ($row6=mysql_fetch_array($exalumnos6))
{
$pais_=$row6["pais"];
$sql6 = mysql_query("SELECT * FROM `t_paises` WHERE `PAI_NOMBRE` = '$pais_'");
//aca está la tabla con los codigos y la comparé con la tabla de usuarios
$row7= mysql_fetch_array($sql6);
echo "<option value=\"".$pais_."\">".$pais_." - ".$row7["PAI_ISO2"]."</option>";
} ?>
</select>
( ahi se hace la llamada ajax para listar en una div el resultado de la consulta)
quiero usar la misma seleccion de pais , para que en google maps me haga "zoom" en el pais seleccionado y no lo logro.
aqui copio el codigo del javascript que genera el mapa pintado:
<? if ($PHP_SELF=="/mapas.php") { ?>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAK3VrMyDpjsxs T-rDqHB-FxRvO8JM66CMcGmh7PV1EF_7RmgkdRTZJGm1VeW89L6LFDoO1-qTm1c5HA"
type="text/javascript"></script>
<script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
var icon = new GIcon();
icon.image = "iconos/mapa_in.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(24, 29);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(9, 34);
icon.infoWindowAnchor = new GPoint(9, 2);
icon.infoShadowAnchor = new GPoint(18, 25);
map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-70.634537,-33.395906), 4);
map.addOverlay(new GMarker(map.getCenterLatLng(), icon));
map.setCenter(new GLatLng(-70.634537,-33.395906), 1);
<?
$query="SELECT DISTINCT pais FROM usuarios order by pais";
$exalumnos=mysql_query($query);
while ($row=mysql_fetch_array($exalumnos))
{
$pais=$row["pais"];
$sql = mysql_query("SELECT * FROM `t_paises` WHERE `PAI_NOMBRE` = '$pais'");
$row3 = mysql_fetch_array($sql);
?>
//creo los polígonos de <?=$pais?>
var coordenadas_<?= $row3["PAI_ISO3"] ?> = country.<?= $row3["PAI_ISO2"] ?>.coord;
for (i=0; i<coordenadas_<?= $row3["PAI_ISO3"] ?>.length; i++){
map.addOverlay(new GPolygon(coordenadas_<?= $row3["PAI_ISO3"] ?>[i],"#FF0000", 1, 0.7, "#0000FF", 0.4));
}
<? } ?>
}
}
//]]>
</script>
<script>
function chk_pais(){
<!-- INICIO DE CODIGO OFRECIDO POR TUTORES.ORG -->
<!-- Si el codigo te sirve da ayuda, no olvides que puedes enlazarnos o hacernos referencia a tutores.org -->
var pos_url = 'paises.php';
var nombre = document.getElementById('pais_select').value;
var req = new XMLHttpRequest();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4 && (req.status == 200 || req.status == 304)) {
document.getElementById('resultado').innerHTML = req.responseText;
}
}
req.open('GET', pos_url +'?nombre='+nombre,true);
req.send(null);
}
}
<!-- FIN DE CODIGO OFRECIDO POR TUTORES.ORG -->
</script>
<? } ?>
la function chk_pais() inicialmente fué hecha para revisar si habian usuarios registrados en una base de datos , pero lo modifiqué para el uso que explico.
Bueno lo que quiero es que en el "select" pueda generar la llamada ajax que ya está , pero ademas me genere un nuevo mapa google maps o en su defecto me haga "zoom" en el pais respectivo y deje la marca con globo del pais, para luego dentro del globo agregar alguna información especifica.
como por ejemplo..( esto lo use para datos fijos hace un tiempo...)
<script type="text/javascript">
//<![CDATA[
var map;
var icon0;
var newpoints = new Array();
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(loadMap);
addLoadEvent(addPoints);
function loadMap() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(-29.939019,-71.285992), 12);
map.setMapType(G_HYBRID_MAP);
icon0 = new GIcon();
icon0.image = "http://www.google.com/mapfiles/marker.png";
icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon0.iconSize = new GSize(20, 34);
icon0.shadowSize = new GSize(37, 34);
icon0.iconAnchor = new GPoint(9, 34);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(18, 25);
}
function addPoints() {
newpoints[0] = new Array(-71.274265, -29.905553, icon0, 'Faro', '<div id="popup_propiedades"><object width="200" height="139"><param name="movie" value="http://www.youtube.com/v/ENjYKShpJtA"><param name="wmode" value="transparent"><embed src="http://www.youtube.com/v/ENjYKShpJtA" type="application/x-shockwave-flash" wmode="transparent" width="200" height="139"></embed></object></div>');
newpoints[1] = new Array(-71.347221, -29.951923, icon0, 'Cruz del Tercer Milenio', '<div id="popup"><div><table width="389" border="0"><tr><td width="200"> Cruz del Tercer Milenio<br><object width="200" height="139"><param name="movie" value="http://www.youtube.com/v/ENjYKShpJtA" /><param name="wmode" value="transparent" /><embed src="http://www.youtube.com/v/Ux1PUOtxpqI" type="application/x-shockwave-flash" wmode="transparent" width="200" height="139"</embed></object></td></tr></table></div>');
for(var i = 0; i < newpoints.length; i++) {
var point = new GPoint(newpoints[i][0],newpoints[i][1]);
//Add overlay to map
var popuphtml = newpoints[i][4] ;
var marker = createMarker(point,newpoints[i][2],popuphtml);
map.addOverlay(marker);
}
}
function createMarker(point, icon, popuphtml) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(popuphtml);
});
return marker;
}
enableDoubleClickZoom();
//]]>
</script>
si me puedan ayudar muchas gracias.
