Revisando el tutorial de Google Map extraigo este pequeño ejemplo del funcionamiento de la máquina de mostrar mapas. Este script que por su sencillez es llamado el “Hello World” de google Map es el script que hace uso de sus API’s y vemos lo potentes que son, que con pocas líneas de código se logra visualizar el mapa.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
La eplicación del código no es complicada. En el head se coloca el archivo que hace el trabajo.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
Con esta instrucción se carga el API de Google Map
El objeto mas importante en este script es el
google.maps.Map( opst )
En el se carga las opciones y se define el objeto DOM donde se cargará el mapa. En nuestro ejemplo se ve que se ha definido un div “map_canvas” y este pasa ser el parámetro de del la función de ‘document.getElementById( .. )’.
Los parámetros iniciales son cargados por la función ‘initialize’ donde se definen tres cosas, el zoom con el que se mostrará el mapa, el punto central definido por la Longitud y Latitud y el tipo de mapa que se mostrará.
Lo que hay que hacer ahora es ejecutar el script y ver con la facilidad que se ha definido un mapa en nuestro sitio.
Fuente: Google Map
