Skip to content

Instantly share code, notes, and snippets.

@luisrenemas

luisrenemas/01.-readme.md

Last active April 11, 2016 08:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save luisrenemas/eee62d63fbe07c42ac3c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save luisrenemas/eee62d63fbe07c42ac3c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
01.-readme.md

Tutorial como crear mapas con Google Maps API

Aquí podras descargar tres archivos de tipo html, con diferentes tipos de mapas.

Podrás notar que se pueden crear múltiples tipos de mapas personalizados.

Página para ver el tutorial

Crear mapa con Google Maps API

Raw
mapa-basico.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mapa básico</title>
<style>
/*Estilos para el contenedor del mapa*/
#map_lima{
width:500px;
height:380px;
}
</style>
<!-- Agregar la librería de Google Maps API -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
// Función para inicializar el mapa
function inicializar() {
var mapa_lima = {
// Mostramos las coordenadas (Latitud, Longitud) en el centro del mapa
center:new google.maps.LatLng(-12.046374,-77.0427934),
// Tamaño del zoom
zoom:15,
// Tipo de mapa: ROADMAP, SATELLITE, HYBRID, TERRAIN
mapTypeId:google.maps.MapTypeId.ROADMAP
};
// Creamos un mapa en el contenedor con id map_lima, usando los parámetros de la variable mapa_lima
var map=new google.maps.Map(document.getElementById("map_lima"), mapa_lima);
}
//Mostramos el mapa una vez que cargue la página, con el evento addDomListener de Google Maps API
google.maps.event.addDomListener(window, 'load', inicializar);
</script>
</head>
<body>
<!-- Contenedor del mapa -->
<div id="map_lima"></div>
</body>
</html>
Raw
mapa-marker.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mapa con marcador</title>
<style>
/*Estilos para el contenedor del mapa*/
#map_lima{
width:500px;
height:380px;
}
</style>
<!-- Agregar la librería de Google Maps API -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
//Variable que almacena las coordenadas
var myCenter=new google.maps.LatLng(-12.046374,-77.0427934);
// Función para inicializar el mapa
function initialize()
{
var mapa_lima = {
//Muestra las coordenadas al centro del mapa
center:myCenter,
//Zoom del mapa
zoom:10,
// Tipo de mapa: ROADMAP, SATELLITE, HYBRID, TERRAIN
mapTypeId:google.maps.MapTypeId.ROADMAP
};
// Creamos un mapa en el contenedor con id map_lima, usando los parámetros de la variable mapa_lima
var map=new google.maps.Map(document.getElementById("map_lima"),mapa_lima);
//Mostramos el marcador en las coordenadas almacenada en la variable myCenter
var marker=new google.maps.Marker({
position:myCenter,
});
//Añadimos el marcador para el mapa utilizando el método setMap()
marker.setMap(map);
}
//Mostramos el mapa una vez que cargue el navegador, con el evento addDomListener de Google Maps API
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_lima"></div>
</body>
</html>
Raw
mapa-personalizado.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mapa personalizado</title>
<style>
/*Estilos para el contenedor del mapa*/
#map_lima{
width:500px;
height:380px;
}
</style>
<!-- Agregar la librería de Google Maps API -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
//Variable que almacena las coordenadas
var direccion_lima=new google.maps.LatLng(-12.046374,-77.0427934);
// Función para inicializar el mapa
function initialize()
{
var mapProp = {
//Muestra las coordenadas al centro del mapa
center:direccion_lima,
//Zoom del mapa
zoom:5,
// Tipo de mapa: ROADMAP, SATELLITE, HYBRID, TERRAIN
mapTypeId:google.maps.MapTypeId.ROADMAP
};
// Creamos un mapa en el contenedor con id map_lima, usando los parámetros de la variable mapProp
var map = new google.maps.Map(document.getElementById("map_lima"),mapProp);
var myCity = new google.maps.Circle({
//Muestra las coordenadas al centro del mapa
center:direccion_lima,
//Especifica el radio del círculo, en metros
radius:100,
//Especifica un color hexadecimal para la línea alrededor del círculo (formato: "#FFFFFF")
strokeColor:"#0080FF",
//Especifica la opacidad del color del trazo (un valor entre 0,0 y 1,0)
strokeOpacity:0.8,
//Especifica el grosor del trazo de la línea en píxeles
strokeWeight:2,
//Especifica un color hexadecimal para el área dentro del círculo (formato: "#FFFFFF")
fillColor:"#0080FF",
//Especifica la opacidad del color de relleno (un valor entre 0,0 y 1,0)
fillOpacity:0.4,
//Define si el círculo es editable por los usuarios (verdadero / falso)
editable: false
});
//Mostramos el circulo en el mapa utilizando el método setMap()
myCity.setMap(map);
//Mostramos el marcador en las coordenadas almacenada en la variable direccion_lima
var marker=new google.maps.Marker({
position:direccion_lima,
});
//Añadimos el marcador para el mapa utilizando el método setMap()
marker.setMap(map);
// Mostramos nuestro texto
var infowindow = new google.maps.InfoWindow({
content:"Lima - Perú!"
});
//infowindow muestra el contenido (generalmente texto o imágenes) en una ventana emergente por encima del mapa
infowindow.open(map,marker);
}
//Mostramos el mapa una vez que cargue el navegador, con el evento addDomListener de Google Maps API
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_lima"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment