Entrar

Mapa de españa.

paxarin · · Solicitar retirada
Muy buenas tengo un nuevo proyecto entre manos.
Y necesitaba que me orientarais sobre como hacerlo.
El caso es que quiero hacer un mapa de españa, en el que cuando haga clic sobre alguna provincia se habra una pagina.
La verdad he estado buscando por la red y he visto que alomejor se puede hacer con flhas pero yo no tengo ni idea.
Alguien me puede ayudar?
Un saludo a toda la gente del foro.
josesd · · Solicitar retirada
puedes hacer una cosa mucho mas facil si no quieres aprender flash.

busca una imagen de un mapa de españa, y azlo mapa asi:


[contenido no disponible]
<map name="Map" id="Map">

y despues define las diferentes areas con sus coordenadas asi:

<area shape="rect" coords="147,167,242,195" href="webquequieras" />

ai sitios para mapear cmo este:

http://www.caricatos.net/areas/index.php


saludos
johnpeterjp · · Solicitar retirada
El "mapeo" solo te tomará unos minutos, los contenidos para cada link eso creo tardará más. Suerte y ánimo.
josevigo · · Solicitar retirada
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=aqui tu calve api de google&sensor=true"
type="text/javascript"></script>

<script type="text/javascript">
    function clicMarca(marca) {
   if (GBrowserIsCompatible() && cargado) {
      GEvent.trigger(marca, "click");



   }
}

var marca1;
var marca2;

var cargado=false;

function load() {
   
   if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(42.867912,-8.140869), 8);
        map.setUIToDefault();
  
      
function CrearMarca(punto, html){
   var miMarca = new GMarker(punto);
   map.addOverlay(miMarca);
   GEvent.addListener(miMarca, "click", function (){
      miMarca.openInfoWindowHtml(html);
   });
   return miMarca;
}
//estilo para las ventanas de info de las marcas
var estilo_bocadillo = "font-size: 10pt; font-family: verdana; lineheight: 120%;";
//creo marca 1
var point;
point=new GLatLng(41.90058413242128,-8.873348236083984);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'>[b]A Guarda (La Guardia) :[/b]

[img]mini/guardia.JPG[/img]
<a href=../puebloscosteros/puebloscosteros2.html> Ir a la p&aacute;gina</a></div>"
marca1 = CrearMarca(point, htmlBocadillo);


//creo marca 2
point=new GLatLng(42.002717014839135,-8.876180648803711);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'>[b]Oia:[/b]
[img]mini/oia.JPG[/img]
<a href=../puebloscosteros/puebloscosteros3.html> Ir a la p&aacute;gina</a></div>"
marca2 = CrearMarca(point, htmlBocadillo);

	 }
}
window.onload=load
//]]>
</script>

<div id="enlaces">
   
   

	 [url="javascript: clicMarca(marca1)"]A Guarda[/url]

         [url="javascript: clicMarca(marca2)"]Oia[/url]


</div>

 <div id="map_canvas"></div>
Los parametros(new GLatLng localizacion en el mapa; son variables en funcion de la localizacion del mapa.
y los puedes buscar aqui :http://itouchmap.com/latlong.html.
La posicion y tamaño de los divs se la das con estilos css.
Aquí puedes ver un ejemplo de como queda

http://www.las-rias.eu/puebloscosteros/puebloscosteros.html
Tienes que preparar unas fotos pequeñas para insertarlas en las marcas.

Espero sirva de ayuda.
Saludos
paxarin · · Solicitar retirada
josevigo escribió:
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=aqui tu calve api de google&sensor=true"
type="text/javascript"></script>

<script type="text/javascript">
    function clicMarca(marca) {
   if (GBrowserIsCompatible() && cargado) {
      GEvent.trigger(marca, "click");



   }
}

var marca1;
var marca2;

var cargado=false;

function load() {
   
   if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(42.867912,-8.140869), 8);
        map.setUIToDefault();
  
      
function CrearMarca(punto, html){
   var miMarca = new GMarker(punto);
   map.addOverlay(miMarca);
   GEvent.addListener(miMarca, "click", function (){
      miMarca.openInfoWindowHtml(html);
   });
   return miMarca;
}
//estilo para las ventanas de info de las marcas
var estilo_bocadillo = "font-size: 10pt; font-family: verdana; lineheight: 120%;";
//creo marca 1
var point;
point=new GLatLng(41.90058413242128,-8.873348236083984);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'>[b]A Guarda (La Guardia) :[/b]

[img]mini/guardia.JPG[/img]
<a href=../puebloscosteros/puebloscosteros2.html> Ir a la p&aacute;gina</a></div>"
marca1 = CrearMarca(point, htmlBocadillo);


//creo marca 2
point=new GLatLng(42.002717014839135,-8.876180648803711);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'>[b]Oia:[/b]
[img]mini/oia.JPG[/img]
<a href=../puebloscosteros/puebloscosteros3.html> Ir a la p&aacute;gina</a></div>"
marca2 = CrearMarca(point, htmlBocadillo);

	 }
}
window.onload=load
//]]>
</script>

