OpenStreetMap con la API de Google Maps v3

OpenStreetMap con la API de Google Maps v3

Los mapas de OpenStreetMap son geniales en compración con los mapas de Google Maps. Obviamente por ser hechos por la comunidad y tener mucha más información. Sin embargo lo interesante que tiene Google Maps es su API V3 para hacer truquitos sobre los mapas, lo que hicimos recientemente en un trabajo fué un mix de estas herramientas: utilizamos los mapas de OpenStreetMap y la API de GoogleMaps.
Para hacer los mapas u obtener las coordenadas pueden usar esta herramienta que está mas que bien.
Código fuente en GitHub
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>MAP OSM GMAPS V3</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
    function initialize() {

    var mapOptions = {
     center: new google.maps.LatLng(-31.896161, -61.857384),
                zoom: 14,
                mapTypeId: "OSM",
                mapTypeControl: false,
                streetViewControl: false
    }

    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

    map.mapTypes.set("OSM", new google.maps.ImageMapType({
                getTileUrl: function(coord, zoom) {
                    return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 18
                }));
             
            /* Area Azul coordenadas en formato JS*/
            var myCoordinates = [
            new google.maps.LatLng(-31.904110,-61.868596),
            new google.maps.LatLng(-31.890361,-61.865262),
            new google.maps.LatLng(-31.892608,-61.852603),
            new google.maps.LatLng(-31.892903,-61.850949),
            new google.maps.LatLng(-31.889933,-61.850179),
            new google.maps.LatLng(-31.890931,-61.844472),
            new google.maps.LatLng(-31.907667,-61.848420),
            new google.maps.LatLng(-31.906293,-61.855950),
            new google.maps.LatLng(-31.908098,-61.856383),
            new google.maps.LatLng(-31.907255,-61.861236),
            new google.maps.LatLng(-31.905477,-61.860810)
            ];
           
            /* Colores */
            var polyOptions = {
            path: myCoordinates,
            strokeColor: "#3e4d9a",
            strokeOpacity: 0.7,
            strokeWeight: 3,
            fillColor: "#3e4d9a",
            fillOpacity: 0.4
            }
            var it = new google.maps.Polygon(polyOptions);
            it.setMap(map);
            /* Fin Area Azul */
           
           
            /* Area Amarilla */

            var myCoordinates2 = [
            new google.maps.LatLng(-31.875458,-61.868730),
            new google.maps.LatLng(-31.878819,-61.849092),
            new google.maps.LatLng(-31.892608,-61.852603),
            new google.maps.LatLng(-31.890361,-61.865262),
            new google.maps.LatLng(-31.904110,-61.868596),
            new google.maps.LatLng(-31.902974,-61.875339)
            ];

            var polyOptions = {
            path: myCoordinates2,
            strokeColor: "#fae708",
            strokeOpacity: 0.7,
            strokeWeight: 3,
            fillColor: "#fae708",
            fillOpacity: 0.3
            }
            var it2 = new google.maps.Polygon(polyOptions);
            it2.setMap(map);
           
            /* Fin Area Amarilla */
                               
            /* Markers (Reemplazar la url por la correspondiente) */
            var image1 = 'icon.png';
            var myLatLng = new google.maps.LatLng(-31.898188, -61.859444);
            var localMarker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                                title: 'Titulo descriptivo',
                icon: image1
            });
         
            var image2 = 'icon.png';
            var myLatLng2 = new google.maps.LatLng(-31.908548, -61.866914);
            var antenaMarker = new google.maps.Marker({
                position: myLatLng2,
                map: map,
                                title: 'Titulo descriptivo',
                icon: image2
            });
                               

    }

    google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <!-- contenedor del mapa -->
    <div id="map-canvas"></div>
  </body>
</html>

 

Filtrar por