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.
puede ver mi mapa en funcionamiento en la siguiente demo, y tambien puedes descargar, la contraseña del rar es: antocas.com