Incluir una marca en Google Maps

29/Sep/2012 Google , , , , , , 3 Comentarios

Cuando trabajemos con los mapas de Google Maps, una vez que hayamos ubicado un sitio una de las primeras cosas que querremos hacer es añadir una marca dentro del mapa. Vamos a ver qué pasos hay que seguir.

Lo primero como en todo ejemplo de Google Maps será el cargar el mapa. Recuerda la forma en la que cargamos la librería de Google Maps para la versión 3.

  1. <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Y acto seguido inicializar el mapa sobre una capa:

  1. var myLatlng = new google.maps.LatLng(40.65599461,-4.69373720);
  2. var mapOptions = {
  3. zoom: 12,
  4. center: myLatlng,
  5. mapTypeId: google.maps.MapTypeId.ROADMAP
  6. };
  7.  
  8. map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

vemos que el primer parámetro del objeto Map es el ID de la capa en la que cargaremos el mapa y el segundo son las opciones de configuración del mapa.

Ahora vamos a incluir nuestra marca. Lo primero que tenemos que sabes es que la marca se representa mediante el objeto Marker. Y que en el objeto de inicialización especificaremos, al menos:

  • Las coordenadas de la marca que estarán representadas por un objeto LatLng. Como ya habíamos definido uno para el centro del mapa, vamos a reutilizarlo.
  • El mapa sobre el cual queremos añadir la marca.
  • La etiqueta que queremos que aparezca al pasar sobre la marca
  1. var marker = new google.maps.Marker({
  2. position: myLatlng,
  3. map: map,
  4. title:"Avila de los Caballeros"
  5. });

Hay otras opciones que podemos indicar al crear el objeto Marker, como pueden ser: si queremos que se pueda hacer drag&drop de la marca, si queremos que la marca haga sombra,...

Así, simplemente creando la marca tenemos incluida nuestra marca dentro de un mapa de Google Maps.

3 comentarios en “Incluir una marca en Google Maps”

Víctor Cuervo

www.proyectoycreacionweb.com

Muchas gracias por el tutorial, me gustaría incluir una marca en google maps por el tema de una página web de un negocio y ya sé como hacerlo, gracias.

Víctor Cuervo

Javier

Hola,

El enlace para descargar el código está roto.

Quisiera un ejemplo completo para un mapa en Madrid con carga asincrona y una chincheta en la ubicación de una tienda.

A continuación el código que ya tengo sin chincheta :

Asynchronous Loading

#map-canvas {
height: 300px;
width: 500px;
margin: 0px;
padding: 0px
}

function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(40.448720,-3.66721)
};

var map = new google.maps.Map(document.getElementById(‘map-canvas’),
mapOptions);
}

function loadScript() {
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = ‘https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&’ +
‘callback=initialize’;
document.body.appendChild(script);
}

window.onload = loadScript;

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*