Insertar Google Maps v3 en mi pagina web [HTML / JS] - Trucodigo

Insertar Google Maps v3 en mi pagina web [HTML / JS]




Hola Trucodigueros en esta ocasion le straigo la forma de insertar el mapa de google V3 ya que las versiones anteriores ya no da soporte y por ende ya no funcionan correctamente

Antes de empezar mencionar que entre las características de Google Maps v3 encontramos:

Adecuación al HTML5.
Soporte para dispositivos móviles
Nueva redefinición del API
Nuevas funcionalidades para la gestión de mapas
Soportes multidioma

Bueno empecemos primero en la cabecera de nuestro documento (head) colocaremos lo siguiente:

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


y en el cuerpo de nuestro archivo ira lo siguiente

<div id="map_canvas" style="width: 100%; height:75%"></div>
<script type="text/javascript">
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(19.4338739,-99.1413958,18),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

function initialize(){
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(19.4338739,-99.1413958,18),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>


ahora que podemos personalizar de este complemento pues sera lo siguiente:

Punto inicial

Esto lo cambiaremos asi, buscamos en el codigo

19.4338739,-99.1413958,18


y lo cambiaremos por la posicion que nosotros desemos (esto lo encuentras entrando a google maps y situandote en donde quieras que inicie y en la url encontraras las coordenadas) "aparece 2 veces"

Acercamineto (Zoom)

esto es para ver que tan cerca en el mapa iniciara para esto buscamos esta linea

zoom: 12,


y cambiamos el 12 por cualquier numero entre 1 - 20 "aparece 2 veces"

Tamaño del mapa

buscaremos esto

<div id="map_canvas" style="width: 100%; height:75%"></div>


y solo tendran que cambiar los valores "100%" y "75%" por lo que ustedes gusten

bueno eso seria todo espero les haya gustado y como siempre me despido dejandoles la

DEMO
Tags
Opciones
Estadísticas
Creado 19.11.2015 a las 20:16 hs
Categoría Html
  • 0
    Medallas
  • 0
    Favoritos
  • 1462
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Posts relacionados
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Patrocinador
Autor del post
Ver perfil de Omaredomex Omaredomex
Hombre Administrador  Mensaje
0 81 2
Medallas
No tiene medallas
Últimos visitantes