Google Maps API v3: Agregar Marcadores

Hola a todos, bienvenidos a una leccion mas de Google Maps API, en este articulo les mostrare como agregar uno o mas marcadores a un mapa.

Vamos a partir de la Introduccion a Google Maps API y ahora continuaremos explicando de que se tratan los marcadores.

Ahora para inicializar el mapa hacemos algo asi:

[code language=”javascript”]

var centerll = {lat: 23.63, lng: -102.55};
map = new google.maps.Map(document.getElementById(‘map’), {
center: centerll,
zoom: 6
});

[/code]

Donde la variable centerll representa unas coordenadas latitud y longitud, y estas coordenadas en este caso se usan para asignar el centro de referencia del mapa de ejemplo.

Para agregar un marcador facilmente escribimos lo siguiente:

[code language=”javascript”]

var marker1 = new google.maps.Marker({
position: centerll,
map:map
});

[/code]

Facilmente se puede dar cuenta de que el parametro position requiere un formato de latitud y longitud y le asignamos en mismo que el centro de nuestro mapa y en el parametro map se asigna la misma variable map que corresponde al mapa creado anteriormente.

Para agregar otro marcado al mapa simplente repetimos el codigo anterior, con otra variable “markerX” y con otras coordenadas.

[code language=”javascript”]

var marker2 = new google.maps.Marker({
position: {lat: 23.93, lng: -102.85},
map:map
});

[/code]

Y este procedimiento lo repetiremos tantas veces como sea necesario, el resultado es el siguiente:

Codigo Fuente

A continuacion te dejo el codigo fuente completo en un gist de GitHub:

Sientanse libres de solicitarme gists y no olviden seguirme en GitHub https://github.com/evilnapsis/