Why do not you load the map in a hosting and local if I load the map correctly?

-2

<!DOCTYPE html>
<html>
  <head>
    <title>Drawing tools</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {


  navigator.geolocation.getCurrentPosition(
                function (position){
                  coords =  {
                    lng: position.coords.longitude,
                    lat: position.coords.latitude
                  };
                  setMapa(coords);  //pasamos las coordenadas al metodo para crear el mapa


                },function(error){console.log(error);});


}

 function setMapa (coords)
      {   
            //Se crea una nueva instancia del objeto mapa
            var map = new google.maps.Map(document.getElementById('map'),
            {
              zoom: 13,
              center:new google.maps.LatLng(coords.lat,coords.lng),

            });

            var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    markerOptions: {icon: 'images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);

            //Creamos el marcador en el mapa con sus propiedades
            //para nuestro obetivo tenemos que poner el atributo draggable en true
            //position pondremos las mismas coordenas que obtuvimos en la geolocalización
            marker = new google.maps.Marker({
              map: map,
              draggable: true,
              animation: google.maps.Animation.DROP,
              position: new google.maps.LatLng(coords.lat,coords.lng),

            });
            //agregamos un evento al marcador junto con la funcion callback al igual que el evento dragend que indica 
            //cuando el usuario a soltado el marcador
            marker.addListener('click', toggleBounce);

            marker.addListener( 'dragend', function (event)
            {
              //escribimos las coordenadas de la posicion actual del marcador dentro del input #coords
              document.getElementById("coords").value = this.getPosition().lat()+","+ this.getPosition().lng();
            });


      }


    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwKmL1KMaYg3Hl6ggnEnCVgCCHhtsgvEU&libraries=drawing&callback=initMap"
         async defer></script>
  </body>
</html>
    
asked by sparrowgt 12.12.2016 в 20:51
source

1 answer

2

The error that gives you is that with the key for your Google Maps application you have not authorized your domain http://taxidiamente.esy.es/

  

The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referers. Please check the referrer settings of your API key on the Google API Console.

In Spanish and simple:

  

The current URL that loads the Google Maps JavaScript API has not been loaded into the list of allowed references. Check the configuration in the Developer Console

Developer Console

Good security practices for developers

    
answered by 12.12.2016 в 21:05