<div id="enlaces">
   
   

	 [url="javascript: clicMarca(marca1)"]A Guarda[/url]

         [url="javascript: clicMarca(marca2)"]Oia[/url]


</div>

 <div id="map_canvas"></div>
Los parametros(new GLatLng localizacion en el mapa; son variables en funcion de la localizacion del mapa.
y los puedes buscar aqui :http://itouchmap.com/latlong.html.
La posicion y tamaño de los divs se la das con estilos css.
Aquí puedes ver un ejemplo de como queda

http://www.las-rias.eu/puebloscosteros/puebloscosteros.html
Tienes que preparar unas fotos pequeñas para insertarlas en las marcas.

Espero sirva de ayuda.
Saludos

Muchas gracias josevigo.
La verdad que lo estoy provando aunque no era lo que buscaba me parece más intersante todabia.
Pero tengo un problemilla, yo la verdad que en script toy más perdido que un delfin en el desierto, jejeje.
Que debo variar o donde esta el codigo que indica el tamaño del mapa ya que me aperece una franja del ancho de la pantalla, pero de un ancho muy pequeño.
Un saludo
josevigo · · Solicitar retirada
paxarin escribió:
josevigo escribió:
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=aqui tu calve api de google&sensor=true"
type="text/javascript"></script>

<script type="text/javascript">
    function clicMarca(marca) {
   if (GBrowserIsCompatible() && cargado) {
      GEvent.trigger(marca, "click");



   }
}

var marca1;
var marca2;

var cargado=false;

function load() {
   
   if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(42.867912,-8.140869), 8);
        map.setUIToDefault();
  
      
function CrearMarca(punto, html){
   var miMarca = new GMarker(punto);
   map.addOverlay(miMarca);
   GEvent.addListener(miMarca, "click", function (){
      miMarca.openInfoWindowHtml(html);
   });
   return miMarca;
}
//estilo para las ventanas de info de las marcas
var estilo_bocadillo = "font-size: 10pt; font-family: verdana; lineheight: 120%;";
//creo marca 1
var point;
point=new GLatLng(41.90058413242128,-8.873348236083984);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'>[b]A Guarda (La Guardia) :[/b]

[img]mini/guardia.JPG[/img]
<a href=../puebloscosteros/puebloscosteros2.html> Ir a la p&aacute;gina</a></div>"
marca1 = CrearMarca(point, htmlBocadillo);


//creo marca 2
point=new GLatLng(42.002717014839135,-8.876180648803711);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'>[b]Oia:[/b]
[img]mini/oia.JPG[/img]
<a href=../puebloscosteros/puebloscosteros3.html> Ir a la p&aacute;gina</a></div>"
marca2 = CrearMarca(point, htmlBocadillo);

	 }
}
window.onload=load
//]]>
</script>

<div id="enlaces">
   
   

	 [url="javascript: clicMarca(marca1)"]A Guarda[/url]

         [url="javascript: clicMarca(marca2)"]Oia[/url]


</div>

 <div id="map_canvas"></div>
Los parametros(new GLatLng localizacion en el mapa; son variables en funcion de la localizacion del mapa.
y los puedes buscar aqui :http://itouchmap.com/latlong.html.
La posicion y tamaño de los divs se la das con estilos css.
Aquí puedes ver un ejemplo de como queda

http://www.las-rias.eu/puebloscosteros/puebloscosteros.html
Tienes que preparar unas fotos pequeñas para insertarlas en las marcas.

Espero sirva de ayuda.
Saludos

Muchas gracias josevigo.
La verdad que lo estoy provando aunque no era lo que buscaba me parece más intersante todabia.
Pero tengo un problemilla, yo la verdad que en script toy más perdido que un delfin en el desierto, jejeje.
Que debo variar o donde esta el codigo que indica el tamaño del mapa ya que me aperece una franja del ancho de la pantalla, pero de un ancho muy pequeño.
Un saludo
Pones esto en tu hoja de estilos y lo modificas a tu gusto
#map_canvas {width: 440px; height: 500px;border: 3px solid black;float:left;
margin-right:3px;}
#enlaces{
font-size: 12pt;
margin-top: 10px;
font-weight: bold;
}
Saludos.