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:


<!DOCTYPE html>
<!– Powered by Evilnapsis 2017 –>
<html>
<head>
<title>Google Maps API v3: Agregar Marcadores Simples</title>
</head>
<body>
<h1>Google Maps API v3: Agregar Marcadores Simples</h1>
<div id="map" style="width:100%;height:600px;"></div>
<script type="text/javascript">
var map;
var centerll = {lat: 23.63, lng: -102.55};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: centerll,
zoom: 6
});
var marker1 = new google.maps.Marker({
position: centerll,
map:map
});
var marker2 = new google.maps.Marker({
position: {lat: 23.93, lng: -102.85},
map:map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuBEidKGDuQo7Bzf1uRg47MPaRRlEesw0&callback=initMap">
</script>
</body>
</html>

view raw

maps2.html

hosted with ❤ by GitHub

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

Leave a comment