Insertar el mapa de Google en la web

Hoy en día es difícil encontrar sitios web que no dispongan de un mapa que muestre la ubicación de la empresa o negocio. Vamos a explicaros en dos partes cómo insertar un mapa de Google Maps en nuestra web y cómo configurarlo según lo que queramos mostrar.

Existen varios modos de insertar el mapa de Google, mediante iframe, a través de plugins o por JavaScript. Vamos a emplear este último modo, dado que te permitirá insertarlo en cualquier página web y personalizarlo a tu gusto.

Información previa necesaria

Lo primero que necesitamos antes de insertar un mapa es saber las coordenadas de la ubicación que queremos mostrar.

En este enlace http://www.coordenadas-gps.com/ podemos obtener fácilmente la latitud y longitud de la ubicación que queramos.

Código para crear el mapa de Google

El código para crear el mapa de Google puede ser de varios modos, dependiendo de la complejidad de lo que queramos hacer. Para no llenar la entrada de códigos, utilizaremos el que consideramos mejor preparado para hacer todas las funciones.

<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,
          panControl: false,
          zoomControl: false,
          scaleControl: false,
          };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	marker.setMap(map);
        };
</script>

<div id="map_canvas"></div>

El código se encuentra dividido en tres partes:

El primer script carga el JS de la API de Google. Antiguamente era necesario obtener una llave de Google para poderlo cargar, pero ya no es necesario.
El segundo script configura todas las opciones del mapa y del marcador.
Por último tenemos el código HTML (div) donde se mostrará el mapa.

Parámetros para mostrar el mapa

Antes de empezar a configurar el mapa debemos definir bien el div que lo contendrá. Mediante CSS le aplicaremos las dimensiones, teniendo la precaución de no utilizar como medida “auto”, porque entonces no se mostrará nada.

myCenter: En este parámetro insertamos la latitud y longitud obtenidos previamente. Sirve para centrar el mapa y colocar el marcador.

var myCenter=new google.maps.LatLng(39.46910009461806, -0.39186259999996764);

marker: Es el marcador que indicará la ubicación exacta dentro del mapa. De momento sólo hemos empleado el parámetro position: myCenter para mostrarlo en el centro. Más adelante incluiremos más parámetros.

mapOptions: Aquí disponemos de varios parámetros para configurar el modo en que se ve el mapa:

Center: Coordenadas donde se centrará el mapa. Insertaremos el parámetro myCenter definido previamente.
Zoom: Es el nivel de zoom a aplicar en el mapa. Los valores van de 1 a 23.
mapTypeID: Es el tipo de mapa a mostrar. Los valores pueden ser:
- ROADMAP – Callejero o de carreteras, el predeterminado de Google Maps.
- SATELLITE – Se compone de fotos de satélite.
- HYBRID – Una combinación de los dos anteriores.
- TERRAIN – Muestra el relieve físico, elevaciones del terreno y corrientes de agua.
mapTypeControl: Sirve para añadir el control de tipo de mapa. Los valores permitidos son “true” y “false”.
navigationControl: Para quitar los controles de navegación. Los valores permitidos son “true” y “false”.
zoomControl: Para quitar los controles del zoom. Los valores permitidos son “true” y “false”.
scaleControl: Inhabilitar el control de escala. Los valores permitidos son “true” y “false”.
streetViewControl: Quitar Street View. Los valores permitidos son “true” y “false”.

Con estos pasos ya podremos ver nuestro mapa de Google con el marcador en el centro.

En el post lo configuraremos para que muestre información más detallada, cambiaremos el icono del marcador y lo enlazaremos a la página de Google Maps para verlo más grande.

[xyz-ihs snippet=”SuscripcionPost”] [xyz-ihs snippet=”final-post”]

¿Te ha gustado este artículo?

0 Votos, Promedio: 0 de 5

Estés donde estés, si necesitas un página web en WordPress, tienda online Woocemmerce, Desarollo de un plugin para WordPress, campañas de Google Ads, Shopping y Remarketing, así como una estrategia SEO 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.