Tema: Api google maps
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 11/04/2013, 03:53
Avatar de ipraetoriux
ipraetoriux
 
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 14 años, 9 meses
Puntos: 155
Respuesta: Api google maps
aca tienes todo el codigo

Código HTML: 
Ver original
  1. <html>
  2. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  3. <head>
  4. <style type="text/css">
  5.   div#map {
  6.     position: relative;
  7.   }
  8.  
  9.   div#crosshair {
  10.     position: absolute;
  11.     top: 192px;
  12.     height: 19px;
  13.     width: 19px;
  14.     left: 50%;
  15.     margin-left: -8px;
  16.     display: block;
  17.     background: url(crosshair.gif);
  18.     background-position: center center;
  19.     background-repeat: no-repeat;
  20. }
  21. </style>
  22. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  23. <script type="text/javascript">
  24.   var map;
  25.   var geocoder;
  26.   var centerChangedLast;
  27.   var reverseGeocodedLast;
  28.   var currentReverseGeocodeResponse;
  29.  
  30.   function initialize() {
  31.     var latlng = new google.maps.LatLng(32.5468,-23.2031);
  32.     var myOptions = {
  33.       zoom: 2,
  34.       center: latlng,
  35.       mapTypeId: google.maps.MapTypeId.ROADMAP
  36.     };
  37.     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  38.     geocoder = new google.maps.Geocoder();
  39.  
  40.  
  41.     setupEvents();
  42.     centerChanged();
  43.   }
  44.  
  45.   function setupEvents() {
  46.     reverseGeocodedLast = new Date();
  47.     centerChangedLast = new Date();
  48.  
  49.     setInterval(function() {
  50.       if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
  51.         if(reverseGeocodedLast.getTime() < centerChangedLast.getTime())
  52.           reverseGeocode();
  53.       }
  54.     }, 1000);
  55.  
  56.     google.maps.event.addListener(map, 'zoom_changed', function() {
  57.       document.getElementById("zoom_level").innerHTML = map.getZoom();
  58.     });
  59.  
  60.     google.maps.event.addListener(map, 'center_changed', centerChanged);
  61.  
  62.     google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
  63.        map.setZoom(map.getZoom() + 1);
  64.     });
  65.  
  66.   }
  67.  
  68.   function getCenterLatLngText() {
  69.     return '(' + map.getCenter().lat() +', '+ map.getCenter().lng() +')';
  70.   }
  71.  
  72.   function centerChanged() {
  73.     centerChangedLast = new Date();
  74.     var latlng = getCenterLatLngText();
  75.     document.getElementById('latlng').innerHTML = latlng;
  76.     document.getElementById('formatedAddress').innerHTML = '';
  77.     currentReverseGeocodeResponse = null;
  78.   }
  79.  
  80.   function reverseGeocode() {
  81.     reverseGeocodedLast = new Date();
  82.     geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
  83.   }
  84.  
  85.   function reverseGeocodeResult(results, status) {
  86.     currentReverseGeocodeResponse = results;
  87.     if(status == 'OK') {
  88.       if(results.length == 0) {
  89.         document.getElementById('formatedAddress').innerHTML = 'None';
  90.       } else {
  91.         document.getElementById('formatedAddress').innerHTML = results[0].formatted_address;
  92.       }
  93.     } else {
  94.       document.getElementById('formatedAddress').innerHTML = 'Error';
  95.     }
  96.   }
  97.  
  98.  
  99.   function geocode() {
  100.     var address = document.getElementById("address").value;
  101.     geocoder.geocode({
  102.       'address': address,
  103.       'partialmatch': true}, geocodeResult);
  104.   }
  105.  
  106.   function geocodeResult(results, status) {
  107.     if (status == 'OK' && results.length > 0) {
  108.       map.fitBounds(results[0].geometry.viewport);
  109.     } else {
  110.       alert("Geocode was not successful for the following reason: " + status);
  111.     }
  112.   }
  113.  
  114.   function addMarkerAtCenter() {
  115.     var marker = new google.maps.Marker({
  116.         position: map.getCenter(),
  117.         map: map
  118.     });
  119.  
  120.     var text = 'Lat/Lng: ' + getCenterLatLngText();
  121.     if(currentReverseGeocodeResponse) {
  122.       var addr = '';
  123.       if(currentReverseGeocodeResponse.size == 0) {
  124.         addr = 'None';
  125.       } else {
  126.         addr = currentReverseGeocodeResponse[0].formatted_address;
  127.       }
  128.       text = text + '<br>' + 'address: <br>' + addr;
  129.     }
  130.  
  131.     var infowindow = new google.maps.InfoWindow({ content: text });
  132.  
  133.     google.maps.event.addListener(marker, 'click', function() {
  134.       infowindow.open(map,marker);
  135.     });
  136.   }
  137.  
  138. </script>
  139. </head>
  140. <body onload="initialize()">
  141.   Find Place: <input type="text" id="address"/><input type="button" value="Go" onclick="geocode()"><input type="button" value="Add Marker at Center" onclick="addMarkerAtCenter()"/>
  142.   <div id="map">
  143.     <div id="map_canvas" style="width:100%; height:400px"></div>
  144.     <div id="crosshair"></div>
  145.   </div>
  146.  
  147.   <table>
  148.     <tr><td>Lat/Lng:</td><td><div id="latlng"></div></td></tr>
  149.     <tr><td>Address:</td><td><div id="formatedAddress"></div></td></tr>
  150.     <tr><td>Zoom Level</td><td><div id="zoom_level">2</div></td></tr>
  151.   </table>
  152. </body>
  153. </html>