evento onload

jcmaganacruz · #1 (**permalink**) 10/07/2012, 08:52

buenas compañeros: ayer genere mi primer mapa en el API de googlemaps. todo me funciono de lujo. el codigo es el seguiente

Código HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link type="text/css" rel="stylesheet" href="estilo.css"/>


<script	src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">
	src="https://maps.google.com/maps/api/js?sensor = false"
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(21.0954428,-101.6508298);
	 var myOptions = 
	{
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
		
		//********************************
	var contenido = 
	 '<div id="texto_popup">'+
		'<center><img src="logos.png"/></center>'+
		'<p id="centrado">En Vedia Industrial S.A. de C.V. nos dedicamos a la fabricación y comercialización de ' +
		'productos metálicos para la industria peletera, ferretera y textil.'+  
		' Ofrecemos productos fabricados de alambre, troquelados de lámina y de inyección en zamac. '+
		'</p>'+
    '</div>';
	
	var infowindow = new google.maps.InfoWindow({
    content: contenido
	});
	
		var myLatLng = new google.maps.LatLng(21.0954428,-101.6508298);
		var marker = new google.maps.Marker({
		position: myLatLng,
		title:"Vedia Industrial S.A. de C.V. ",
		map: map,
		
	}); 	
	
	google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map,marker);
		
 });   
	
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>

el problema surge cuando quiero parsarlo a mi pagina web, tengo 3 direcciones diferentes y quisiera que cuando alguien le de clic a una sucursae aparesca el mapa de ese lugar.
mi problema esta en el ONLOAD de la pagina, pues carga siempre (logicamente) el que tiene asignado.
no se mucho de javascrip pero se me ocurrio cambiar el valor del onload dependiendo de un evento onclick, pero no resulto nada. quisiera saber si alguein me puede aydar. les dejo mi codigo complerto.

Código HTML:

<!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" />
	<link type="text/css" rel="stylesheet" href="estilo.css"/>
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="icon" href="animated_favicon1.gif" type="image/gif" > 
	<title>Contacto</title>
<!--  ********************************************************************************* -->	
	<script	src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">
	src="https://maps.google.com/maps/api/js?sensor = false"
</script>
<script type="text/javascript">
  function mexico() 
  {
	var latlng = new google.maps.LatLng(19.3515055,-99.1159106);
	var myOptions = 
	{
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
		
		//********************************
	var contenido = 
	 '<div id="texto_popup">'+
		'<center><img src="imagenes/logos.png"/></center>'+
		'<p id="centrado">En Vedia Industrial S.A. de C.V. nos dedicamos a la fabricación y comercialización de ' +
		'productos metálicos para la industria peletera, ferretera y textil.'+  
		' Ofrecemos productos fabricados de alambre, troquelados de lámina y de inyección en zamac. '+
		'</p>'+
    '</div>';
	
	var infowindow = new google.maps.InfoWindow({
    content: contenido
	});
	
		var myLatLng = new google.maps.LatLng(19.3509000,-99.1160000);
		var marker = new google.maps.Marker({
		position: myLatLng,
		title:"Vedia Industrial S.A. de C.V. ",
		map: map,
		
	}); 	
	
	google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map,marker);
		
		
		
	}); 
	
  }
  
  
  function leon() 
   {
    var latlng = new google.maps.LatLng(21.0954428,-101.6508298);
	var myOptions = 
	{
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
		
		//********************************
	var contenido = 
	 '<div id="texto_popup">'+
		'<center><img src="imagenes/logos.png"/></center>'+
		'<p id="centrado">En Vedia Industrial S.A. de C.V. nos dedicamos a la fabricación y comercialización de ' +
		'productos metálicos para la industria peletera, ferretera y textil.'+  
		' Ofrecemos productos fabricados de alambre, troquelados de lámina y de inyección en zamac. '+
		'</p>'+
    '</div>';
	
	var infowindow = new google.maps.InfoWindow({
    content: contenido
	});
	
		var myLatLng = new google.maps.LatLng(21.0954428,-101.6508298);
		var marker = new google.maps.Marker({
		position: myLatLng,
		title:"Vedia Industrial S.A. de C.V. ",
		map: map,
		
	}); 	
	
	google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map,marker);
		
		
		
	});   
  }
  
  
  
  function guadalajara() 
  {
    var latlng = new google.maps.LatLng(20.628428,-103.4124648);
	var myOptions = 
	{
      zoom: 17,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
		
		//********************************
	var contenido = 
	 '<div id="texto_popup">'+
		'<center><img src="imagenes/logos.png"/></center>'+
		'<p id="centrado">En Vedia Industrial S.A. de C.V. nos dedicamos a la fabricación y comercialización de ' +
		'productos metálicos para la industria peletera, ferretera y textil.'+  
		' Ofrecemos productos fabricados de alambre, troquelados de lámina y de inyección en zamac. '+
		'</p>'+
    '</div>';
	
	var infowindow = new google.maps.InfoWindow({
    content: contenido
	});
	
		var myLatLng = new google.maps.LatLng(20.628428,-103.4124648);
		var marker = new google.maps.Marker({
		position: myLatLng,
		title:"Vedia Industrial S.A. de C.V. ",
		map: map,
		
	}); 	
	
	google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map,marker);
		
		
		
	});   
  }
  
  

