Scribd Logo
Upload

Welcome to Scribd!

  • 175 views

    Taller Introductorio A: Fitit10

    Uploaded by

    okano00deleon
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd

    Taller Introductorio A: Fitit10

    Uploaded by

    okano00deleon
    175 views44 pages
    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.

    Original Title

    gmaps

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    175 views44 pages

    Taller Introductorio A: Fitit10

    Uploaded by

    okano00deleon
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    You are on page 1of 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
    rafaponce@cenidet.edu.mx
    http://rafaponce.wordpress.com

    You might also like