TUTORIAL API GOOGLE MAPS: INSERTAR MARKERs

Este tutorial forma parte de otro post donde se explica como insertar un mapa en una página web.

Otro elemento importante en un mapa es que podamos poner marcas, se pueden poner tantas marcas como sea necesario e incluso personalizarlas.

Comenzamos con una marca simple.

    <script type="text/javascript">

      function initialize() {

        var mapOptions = {

          center: new google.maps.LatLng(20.239006,-74.687805),

          zoom: 10,

          mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),

            mapOptions);

       

        //Poner un Marker

               var guantanamo = new google.maps.Marker({

                position: new google.maps.LatLng(20.148221,-75.208282),

                map: map,

                title: 'Guantanamo',

                icon: 'http://www.myicons.com/maps.png'

              });

        }

    </script>

Nótese como se incluye un método nuevo, donde se define un variable de tipo marker.

Entre las opciones que se pueden ver están:

–          position: Posición del marcador. Es importante estar seguro de que el marker   está dentro del rango del mapa.

–          map: Se indica la variable donde está almacenado el mapa. En este caso “map”.

–          title: Es el título que saldrá cuando el cursor se pare sobre el marker.

–          icon: Es el icono que va a aparecer como marker.

Mapa con Marker

Mapa con Marker

 

Sin embargo esto no queda así, podemos poner tantas marcas como consideremos necesarias.

<script type="text/javascript">

      function initialize() {

        var mapOptions = {

          center: new google.maps.LatLng(20.239006,-74.687805),

          zoom: 10,

          mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),

            mapOptions);

       

        //Poner un Marker

       

        var guantanamo = new google.maps.Marker({

                position: new google.maps.LatLng(20.148221,-75.208282),

                map: map,

                title: 'Guantanamo',

                icon: 'http://www.myicons.com/maps.png'

              });  

       

        var baracoa = new google.maps.Marker({

                position: new google.maps.LatLng(20.347791,-74.495614),

                map: map,

                title: 'Baracoa',

                icon: 'http://www.myicons.com/maps.png'

              });

      }

    </script>

Poner otro marker es tan sencillo como definir otra variable de tipo “marker”.

Múltiples Marker

Múltiples Marker

PONERLE TEXTO A UN MARKER

<script type="text/javascript">

       function initialize() {

             var mapOptions = {

                    center : new google.maps.LatLng(20.239006, -74.687805),

                    zoom : 10,

                    mapTypeId : google.maps.MapTypeId.ROADMAP

             };

             var map = new google.maps.Map(document.getElementById("map_canvas"),

                           mapOptions);

 

             //Poner un Marker

 

             var marker = new google.maps.Marker({

                    position : new google.maps.LatLng(20.148221, -75.208282),

                    map : map,

                    title : 'Guantanamo',

                    icon : 'http://www.myicons.com/maps.png'

             });

             var contentString = '<div id="content">'

                           + '<div id="siteNotice">'

                           + '</div>'

                           + '<h1 id="firstHeading" class="firstHeading">Guantánamo</h1>'

                           + '<div id="bodyContent">'

                           + '<p><b>Guantánamo</b>, es una ciudad al sudeste de Cuba, '

                           + 'capital de la provincia de Guantánamo. En ella se encuentra '

                           + 'la base estadounidense de Guantánamo, desde 1902. '

                           + 'La mayoría de sus habitantes viven de la producción de caña de azúcar y café. '

                           + '</p>'

                           + '<p>Fuente: Guantánamo, <a href="http://es.wikipedia.org/wiki/Guant%C3%A1namo">'

                           + 'http://es.wikipedia.org/wiki/Guant%C3%A1namo</a> '

                           + '(Consultado: May 10, 2013).</p>' + '</div>' + '</div>';

 

             var infowindow = new google.maps.InfoWindow({

                    content : contentString

             });

 

             google.maps.event.addListener(marker, 'click', function() {

                    infowindow.open(map, marker);

             });

 

       }

</script>

Lo primero que se hace es guardar en una variable todo el texto en formato HTML.

Ya luego se convierte este texto en una infowindows y se añade el listener para la función “click”.

Acerca de ronald

4 Comentarios

  1. Y si en lugar de cargas “markers” quisiera cargar un mapa que ya tiene “markers”, se podría?

    • El sitio de donde lo quieres copiar, buscas en el código de la página y sencillamente toma los marker de ahí, si lees el primer post y este verás que consta de una parte en HTML y una en JavaScript por lo que a ambos tendrás acceso, dime si tuviste suerte. Saludos

Deja un Comentario

Tu dirección de email no será publicada. Required fields are marked *

*

Free WordPress Themes - Download High-quality Templates