问Google自动完成配额

EN

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=WeddinginitMap">

</script>

<script>

//Direction Grand Cruise

function initDirection() {
 var $directionMap = $('[ data-directionMap ]');

            $.each($directionMap, function( index, element){

             var $dirEle = $(element);
             var that = $(this);
             var $id = $dirEle.get(0).id;
             var $start = $dirEle.closest('.modal-content').find('.start-move').get(0).id;
             var $end  = $dirEle.closest('.modal-content').find('.end-move').get(0).id;

             //console.log($end);

             var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer();

        var map = new google.maps.Map($('#'+$id)[0] , {
          zoom: 18,
          center: {lat: 22.560941, lng: 88.354062}
        });
        var input =  $('#'+$start)[0];


       var autocomplete = new google.maps.places.Autocomplete(input);


        directionsDisplay.setMap(map);

        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        $('#'+$start)[0].addEventListener('change', onChangeHandler);
        $('#'+$end)[0].addEventListener('change', onChangeHandler);



        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin: $('#'+$start)[0].value,
          destination: $('#'+$end)[0].value,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);


          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });



      };


            });//end $.each



      };// initDirection



    </script>


<script>
    function WeddinginitMap() {

      var $locationSelector = $('.map-wrapper').find('.location-map[ data-map ]');

      $.each( $locationSelector, function( index, element ){

        var $ele = $(element);
        var $this = $(this);
        var $mapId = $ele.get(0).id;
        var $lat = parseFloat( $('#'+$mapId).data('lat') );
        var $long = parseFloat($('#'+$mapId).data('longi'));
        var $zoom = parseFloat( $('#'+$mapId).data('zoom') );
        console.log($mapId);
        console.log($lat);
        console.log($long);
        console.log($zoom);

        var uluru = {lat: $lat, lng: $long };

        var $map = $('#'+$mapId)[0];
        var map = new google.maps.Map($map, {
          zoom: $zoom,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map,
          icon:'assets/img/svg/vivada-ico.svg'
        });

      });//$.each

 initDirection();

    };
</script>

<script>


     function initializeGoogletMapinsideModal(){
       $('.map-modal ').on('shown.bs.modal', function (e) {

        WeddinginitMap();
        initDirection();

     });

   };
   initializeGoogletMapinsideModal();

   function redirectToDirectionModal(){

    var $closeModal = $('.close-modal');

    $.each( $closeModal, function(index, element ){

     var $elem = $(element);

     $elem.on('click', function(){

        var $MainModal = $elem.closest('.map-modal');
        var $targetDirectionModal = $elem.attr('data-target-modal');

        $MainModal.modal('hide');
        $($targetDirectionModal).modal('show');
        $($targetDirectionModal).on('shown.bs.modal', function(e){
           initDirection();
        });

     });//click


    });//$.each


   };

   redirectToDirectionModal()

</script>