• +
    • Siguenos en feedly

Pídenos información

Nombre:*

E-mail:*

* Campos obligatorios

Teléfono:

¿En qué te podemos ayudar?

Configurar el mapa de Google en la web

configurar el mapa de Google en la web cowalenciawebs valencia
En un artículo anterior os explicamos cómo insertar el mapa de Google en nuestra web. Ahora vamos a ver cómo configurar el mapa de Google para cambiarle el marcador, mostrar información detallada o enlazar con la página web de Google Maps.

Cambiar el marcador

Para cambiar el marcador, lo primero que hay que hacer es obtener o diseñar el marcador que queremos utilizar. En map icons collection podemos obtener gratuitamente una gran variedad de iconos, con la configuración de color que queramos.
Una vez que lo tengamos, lo subiremos a nuestra web, y añadiremos el siguiente código al final del script:

marker.setIcon('url');

Donde url es la ruta donde se encuentra el marcador nuevo. De este modo nuestro código completo quedaría asi:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">
var myCenter=new google.maps.LatLng(39.46910009461806, -0.39186259999996764);
var marker = new google.maps.Marker({
        position: myCenter
        ,});
window.onload = function() {
        var mapOptions = {
          center: myCenter,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: true,
          zoomControl: false,
          scaleControl: false,
          };
        var map = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
	marker.setMap(map);
	marker.setIcon('http://cowalenciawebs.com/wp-content/uploads/2015/01/google-maps-icon-cowalencia2.png');
        };
</script>

De esta sencilla manera habremos personalizado nuestro marcador.

Mostrar información detallada

Para mostrar información sobre el marcador a modo de bocadillo podemos optar por hacer que esté siempre visible o hacer que aparezca cuando hacemos click sobre el marcador.

En ambos casos lo primero que hay que hacer es definir el contenido de la ventana de información. Definiremos una variable de la siguiente manera:

var infowindow = new google.maps.InfoWindow({ content: 'Contenido a mostrar' });

Donde pone ‘Contenido a mostrar’ escribiremos la información que queramos que aparezca. Podemos emplear código html para darle estilo al contenido.
Si queremos mostrar la ventana de información y que permanezca siempre visible, añadiremos la siguiente línea:

infowindow.open(map, marker);

Nuestro mapa quedará de la siguiente manera:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">
var myCenter=new google.maps.LatLng(39.46910009461806, -0.39186259999996764);
var marker = new google.maps.Marker({
        position: myCenter
        ,});
window.onload = function() {
        var mapOptions = {
          center: myCenter,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: true,
          zoomControl: false,
          scaleControl: false,
          };
        var map = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
	marker.setMap(map);
	marker.setIcon('http://cowalenciawebs.com/wp-content/uploads/2015/01/google-maps-icon-cowalencia2.png');
	var infowindow = new google.maps.InfoWindow({ content: '<strong>Cowalenciawebs</strong><br/>Avda. Pérez Galdós, 87<br/>Valencia' }); 
	infowindow.open(map, marker);
        };
</script>

Si queremos que aparezca cuando hagamos click, en lugar del código anterior, tendremos que insertar el siguiente, que añade una función cuando se hace click en el marcador:

google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker);});

En este caso el mapa nos quedará así:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">
var myCenter=new google.maps.LatLng(39.46910009461806, -0.39186259999996764);
var marker = new google.maps.Marker({
        position: myCenter
        ,});
window.onload = function() {
        var mapOptions = {
          center: myCenter,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: true,
          zoomControl: false,
          scaleControl: false,
          };
        var map = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
	marker.setMap(map);
	marker.setIcon('http://cowalenciawebs.com/wp-content/uploads/2015/01/google-maps-icon-cowalencia2.png');
	var infowindow = new google.maps.InfoWindow({ content: '<strong>Cowalenciawebs</strong><br/>Avda. Pérez Galdós, 87<br/>Valencia' }); 
	google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker);});
        };
