Google Maps JavaScript API v3

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció. Tutorial


Obtaining an API Key

anem a

i creem un projecte on puc veure totes les APIs de Google, i només marco Google Maps API v3 (Courtesy limit: 25,000 requests/day)

ja tinc una clau. Aquesta clau és la necessària per a les aplicacions de navegador.

Hello World

sydney.htm: (he de ficar la meva clau). He de ficar a sensor o bé true o bé false (tot i que no sé de moment què representa)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyARs1RPx8eUzmdy56boo0_BwLQR2jILV9U&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Amb la primera línia:

<!DOCTYPE html>

estic declarant el meu document com a HTML5, de la manera més senzilla possible.

Code Samples

Optimized directions

La idea és que tinc un llistat de punts, i s'ha de traçar la millor ruta que uneixi els punts. Aquest és el problema que es planteja el buzoneo, has de traçar la millor ruta unint punts. El codi s'ha de treballar més. La idea final seria tenir una llista de direccions en una base de dades, i que es puguin pintar tots els punts sobre un mapa i unir els punts amb la millor ruta. Allò curiós d'aquest codi és que no utilitzes la key.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
 Copyright 2010 Google Inc. 
 Licensed under the Apache License, Version 2.0: 
 http://www.apache.org/licenses/LICENSE-2.0 

Optimized directions:
https://developers.google.com/maps/documentation/javascript/demogallery
 -->

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Optimized Directions</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = null;
  var destination = null;
  var waypoints = [];
  var markers = [];
  var directionsVisible = false;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.404159, 2.159929);
    var myOptions = {
      zoom:16,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    
    google.maps.event.addListener(map, 'click', function(event) {
      if (origin == null) {
        origin = event.latLng;
        addMarker(origin);
      } else if (destination == null) {
        destination = event.latLng;
        addMarker(destination);
      } else {
        if (waypoints.length < 9) {
          waypoints.push({ location: destination, stopover: true });
          destination = event.latLng;
          addMarker(destination);
        } else {
          alert("Maximum number of waypoints reached");
        }
      }
    });
  }

  function addMarker(latlng) {
    markers.push(new google.maps.Marker({
      position: latlng, 
      map: map,
      icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
    }));    
  }

  function calcRoute() {
    if (origin == null) {
      alert("Click on the map to add a start point");
      return;
    }
    
    if (destination == null) {
      alert("Click on the map to add an end point");
      return;
    }
    
    var mode;
    switch (document.getElementById("mode").value) {
      case "bicycling":
        mode = google.maps.DirectionsTravelMode.BICYCLING;
        break;
      case "driving":
        mode = google.maps.DirectionsTravelMode.DRIVING;
        break;
      case "walking":
        mode = google.maps.DirectionsTravelMode.WALKING;
        break;
    }
    
    var request = {
        origin: origin,
        destination: destination,
        waypoints: waypoints,
        travelMode: mode,
        optimizeWaypoints: document.getElementById('optimize').checked,
        avoidHighways: document.getElementById('highways').checked,
        avoidTolls: document.getElementById('tolls').checked
    };
    
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
    
    clearMarkers();
    directionsVisible = true;
  }
  
  function updateMode() {
    if (directionsVisible) {
      calcRoute();
    }
  }
  
  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
  }
  
  function clearWaypoints() {
    markers = [];
    origin = null;
    destination = null;
    waypoints = [];
    directionsVisible = false;
  }
  
  function reset() {
    clearMarkers();
    clearWaypoints();
    directionsDisplay.setMap(null);
    directionsDisplay.setPanel(null);
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
  }
</script>
</head>
<body onload="initialize()" style="font-family: sans-serif;">
  <table style="width: 400px">
    <tr>
      <td><input type="checkbox" id="optimize" checked />Optimize</td>
      <td>
        <select id="mode" onchange="updateMode()">
          <option value="bicycling">Bicycling</option>
          <option value="driving">Driving</option>
          <option value="walking">Walking</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" id="highways" checked />Avoid highways</td>
      <td><input type="button" value="Reset" onclick="reset()" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" id="tolls" checked />Avoid tolls</td>
      <td><input type="button" value="Get Directions!" onclick="calcRoute()" /></td>
      <td></td>
    </tr>
  </table>
  <div style="position:relative; border: 1px; width: 610px; height: 400px;">
    <div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div>
    <div id="directionsPanel" style="position:absolute; left: 410px; width:240px; height:400px; overflow: auto"></div>
  </div>
</body>
</html>

Geocoding Service (convertir adreces reals a posicions en el mapa)

Adreces 08025 petit.png

L'aplicatiu d'aquest servei és clar. Per exemple, en el cas de marketing per bústia (buconeo), si tinc una llista d'adreces les puc pintar en el mapa i aleshores planificar la millor ruta. Si vull optimitzar la ruta s'hauria de treballar el punt anterior. Es tracta d'un buzoneo selectiu, a partir d'adreces reals (no fer buzoneo a totes les porteries).

El problema que em trobo és que les adreces reals tipus Roger de Flor n.254 pral 2ª 08025 Barcelona (Barcelona) (España) no les agafa, sinó que les he de simplificar a adreces tipus Roger de Flor 254 08025 Barcelona (Barcelona) (España). Si entro directament en el Google Maps puc veure si l'adreça és acceptada o no.

Finalment he pogut programar un script web que, donat un codi postal, pinta les adreces en el mapa. No dic de què són les adreces perquè entraria en conflicte amb la LOPD :-). Però efectivament, funciona. Això sí, em trobo ràpidament amb el problema OVER_QUERY_LIMIT (limitació de Google) i això obliga a introduir un delay (http://stackoverflow.com/questions/9805529/geocoding-api-over-query-limit) i fa que ralentitzi l'execució del script. En la imatge hi ha la captura de pantalla de 262 direccions reals extretes de la web corresponents al CP=08025 de Barcelona.

Quan hi ha una xarxa densa de punts, com és el cas, i s'han de recórrer els punts, crec que buscar una ruta òptima no té sentit. La ruta que faries intuitivament segurament s'acosta a la ruta òptima que calcularia un software...

Fitxer:Geocoding service.zip


creat per Joan Quintana Compte, desembre 2012

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
IES Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines