Tlf. 985 840 253

Se encuentra usted aquí

Inicio

Agregar mapa de Google con StreetView en formulario de contacto de Drupal

Vamos a ver como incrustar un Google Map con Street View en nuestro formulario de contacto de Drupal sin falta de utilizar GMap. Esto lo haremos con el API 3 de Google Maps. Lo único que necesitaremos es activar el módulo opcional PHP Filter del Core de Drupal. Crearemos un nuevo bloque y le diremos que nos lo muestre solamente en la página del formulario de contacto.

Lo primero que debemos de hacer es activar dicho módulo en nuestro apartado de módulos (admin/build/modules)

Activar PHP Filter en Modulos

 

Una vez activo este módulo ya podemos agregar un nuevo bloque donde definiremos nuestro mapa (admin/build/block)

Añadir nuevo bloque

 

Le damos una descripción, un título y rellenamos el cuerpo del bloque con el siguiente código:

<?php

//Agregamos informacion en la cabecera
  drupal_set_html_head('<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="

http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

function load(){
//Definimos las latitudes que usaremos, en mi caso una para centrar el mapa y dos marcadores
    var latlngcenter= new google.maps.LatLng(43.361132106881726,-5.283050537109375);
    var latlng = new google.maps.LatLng(43.38901761626629,-5.187636315822601);
    var latlng2 = new google.maps.LatLng(43.34662571623019,-5.362406373023987);

//Definimos el zoom, en que punto centramos el mapa y el tipo de vista del mapa
    var myOptions = {
        zoom: 11,
        center: latlngcenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

//Definimos la variable del mapa
    var map = new google.maps.Map(document.getElementById("mapaAsgaya"), myOptions);

//Ponemos las marcas que queramos en le mapa
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title:"Informática Asgaya - Arriondas"
    });

    var marker = new google.maps.Marker({
        position: latlng2,
        map: map,
        title:"Informática Asgaya - Infiesto"
    });

}
    </script>

// Llamamos a la funcion de carga del mapa
    <script type="text/javascript">
    window.onload = function() {
      load();
    }

    </script>');?><?php
//Mostramos el mapa
print ('<div align="center"><div id="mapaAsgaya" style="width: 550px; height: 400px"></div></div>'); ?>

Solo teneis que modificar las latitudes y el titulo de vuestros marcadores.

Rellenar datos del Bloque

 

Una de las partes más importantes es marcar la opción en el formato de entrada de PHP Code para que el bloque interprete el código que hemos introducido, ya que sino lo único que se verá será el código y no el mapa.

Formato de entra PHP

 

Y le diremos que lo muestre solo en la página del formulario de contacto.

Mostrar en página de contacto

 

Lo único que nos falta es decir en que parte mostrar dicho bloque, en este caso lo pondremos en el contenido para que lo muestre por debajo del formulario de contacto.

Colocar Mapa en contenido

 

Una vez guardemos esta configuración ya podemos ver nuestro mapa en el formulario de contacto con nuestros marcadores.

Mapa con nuestros marcadores

 

El bocadillo con información que se ve en la siguiente imagen no lo hemos definido nosotros, esa información sale del propio Google Place que tenemos definido en nuestra cuenta de Google Place. La manera de agregar este bocadillo que nos da el API de Google nos manda un error, nosotros de momento no hemos conseguido meter esa información a la hora de hacer click en el marcador.

Marcador con Información

 

Y aqui tenemos la tan vistosa vista de StreetView en los mapas de Google. Desgraciadamente no podemos controlar la imagen que muestra esta vista de nuestros negocios, ya que nosotros llevamos desde el 2009 en este local y no nos muestra nuestra fachada, es más por un efecto óptico parece que hay un coche dentro del local, pero en realidad es el propio coche de google que estaba sacando las fotos.

Mapa con Street View

 

Espero que esto pueda ayudar a alguien y se agredecería algún comentario.

 

Añadir nuevo comentario

Plain text

  • No se permiten etiquetas HTML.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Saltos automáticos de líneas y de párrafos.
Al enviar este formulario, usted acepta la política de privacidad de Mollom .