Insertar Google Maps en mi Web con Dirección

agosto 14, 2015 | Html5 & Css3, Recursos

La inserción de mapas con la dirección (localización) de tu empresa o casa de google maps es muy común hoy en las páginas de contacto de muchos sitios web, muchos clientes o usuarios los requieren para brindar la dirección exacta.

hoy quiero mostraste como insertar un mapa con un icono personalizado y dirección exacta con tu localización, los maps de google se basan en javacript y html que no es nada complicado por que te mostrare a detalle como personalizar tu mapa e insertarlo con éxito a tu web, buenos manos al código.

Añadir el script de Google para poder montar nuestro mapa

esta etiqueta va dentro de head de tu html

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Insertando Google Maps en mi web

este código tienes que copiarlo y pegarlo dentro de las etiquetas head de tu html, he comentado las lineas mas importante que puedes modificar según tus necesidades, también he agregado el script de Google maps.

<!doctype html>
<html lang="es">
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-12.1241765,-77.0281543); //coordenadas de ubicación
  var mapOptions = {
  zoom: 15, //zoom de tu mapa
  center: myLatlng, //centrar tu mapa
  scrollwheel: false, //si colocas true en vez de false el usuario podrá hacer scroll dentro del mapa
  draggable: true, //esta opción es la manito que aparece y es usado para desplazarse en el mapa
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var contentString = '<img src="logo.png" width="200" style="display:block;margin:auto;"><p>aquí la dirección</p>';//imagen y dirección
  var infowindow = new google.maps.InfoWindow({content: contentString});
  var marker = new google.maps.Marker({
  position: myLatlng,
  animation:google.maps.Animation.DROP,
  icon: 'icono-mapa.png', //icono de mapa
  map: map
  });
  infowindow.open(map,marker);
  google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

Insertando el mapa en el HTML

este paso es muy sencillo solo tenemos que agregar un div con el id mapa, como el siguiente código, dentro del body.

<div id="map-canvas"></div>

Definiendo el tamaño del mapa con CSS

para esto solo necesitamos hacer referencia al div con el id mapa, darle un ancho y alto para nuestro mapa con CSS.

#map-canvas{
width: 100%;
height: 500px;
}

Insertando mi dirección exacta

antes que nada tenemos que entrar a google maps luego tenemos que copiar las coordenadas de ubicación y reemplaza en var myLatlng = new google.maps.LatLng(-12.1241765,-77.0281543); por tu propia ubicación, si necesitas ayuda deja tu pregunta en los comentarios.
google-map-mi-web

puede ver mi mapa en funcionamiento en la siguiente demo, y tambien puedes descargar, la contraseña del rar es: antocas.com

Relacionados