Primeros pasos para utilizar la API de Google Maps
En este post explico de manera sencilla los primeros pasos para hacer uso de la API de Google Maps, únicamente mostraré como ubicarte en el mapa, crear un marcador con el icono por omisión que tiene Google y otro marcador personalizado.
Primero crea la estructura básica de una página web y agregar en el body un div denominado “map_canvas”, para hacer uso del servicio deberás llamar a la API en la sección <head> de tu sitio Web.
En caso de que desees obtener la ubicación del usuario únicamente cambia el valor de sensor a true. Lo siguiente es crear una función que inicie la carga del mapa y con una ubicación determinada (en este caso Aguascalientes), configuré mi mapa para que haga un zoom de 15, toda esta información se despliega en el div denominado “map_canvas”.
¿Cómo llamaras a la función? Únicamente agregar en tu body onload=”initialize()”, tu puedes llamar a la función como desees.
Hasta el momento debes tener el mapa con un zoom de 15 y ubicado en la ciudad de Aguascalientes, en caso de que quieras mostrar un marcador entonces escribe el siguiente código:
Lo que estoy indicando es que tu marcador se llama “marker”, utiliza la posición definida por la variable latlng y le asigna las propiedas al mapa “map”.
Ahora si deseas cambiar el marcador y poner una imagen personalizada entonces deberás crear una variable que contenga tu archivo en mi caso var image = “semaforo.png”. Para este ejemplo no estoy usando la misma ubicación por lo que la variable myLatLng tiene asignada una nueva dirección.
Posteriormente, defino a que mapa le asigno el marcador, que posición debe utilizar y el icono que en este caso es semaforo.png
Tu página debe verse como la siguiente
Es un post introductorio, si tienes preguntas específicas puedes dejar un comentario o enviarme una mención a mi cuenta de twitter @silvercorp
Puedes descargar el código de aquí
Publicado el junio 9, 2012 en Básicos, Programación. Añade a favoritos el enlace permanente. 2 comentarios.
I’m excited to find this site. I need to to thank you for your time for this particularly fantastic read!! I definitely really liked every little bit of it and I have you saved to fav to check out new stuff on your web site.
Pingback: Google Maps: Modificando su apariencia « Silvercorp