</script>

Enlazar con la página web de Google Maps

Para realizar esta parte, tendremos que acceder a la página de Google Maps. Escribiremos la dirección que queremos que nos marque. Una vez tengamos el puntero en el sitio apropiado, pulsamos el botón de la parte superior izquierda del buscador, con 3 rayas. Se desplegará un menú vertical. Vamos al enlace “Compartir o insertar mapa” y se nos abrirá una ventana en la pestaña “Compartir enlace”. Marcamos la casilla “URL corta” y nos copiamos el enlace.



Una vez hemos obtenido la dirección de Google Maps, tendremos que añadirla a las propiedades del marcador e incluir una acción cuando se haga click sobre el marcador.

La propiedad a añadir será:

url: 'https://goo.gl/maps/NBjjk'

Y la acción:

google.maps.event.addListener(marker, 'click', function() {window.open(marker.url, '_blank');})

Nuestro código y mapa quedarán de la siguiente manera:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">
var myCenter=new google.maps.LatLng(39.46910009461806, -0.39186259999996764);
var marker = new google.maps.Marker({
        position: myCenter
	    ,url: 'https://goo.gl/maps/U8PTU'
        ,});
window.onload = function() {
        var mapOptions = {
          center: myCenter,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: true,
          zoomControl: false,
          scaleControl: false,
          };
        var map = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
	marker.setMap(map);
	marker.setIcon('http://cowalenciawebs.com/wp-content/uploads/2015/01/google-maps-icon-cowalencia2.png');
	google.maps.event.addListener(marker, 'click', function() {window.open(marker.url, '_blank');})
        };
</script>

Si os habéis fijado, esta acción es incompatible con la de mostrar la información detallada, dado que ambas se ejecutan a la vez al hacer click. Podemos arreglarlo cambiando que la información detallada se muestre al pasar el ratón por encima en lugar de al hacer click.

Para ello sustituiremos su acción por la siguiente:

google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map, marker);});

Con lo que nuestro mapa final quedará de este modo:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript">
var myCenter=new google.maps.LatLng(39.46910009461806, -0.39186259999996764);
var marker = new google.maps.Marker({
        position: myCenter
	    ,url: 'https://goo.gl/maps/U8PTU'
        ,});
window.onload = function() {
        var mapOptions = {
          center: myCenter,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: true,
          zoomControl: false,
          scaleControl: false,
          };
        var map = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
	marker.setMap(map);
	marker.setIcon('http://cowalenciawebs.com/wp-content/uploads/2015/01/google-maps-icon-cowalencia2.png');
	var infowindow = new google.maps.InfoWindow({ content: '<strong>Cowalenciawebs</strong><br/>Avda. Pérez Galdós, 87<br/>Valencia' }); 
	google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map, marker);});
	google.maps.event.addListener(marker, 'click', function() {window.open(marker.url, '_blank');})
        };
</script>

¿Quieres 3 plantillas gratuitas?

tres plantillas gratuitas
  • Calendario editorial RRSS.
  • Informe resultados RRSS.
  • Check list SEO Moz.
* Campo obligatorio

Estés donde estés, si necesitas un sitio web, tienda online, campañas de e-mailing, gestión de tus redes sociales, video marketing o diseño gráfico, no dudes en contactar con nosotros (Equipo de diseño web ubicados en Valencia) a través de nuestro formulario y te informaremos al respecto.

Share on FacebookTweet about this on TwitterShare on Google+Buffer this pageShare on LinkedIn

Deja tu comentario

*

¿Quieres nuestro ebook?

ebook analytics gratuito

Configuración Extra de Google Analytics: Sácale el máximo partido a tu cuenta


* Campo obligatorio

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. En ningún caso serán cedidas a terceros. Si continúa navegando está dando su consentimiento para la aceptación de las cookies y la aceptación de nuestra política de cookies.

CERRAR