Scribd
Upload
199 views44 pages

Taller Introductorio A: Fitit10

This document provides an introduction to using Google Maps APIs to create maps and add various elements like markers, polygons and geocoding. It covers basic map initialization, customizing map controls, adding points, lines and shapes, handling events, geocoding locations and detecting a user's location. Code examples are provided for each concept to demonstrate how to implement maps with JavaScript and the Google Maps API.

Uploaded by

okano00deleon
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
199 views44 pages

Taller Introductorio A: Fitit10

This document provides an introduction to using Google Maps APIs to create maps and add various elements like markers, polygons and geocoding. It covers basic map initialization, customizing map controls, adding points, lines and shapes, handling events, geocoding locations and detecting a user's location. Code examples are provided for each concept to demonstrate how to implement maps with JavaScript and the Google Maps API.

Uploaded by

okano00deleon
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 44

Taller introductorio a

M.C. Ismael Rafael Ponce Medellín

FITIT10 10 de noviembre 2010


¡Hola mundo
<html>
<head>
<title>Ejercicio</title>
</head>
<body>
<div id="mapa" style="width:100%; height:100%"></div>
</body>
</html>
… con mapas!
<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 inicio() {
var latlng = new google.maps.LatLng(23.737970818, -99.1444178);
var opciones = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("mapa"),
opciones);
}
</script>
Tipos de mapa:
mapTypeId:
– google.maps.MapTypeId.HYBRID
– google.maps.MapTypeId.ROADMAP
– google.maps.MapTypeId.DEFAULT
google.maps.LatLng(23.737970818,
-99.1444178);

google.maps.Map(document.getElementBy
Id("map"), myOptions);
Elementos
Mapa.
Puntos.
Cuadros de texto.
Puntos
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
Globos de texto
var infowindow = new google.maps.InfoWindow(
{ content: "Bienvenidos a Ciudad Victoria",
size: new google.maps.Size(50,50)
});
infowindow.open(map,marker);
Escuchando eventos…
google.maps.event.addListener(map, 'click', function(event) {
var markr = new google.maps.Marker({
position: event.latLng,
map: map
});
alert(event.latLng);
});
Quitando rastros…
google.maps.event.addListener(marker, 'click', function() {
marker.setMap(null);
});
Y dijo…

google.maps.event.addListener(marker, 'click', function() {


infowindow.open(map,marker);
});
Personalizando controles
var myOptions = {
navigationControl: true,
mapTypeControl: true,
scaleControl: true,
…
}
Control de navegación
navigationControl: true,
// navigationControlOptions: { style:
google.maps.NavigationControlStyle.SMALL},

// navigationControlOptions: { style:
google.maps.NavigationControlStyle.ZOOM_PAN},

// navigationControlOptions: { style:
google.maps.NavigationControlStyle.ANDROID},

// navigationControlOptions: { style:
google.maps.NavigationControlStyle.DEFAULT},
mapTypeControl: true,
// mapTypeControlOptions: {style:
google.maps.MapTypeControlStyle.DROPDOWN_ME
NU},

// mapTypeControlOptions: {style:
google.maps.MapTypeControlStyle.HORIZONTAL_B
AR},

// mapTypeControlOptions: {style:
google.maps.MapTypeControlStyle.DEFAULT},
Usando imágenes
var imagen = 'icon/restaurant.png';
google.maps.event.addListener(map, 'click', function(event) {
var markr = new google.maps.Marker({
position: event.latLng,
map: map,
icon: imagen
});
});
Y más imágenes
var imglimites = new google.maps.LatLngBounds(
new google.maps.LatLng(23.60,-99.3992),
new google.maps.LatLng(24.92,-99.009));
var imgvic = new
google.maps.GroundOverlay("http://x.org.mx/Tamaulipas.png",
imglimites);
imgvic.setMap(map);
Puntos, líneas y polígonos
var coordenadas = [
new google.maps.LatLng(18.92034818178, -99.2352695937),
new google.maps.LatLng(19.42118174529, -99.1372080321),
new google.maps.LatLng(23.73797, -99.1444)
];

var rutaVuelo = new google.maps.Polyline({


path: coordenadas,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});

