Google Maps

Agregar markers en Google Maps

Anteriormente hemos visto cómo crear un mapa con Google Maps, en este tutorial veremos cómo agregar markers en Google Maps utilizando el lenguaje de programación Java Script.

¿Cómo agregar markers en Google Maps?

Siguiendo con el código del tutorial anterior vamos a insertar un marker en el mapa con Java script como se muestra en el siguiente ejemplo:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Agregar markers en 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);
      
        // Creando un marker en el mapa
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          map: map,
          title: 'Hello World!'
        });
      }
      
      // 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 vamos a ver el mapa con un marker en el centro de la ciudad de Buenos Aires.

Bueno gente, hemos llegado al final de este sencillo tutorial en el cual se explica cómo agregar markers en 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 *