Sería algo así:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<title>Demo</title>
</head>
<body>
<div id="mapa" style="width: 500px; height: 500px;"></div>
<script type="text/javascript">
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<title>Demo</title>
</head>
<body>
<div id="mapa" style="width: 500px; height: 500px;"></div>
<script type="text/javascript">
var divMapa = document.getElementById("mapa");
var madrid = new google.maps.LatLng(40.416691, -3.700345);
var madrid = new google.maps.LatLng(40.416691, -3.700345);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(divMapa, myOptions);
map.setCenter(madrid);
</script>
</body>
</html>
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(divMapa, myOptions);
map.setCenter(madrid);
</script>
</body>
</html>
La línea
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
importa las API de Google Maps que nos permitiran pintar el mapa.
La línea
<div id="mapa" style="width: 500px; height: 500px;"></div>
define el tamaño del mapa y su posición en nuestra página web.La línea
var madrid = new google.maps.LatLng(40.416691, -3.700345);
define la latitud y longitud de Madrid, donde posteriormente centraremos el mapa con
map.setCenter(madrid);
La línea
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
mapTypeId: google.maps.MapTypeId.ROADMAP
};
permite definir los parámetros iniciales del mapa, como el nivel de zoom y el tipo de mapa.
No hay comentarios:
Publicar un comentario