rutaVuelo.setMap(map);
var coordenadas = [
new google.maps.LatLng(18.92034818178, -99.2352695937),
new google.maps.LatLng(19.42118174529, -99.1372080321),
new google.maps.LatLng(23.73797, -99.1444)
];

var rutaVuelo = new google.maps.Polygon({


paths: coordenadas,
fillColor: "#FF0000",
fillOpacity: 0.35,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});

rutaVuelo.setMap(map);
var infor;

google.maps.event.addListener(rutaVuelo, 'click', function(event) {


infor = new google.maps.InfoWindow();
var vertices = rutaVuelo.getPath();
var contenido = "<b>Viaje a Victoria</b><br />";
contenido += "Clic: <br />" + event.latLng.lat() + "," +
event.latLng.lng() + "<br />";
infor.setContent(contenido);
infor.setPosition(event.latLng);
infor.open(map);
});
Sobreponiendo KML
var georssLayer = new
google.maps.KmlLayer('http://algo.com/un.kml');
georssLayer.setMap(map);

http://world.wildlife.adventures.googlepages.com/wildlife-
national-parks-japan.kml
Sobreponiendo geoRSS
var georssLayer = new
google.maps.KmlLayer('http://algo.com/algo.xml');
georssLayer.setMap(map);
Geocodificación
<input id="direccion" type="textbox" value="Ciudad
Victoria, México">

<input type="button" value="Geocodifica"


onclick="ubica()">
var geocodifica;

function initialize() {
geocodifica = new google.maps.Geocoder();
…
}
function ubica() {
var direc = document.getElementById("direccion").value;
geocodifica.geocode( { 'address': direc}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("La geocodificación no se pudo realizar debido a: " + status);
}
});
}
Ahora al revés…
<input id="latlng" type="textbox"
value="23.73797, -99.1444">

<input type="button" value="Geocodifica-


Inversa" onclick=“geoinv()">
Geocodificación inversa
function geoinv() {
var input = document.getElementById("latlng").value;
var latlngStr = input.split(",",2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
…
geocodifica.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert("Sin resultados");
}
} else {
alert("La geocodificación falló debido a: " + status);
}
});
}
Detectando el navegador
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1
){
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '80%';
mapdiv.style.height = '60%';
}
}
Ubicación automática
var ubicacion;
var infowindow = new google.maps.InfoWindow();
var bandera_soporte = new Boolean();

function initialize() {
detectBrowser();
var myOptions = {
…
}
…
}
Ubicación del W3C
If (navigator.geolocation) {
bandera_soporte = true;
navigator.geolocation.getCurrentPosition(function(position) {
ubicacion = new
google.maps.LatLng(position.coords.latitude,position.coords.longitude);
contenido = “Localización encontrada gracias al W3C standard";
map.setCenter(ubicacion);
infowindow.setContent(contenido);
infowindow.setPosition(ubicacion);
infowindow.open(map);
}, function() {
nogeo(bandera_soporte);
});
}
Google Gears Geolocation
else if (google.gears) {
bandera_soporte = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position) {
ubicacion = new google.maps.LatLng(position.latitude,position.longitude);
contenido = “Ubicación encontrada por Google Gears";
map.setCenter(ubicacion);
infowindow.setContent(contenido);
infowindow.setPosition(ubicacion);
infowindow.open(map);
}, function() {
nogeo(banderasoporte);
});
}
<script type="text/javascript"
src="http://code.google.com/apis/gears/gears_init.js"></script>
Si el navegador no soporta
geolocalización… 
else {
banderasoporte = false;
nogeo(banderasoporte);
}
function nogeo(error) {
if (error == true) {
contenido = "Error: Falló la geolocalización";
} else {
contenido = "Error: El navegador no soporta geolocalización";
}
ubicacion = new google.maps.LatLng(23.73797081, -99.144417);
map.setCenter(ubicacion);
infowindow.setContent(contenido);
infowindow.setPosition(ubicacion);
infowindow.open(map);
}
Extra:
Bases de datos y JSP.
Otros sabores:
Enlaces
http://code.google.com/intl/es-ES/apis/maps/documentatio
n/javascript/
http://code.google.com/intl/es-ES/apis/maps/documentatio
n/javascript/reference.html
Gracias!!!

@DarkZoro
[email protected]
http://rafaponce.wordpress.com

You might also like