Google Maps

Crear un mapa con Google Maps

Anteriormente hemos visto cómo realizar un autocompletado de ciudades con Google Maps, en este tutorial aprenderemos a crear un mapa con Google Maps utilizando el lenguaje de programación Java Script y HTML para la vista.

¿Cómo crear un mapa con Google Maps?

Hacer esta tarea es realmente muy fácil, basta con agregar unas poca lineas de código como se muestra en el siguiente ejemplo:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Crear un mapa con Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Agregando el mapa al tag de id googleMap
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
      
      }
      
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Al visualizar la página anterior vamos a poder ver el mapa ubicado en Buenos Aires.

Bueno gente, hemos llegado al final de este sencillo tutorial en el cual se explica cómo crear un mapa con Google Maps. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *