Familiarizandose con Google Maps
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:
<iframe width=»425″ height=»350″ frameborder=»0″ scrolling=»no» marginheight=»0″ marginwidth=»0″ src=»http://maps.google.com/maps/ms?ie=UTF8&hl=es&msa=0&msid=109533710362464428045.00048d33a151b95cca68c&ll=-2.144923,-79.95472&spn=0.120079,0.145912&z=12&iwloc=00048d33db5835b7e39f8&output=embed»></iframe><br /><small>Ver <a href=»http://maps.google.com/maps/ms?ie=UTF8&hl=es&msa=0&msid=109533710362464428045.00048d33a151b95cca68c&ll=-2.144923,-79.95472&spn=0.120079,0.145912&z=12&iwloc=00048d33db5835b7e39f8&source=embed» style=»color:#0000FF;text-align:left»>espol map</a> en un mapa más grande</small>
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.
Pegar HTML para insertar en sitio web:
<iframe width=»425″ height=»350″ frameborder=»0″ scrolling=»no» marginheight=»0″ marginwidth=»0″ src=»http://maps.google.com/maps/ms?ie=UTF8&hl=es&msa=0&msid=109533710362464428045.00048d33a151b95cca68c&ll=-2.144923,-79.95472&spn=0.120079,0.145912&z=12&iwloc=00048d33db5835b7e39f8&output=embed»></iframe><br /><small>Ver <a href=»http://maps.google.com/maps/ms?ie=UTF8&hl=es&msa=0&msid=109533710362464428045.00048d33a151b95cca68c&ll=-2.144923,-79.95472&spn=0.120079,0.145912&z=12&iwloc=00048d33db5835b7e39f8&source=embed» style=»color:#0000FF;text-align:left»>espol map</a> en un mapa más grande</small>
Hola chicos, les comento que con Gabriela estuvimos revisando algo parecido, para que aparezca inicialmente el mapa ubicado en la espol la latitud y longiud serían -2.145368,-79.964215.
Con el siguiente código se especifíca además de la longitud y latitud el zoom, que con 18 se puede apreciar muy bien el campus prosperina de ESPOL.
Donde map es una variable de tipo mapa.
map.setCenter(new GLatLng(-2.145368,,-79.964215), 18);
Saludos
Verónica Lara