Google map API Shows Blank Screen in my Laravel Application

Question

In my Laravel Application i use google map to Display Route and Distance Between Two Places. after setting google map, i test my app. its display as Blank Screen. I even registered the application using a key that I applied for on Google's website. I have been working on this for 2 hours and cannot figure it out.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY API KEY&libraries=places&callback=initMap&sensor=false" async defer></script>


<script type="text/javascript">

     function GetRoute() {

        source = document.getElementById("pickupaddress").value;
        destination = document.getElementById("deliveryaddress").value;

        var request = {
            origin: source,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        };



        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix({
            origins: [source],
            destinations: [destination],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        }, function (response, status) {
            if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                var distance = response.rows[0].elements[0].distance.text;
                var dvDistance = document.getElementById("distanceops");
                dvDistance.innerHTML = "";
                dvDistance.innerHTML += distance;

            } else {
                alert("Unable to find the distance via road.");
            }
        });


    }


    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
            mapTypeControl: false,
            center: {lat: 4.2105, lng: 101.9758},
            zoom: 8
    });
    new AutocompleteDirectionsHandler(map);
    } 

    /**
     * @constructor
    */
    function AutocompleteDirectionsHandler(map) {
        this.map = map;
        this.originPlaceId = null;
        this.destinationPlaceId = null;
        this.travelMode = 'WALKING';
        var originInput = document.getElementById('pickupaddress');
        var destinationInput = document.getElementById('deliveryaddress');

        this.directionsService = new google.maps.DirectionsService;
        this.directionsDisplay = new google.maps.DirectionsRenderer;
        this.directionsDisplay.setMap(map);

        var deliveryrestrictOptions = {componentRestrictions: {country: 'my'},placeIdOnly: true};

        var originAutocomplete = new google.maps.places.Autocomplete(
            originInput, deliveryrestrictOptions);
        var destinationAutocomplete = new google.maps.places.Autocomplete(
            destinationInput,deliveryrestrictOptions);

        this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
        this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
    }


      // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) {
        var radioButton = document.getElementById(id);
        var me = this;
        radioButton.addEventListener('click', function() {
            me.travelMode = mode;
            me.route();

        });
    };

    AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
        var me = this;
        autocomplete.bindTo('bounds', this.map);
        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.place_id) {
                window.alert("Please select an option from the dropdown list.");
                return;
            }
            if (mode === 'ORIG') {
                me.originPlaceId = place.place_id;
            } else {
                me.destinationPlaceId = place.place_id;
            }
            me.route();
        });

    };

    AutocompleteDirectionsHandler.prototype.route = function() {
        if (!this.originPlaceId || !this.destinationPlaceId) {
            return;
        }
        var me = this;

        this.directionsService.route({
            origin: {'placeId': this.originPlaceId},
            destination: {'placeId': this.destinationPlaceId},
            travelMode: this.travelMode
        }, function(response, status) {
            if (status === 'OK') { 

                me.directionsDisplay.setDirections(response);

                GetRoute();


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



    window.ParsleyConfig = {
        errorsWrapper: '<div></div>',
        errorTemplate: '<span class="error-text"></span>',
        classHandler: function (el) {
            return el.$element.closest('input');
        },
        successClass: 'valid',
        errorClass: 'invalid'
    };


</script>

Answer 1

I have worked on google maps. Google maps won't load inside a modal or any hidden divs (for perf reasons).

Here is what you do. Trigger resize on the map and it should render the map.

google.maps.event.trigger(map, 'resize') where map is your map instance name.