Google Maps API

Serviço Geocoding

Serviço de distâncias

Serviço de endereços


GOOGLE MAPS
Belo Horizonte, 15 10 2012

Mapa com Percurso


 Código online

<!DOCTYPE html>
<html>
<head>
<link href="map.css" rel="stylesheet">   
<script type="text/javascript" 
  src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAFGZYs6qdtUK7RnrA0FSGx9sCpLjurW4c&sensor=true">
</script>
<!--
  //
  // O proximo infobox.js vem do "central repository of utility libraries"
  // http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js?r=49
  //
  -->
  <script type="text/javascript"
src="infobox.js" >
</script>
<script type="text/javascript">
var myMap;
var geocoder;
markers = [];
var myIcon = new google.maps.MarkerImage("https://lh3.googleusercontent.com/-fPHbrZByWi0/UAi_X_qXPbI/AAAAAAAAAHk/IS5G2wGojiI/s200/gdg_bh_02.png", null, null, new google.maps.Point(30,20), new google.maps.Size(32, 48));
    var myShadow = new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/cb/camera_shadow.png", null, null, new google.maps.Point(30,20), new google.maps.Size(32, 48));
var backGroundUrl = 'http://lh6.googleusercontent.com/-kqRUb-MbdW4/UAi_aLSlG2I/AAAAAAAAAIU/AB01FjmUHz8/s640/gdg_bh_fondo.png' ;
    var logoTipoGdg = "https://lh3.googleusercontent.com/-fPHbrZByWi0/UAi_X_qXPbI/AAAAAAAAAHk/IS5G2wGojiI/s200/gdg_bh_02.png"
var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
//
// A função onde gera o mapa
//
function initialize() {
 directionsDisplay = new google.maps.DirectionsRenderer();
    var latlng = new google.maps.LatLng(-19.922, -43.940); // coresponde com BH
    //
    // opçôes que uso no meu mapa.
    // https://developers.google.com/maps/documentation/javascript/3.8/reference#MapOptions
    //
    var mapOptions = {
    center: latlng
    ,disableDefaultUI:false
          ,zoom: 15
          ,mapTypeId: google.maps.MapTypeId.ROADMAP
          ,travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        //
        // Asinar o Mapa ao elemento <div> "map_canvas" com as mapOptions
        //
        myMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        directionsDisplay.setMap(myMap);
        //directionsDisplay.setPanel(document.getElementById("directionsPanel")); 
        
    }
     
    function calcRoute() {
        var comezo = document.getElementById("addressA").value;
        var final = document.getElementById("addressB").value;
        var request = {
            origin:comezo, 
            destination:final,
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
    }
    
// 
// Limpar o Mapa
//
function setAllMap(myMap) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(myMap);
    }
  
  }
  
  function clearOverlays() {
    setAllMap(null);
  }       
  
  function clearMap() {
    clearOverlays();
    markers = [];
   
    document.getElementById('addressA').value = "";
    document.getElementById('addressB').value = "";
  }
         
</script>

</head>
<body onload="initialize()">
 <div id="map_canvas">&nbsp;</div>
 <div>
    <input id="addressA" type="textbox" value="">
    <input id="addressB" type="textbox" value="">
    <input type="button" value="Procura" onclick="calcRoute()">
    <input type="button" value="Limpar" onclick="clearMap();">
  </div>
 <!--<div id="directionsPanel"></div> -->
</body>
  
</html>