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í

Acerca de silvercorp

Blog personal de Ye§i creado el 18/Ag/06 enfocado al diseño gráfico, tecnología y programación.

Publicado el junio 9, 2012 en Básicos, Programación. Añade a favoritos el enlace permanente. 17 comentarios.

  1. 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.

  2. I was pretty pleased to discover this web site.
    I need to to thank you for your time just for this wonderful read!
    ! I definitely really liked every bit of it and i also have you bookmarked to see new information on your site.

  3. What’s up to every body, it’s my first pay a quick visit of this weblog; this web
    site contains awesome and actually good information in support of readers.

  4. You are so cool! I don’t suppose I have read something like this before. So nice to discover someone with a few genuine thoughts on this topic. Really.. many thanks for starting this up. This web site is something that’s needed on the internet, someone with a bit of originality!

  5. When it comes to companies, it is more favorable to invest in ones
    that have better returns than management. The management of a company is subject to change more quickly
    than its economic nature. Companies that result in high returns
    in the market will usually stay this way for a while, meaning better opportunities for you.

    __________________________________________________________________________

    I study stock picks list

  6. I almost never comment, but I browsed a bunch of remarks here Primeros pasos para
    utilizar la API de Google Maps | Silvercorp. I actually do have 2 questions for you if it’s allright.
    Could it be just me or does it look like like a few of these remarks appear like they are left by brain dead visitors?😛 And, if you are posting on other places, I’d like to follow anything fresh you have to post.
    Could you make a list of every one of all your social networking sites
    like your linkedin profile, Facebook page or twitter feed?

  7. It’s going to be finish of mine day, except before finish
    I am reading this great piece of writing to increase my experience.

  8. whoah this weblog is magnificent i love reading your articles.
    Stay up the great work! You already know, many individuals are looking round for this info, you can help them
    greatly.

  9. Hi! This is my first visit to your blog! We are a group of volunteers and starting a new project in a community in the same niche.
    Your blog provided us beneficial information to work on. You have done a outstanding
    job!

  10. I am genuinely delighted to glance at this webpage posts which carries tons of helpful data,
    thanks for providing such data.

  1. Pingback: Google Maps: Modificando su apariencia « Silvercorp

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: