1. Ir a http://code.google.com/apis/maps/ para obtener una clave para el sitio Web y de esta forma poder usar Google Maps. Se necesita una cuenta de Google Mail para poder obtener la clave y ademas proporcionar el URL principal de su sitio Web, si esta trabajando localmente, es recomendable proporcionar un URL como http://mycomputername/, esto para poder ver el sitio web desde otros computadores en la red, porque si se usa http://localhost/, solo se podra mostrar la pagina localmente . Si esta usando un sitio web público, use una dirección como http://mywebsite/
2. Con su clave, adicionar las siguientes lineas entre el tag head de su pagina web:
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=mykey" type="text/javascript"> < / script>
Note en el código key=mykey, donde mykey es la clave que se obtuvo de google maps
3. Adicionar el siguiente escript entre el tag head tambien de su pagina web:
<script type="text/javascript">
function initialize()
{
var map;
//Verify if the browser is compatible
if (GBrowserIsCompatible()) {
//Create the map object, for the div with id map_canvas
map = new GMap2(document.getElementById("map_canvas"));
//Set the center of the map and the initial zoom
map.setCenter(new GLatLng(5.971217,-74.95697), //Center
6 // zoom from 1 to 15
);
//Create the line secuence
var polyline = new GPolyline([
new GLatLng(6.252507, -75.583191),
new GLatLng(6.342597, -75.555725),
new GLatLng(6.247046,-75.421143),
new GLatLng(6.118708, -75.187683),
new GLatLng(5.971217,-74.95697),
new GLatLng(5.807292, -74.602661),
new GLatLng(5.20857,-74.742737),
new GLatLng(4.646920, -74.093170)], //Line points array
"#ff0000", //Color for the line
5 //width
);
map.addOverlay(polyline); //Add the line to the map
//Add mark for the start
map.addOverlay(new GMarker(new GLatLng(6.252507, -75.583191)));
//Add mark for the end
map.addOverlay(new GMarker(new GLatLng(4.658555, -74.100037)));
//Create the map control to show diferent type of the map
var mapControl = new GMapTypeControl();
//Add the control to the map
map.addControl(mapControl);
//Add zoom in/out control
map.addControl(new GLargeMapControl());
}
}
< /script>
4. Asignar al evento onload del tag body, la funcion Initialize:
<body onload="javascript:initialize();">
5. Adicionar el siguiente Div dentro del body, la propiedad size del div será el tamaño de la ventana del mapa en la pagina web:
<div id="map_canvas" style="width: 500px; height: 300px">< /div>
Note que el div id, es el mismo usado cuando se creó el objeto map.
Esto es todo, explore su página web y disfrute de google maps.
No hay comentarios:
Publicar un comentario