</script>
	
	
	
</head>
<body onload="mexico()">
	<div id="contenedor">
	
		<div id="encabezado">
			<img id="logos" src="imagenes/logos.png"/>
			<a href="contacto.html"><img id="contacto_externo" src="imagenes/contacto.png"/></a>
			<a href="contacto_ing.html"><img id="us" src="imagenes/us.png"/></a>
			<img id="mx" src="imagenes/mx.png"/>
		</div>
		
		<div id="menu">
			<a href="index.html"><img id="vedia" src="imagenes/vedia.png"/></a>
			    <ul id="button">  
					<li><a id="dentro" href="contacto.html"> &nbsp &nbsp Contacto </a></li>  
					<li><a href="servicios.html">Servicios</a></li>  
					<li><a href="Colecciones.html">Colecciones</a></li>	
					<li><a href="productos.html">Productos y catálogos</a></li>  
					<li><a href="empresa.html">La empresa</a></li>  
					<li><a href="index.html">Quiénes somos</a></li>  
				</ul> 
		</div>
		
		<div id="fotografias">
			<img id ="frente_vedia" src="imagenes/contacto/vedia.jpg"/>
			
		</div>
		<div><HR></div>
		
		<div id="general">
		
			<div id="menu_izq_contacto">
				<a href="" onclick="mexico()"> <center><h2> <span class="naranja1"> Ciudad de México </span></h2></center></a>
				<p class="justificado1">
					</br></br>Maíz 157 / Granjas Esmeralda / Iztapalapa / 09810</br>Tel. (55) 5999 2550</br>Fax. (55) 5999 2562</br></br><a href="mailto:[email protected]">[email protected]</a>
				</p>
				<div id="linea1"></div>
				<a href="" onclick="leon()"> <center><h2> <span class="naranja1"> León Guanajuato </span></h2></center></a>
				<p class="justificado1">
					 </br></br>Bulevar Pradera 1426 / Azteca / León G. / 37520</br>Tel. (47) 7711 3090</br>Fax. (47) 7771 5480</br></br><a href="mailto:[email protected]">[email protected]</a>
				</p>
				<div id="linea1"></div>
				<a href="" onclick="guadalajara()"> <center><h2> <span class="naranja1"> Zapopan Jalisco </span></h2></center></a>
				<p class="justificado1">
					</br></br>Cierra de Mazamitla 5215-6 / Las Águilas / Zapopan J. / 45080</br>Tel. (33) 3631 8479</br></br><a href="mailto:[email protected]">[email protected]</a>
				</p>
			</div>
			
			<div id="contenido_contacto" onload ="guadalajara()">
				<div id="map_canvas" style="width:100%; height:100%"></div>
			</div>
		</div>		
	</div>
</body>
</html>

maycolalvarez · #2 (**permalink**) 10/07/2012, 12:19

mmm, no he manejado mucho la api de google maps, pero creo que lo más conveniente es que muestres una coordenada común a todas tus direcciones (que se vean las 3) y marques (con el chiche) las 3 direcciones.