Familiarizandose con Google Maps

agosto7

Hola chicos,

Bueno el día de hoy estuve revisando un poquito sobre Google Maps para agregarlo en nuestra página.

Y con lo primero que me encontré es que existe una opción muy básica para agregarlo en nuestra página web, y esta consiste en darle las características que uno quiera para el mapa, buscar la ubicación que queramos, entre otras y finalmente se copia el código generado que nos da el google maps. Esto es similar a los objetos que agregabamos por ejemplo en el hi5, copiabamos el código generado de…, por ejemplo, un video en youtube y la parte que decía embed… la copiabamos en una sección de nuestra página.

Ah y para ello se ingresa a http://maps.google.com/ y en la pestaña Mis mapas, da click y crea un nuevo mapa.

Como ejemplo tengo:

Pegar HTML para insertar en sitio web:

Donde se presenta un mapa mediano con un marcador en Espol, centrado en esta ubicación.

Luego estuve revisando en

Google Maps JavaScript API V3

http://code.google.com/intl/es-AR/apis/maps/documentation/javascript/tutorial.html

Donde muestran un pequeño ejemplo, el cual presenta un mapa centrado en Sydney, New South Wales, Australia, similar 😉 a lo que nos piden en la tarea, que como primer punto se requiere que presentemos en la Página inicial un mapa de Google Maps centrado en Guayaquil, Ecuador (concretamente en ESPOL).

1. Como primer paso, setea las características del mapa:
   Indicando su latitud y longitud: (Para que quede centrado en Sydney)

   var myLatlng = new google.maps.LatLng(-34.397, 150.644);

2. Lo crea con esas características, y lo coloca en un div usando el API del DOM
   Donde  map_canvas es el id de un div en nuestra página web. 
   <body onload="initialize()">
      <div id="map_canvas" style="width:100%; height:100%"></div>
   </body>
 
   var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

   Y donde myOptions es:
   
   var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

Otra forma de hacerlo es primero creando el mapa, y luego con los métodos set de map modificar sus atributos.