Hi, I have a problem loagind a Javscript GoogleMaps Map into a Div
using Ajax.
I have a map.php file with some Javascript code inside an a javascript
Map with any funcionalities.
If I load the file directly it works fine, but the problem appears
when I trie to put this .php page into a DIV of other page, using
Ajax.
Whe I do this, the javascript and html code of map.php is loaded into
the div an works fine, but the map isn't load, it appears like the
javascript code of the map is not recognized or interpreted. I don't
know how to manage this fix. Any idea please?
Regards.
(I put the code of the map.php file)
<?php include ("bloqueDeSeguridad.php"); ?>
<!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>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>Documento sin título</title>
<script type="text/javascript" src="http://maps.google.com/maps?
file=api&v=2&key=TU-GOOGLE-MAPS-KEY"></script>
<script type="text/javascript">
//<![CDATA[
function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}
function cambia(obj,Cntrl){
var oCntrl=document.getElementById(Cntrl);
while (oCntrl.length!=0){
oCntrl.remove(0);
}
switch (obj.selectedIndex){
case 0:
addOpt(oCntrl, 0, "Antes elige tipo de marca", "0");
break;
case 1:
addOpt(oCntrl, 0, "4 estrellas", "4 estrellas");
addOpt(oCntrl, 1, "3 estrellas", "3 estrellas");
addOpt(oCntrl, 2, "2 estrellas", "2 estrellas");
addOpt(oCntrl, 3, "1 estrellas", "1 estrellas");
break;
case 2:
addOpt(oCntrl, 0, "3 estrellas", "3 estrellas");
addOpt(oCntrl, 1, "2 estrellas", "2 estrellas");
addOpt(oCntrl, 2, "1 estrella", "1 estrella");
break;
case 3:
addOpt(oCntrl, 0, "grupo A", "grupo A");
addOpt(oCntrl, 1, "grupo B", "grupo A");
addOpt(oCntrl, 2, "grupo C", "grupo C");
break;
case 4:
addOpt(oCntrl, 0, "Municipal", "municipal");
addOpt(oCntrl, 1, "Arqueologico", "arqueologico");
addOpt(oCntrl, 2, "Catedralicio", "catedralicio");
break;
case 5:
addOpt(oCntrl, 0, "Catedral", "catedral");
addOpt(oCntrl, 1, "Iglesia", "iglesia");
addOpt(oCntrl, 2, "Centro Historico", "centro historico");
addOpt(oCntrl, 3, "Puente", "puente");
addOpt(oCntrl, 4, "Edificio", "edificio");
break;
case 6:
addOpt(oCntrl, 0, "Estatua", "estatua");
addOpt(oCntrl, 1, "Parque", "parque");
addOpt(oCntrl, 2, "Exposicion", "exposicion");
break;
case 7:
addOpt(oCntrl, 0, "Deporte", "deporte");
addOpt(oCntrl, 1, "Moda", "moda");
addOpt(oCntrl, 2, "Complementos", "complementos");
break;
case 8:
addOpt(oCntrl, 0, "Bar", "bar");
addOpt(oCntrl, 1, "Cafeteria", "cafeteria");
break;
case 9:
addOpt(oCntrl, 0, "Primera hora", "primera hora");
addOpt(oCntrl, 1, "Ultima hora", "ultima hora");
break;
case 10:
addOpt(oCntrl, 0, "3 tenedores", "3 tenedores");
addOpt(oCntrl, 1, "2 tenedores", "2 tenedores");
addOpt(oCntrl, 2, "1 tenedor", "1 tenedor");
break;
case 11:
addOpt(oCntrl, 0, "Gratis", "gratis");
addOpt(oCntrl, 1, "De pago", "de pago");
break;
}
}
function control_imagenes(f){
var ext=['gif','jpg','jpeg','png'];
var v=f.value.split('.').pop().toLowerCase();
for(var i=0,n;n=ext[i];i++){
if(n.toLowerCase()==v)
return
}
var t=f.cloneNode(true);
t.value='';
f.parentNode.replaceChild(t,f);
alert('El campo foto cabecera debe de ser de tipo imagen');
}
function validar(){
//valido el nombre
if (document.formulario.nombre.value.length==0){
alert("El campo nombre esta vacio")
document.formulario.nombre.focus()
return false;
}
if (document.formulario.tipo_marca.selectedIndex ==0){
alert("No hay ningun tipo de marca seleccionada")
document.formulario.tipo_marca.focus()
return false;
}
if (document.formulario.descripcion_breve.value.length==0){
alert("El campo datos esta vacio")
document.formulario.descripcion.focus()
return false;
}
if (document.formulario.descripcion.value.length==0){
alert("El campo descripcion esta vacio")
document.formulario.descripcion.focus()
return false;
}
if (document.formulario.imagen.value.length ==0){
alert("No hay ninguna foto de cabecera seleccionada")
document.formulario.tipo_marca.focus()
return false;
}
if (document.formulario.lat.value.length==0){
alert("El campo latitud esta vacio")
document.formulario.lat.focus()
return false;
}
if (document.formulario.lng.value.length==0){
alert("El campo longitud esta vacio")
document.formulario.lng.focus()
return false;
}
if (isNaN(document.formulario.lat.value)) {
alert("El campo latitud solo puede contener numeros");
document.formulario.tipo_marca.focus()
return false;
}
if (document.formulario.lng.value < -180 ||
document.formulario.lat.value > 180){
alert("El rango de valores para Longitud es de -180 a 180")
document.formulario.lng.focus()
return false;
}
if (isNaN(document.formulario.lng.value)) {
alert("El campo longitud solo puede contener numeros");
document.formulario.tipo_marca.focus()
return (false);
}
if (document.formulario.lat.value < -90 ||
document.formulario.lat.value > 90){
alert("El rango de valores para Latitud es de -90 a 90")
document.formulario.lat.focus()
return false;
}
return true;
}
//google.load('maps', '2');
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(42.33989,-7.866),13);
map.addMapType(G_SATELLITE_3D_MAP);
map.addControl(new GHierarchicalMapTypeControl());
map.addControl(new GLargeMapControl());
var point = new GPoint (-7.866,42.33989);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
document.formulario.lat.value=point.y
document.formulario.lng.value=point.x
}
});
}
}
window.onload=load
//]]>
</script>
<style type="text/css">
<!--
#map {
position:absolute;
left:550px;
top:18px;
width:300px;
height:391px;
}
-->
a.estilo1 { font-weight: bold; font-size:18px; color: #0B0B3B; text-
decoration: none}
a.estilo2 { font-weight: bold; fotn-size:10px; color: #0B0B3B; text-
decoration: none}
</style>
</head>
<body >
<div id="principal">
<form enctype="multipart/form-data" name="formulario" method="post"
action="procesar_marca.php" onSubmit="return validar()">
<table width="200" border="0">
<tr>
<td>Nombre:</td>
<td><label>
<input name="nombre" type="text" size="50" />
</label></td>
</tr>
<tr>
<td>Tipo:</td>
<td>
<select name="tipo_marca" id="tipo_marca" onChange="cambia
(this,'categoria')">
<option value="0">Elige tipo de marca</option>
<option value="hotel">Hotel</option>
<option value="pension">Pension</option>
<option value="casa_rural">Casa rural</option>
<option value="museo">Museo</option>
<option value="arquitectura">Arquitectura</option>
<option value="otros_espacios">Otros espacios</option>
<option value="tienda_ropa">Tienda de ropa</option>
<option value="bar_cafeteria">Bar/Cafeteria</option>
<option value="pub">Pub</option>
<option value="restaurante">Restaurante</option>
<option value="termalismo">Termalismo</option>
</select>
</td>
</tr>
<tr>
<td>CategorÃa:</td>
<td>
<select name="categoria" id="categoria">
<option value="0">Antes elige tipo de marca</option>
</select>
</td>
</tr>
<tr>
<td>Foto de cabecera:</td>
<td><label>
<input name="imagen" type="file" onchange="control_imagenes
(this)">
</label></td>
</tr>
<tr>
<td>Datos:</td>
<td><label>
<textarea name="descripcion_breve" cols="50" rows="5"></
textarea>
</label></td>
</tr>
<tr>
<td>Descripcion:</td>
<td><label>
<textarea name="descripcion" cols="50" rows="13"></textarea>
</label></td>
</tr>
<tr>
<td>Latitud:</td>
<td><label>
<input type="text" name="lat" />
</label></td>
</tr>
<tr>
<td>Longitud:</td>
<td><label>
<input type="text" name="lng" />
</label></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="enviar" value="Guardar marca" />
<input type="reset" name="vaciar" value="Limpiar formulario" /
>
</td>
</tr>
</table>
</form>
<div id="map" ></div>
</div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
