Vue JS Google Places API - Map not showing

Question

Maps were not showing on the right after following the instructions step by step. The google api map itself is not showing.

(The API key is already in the script tag in my code, but I placed a placeholder instead here.)

Here is the video reference: https://youtu.be/ID-_D0zJlSM

<div class="ten wide column segment ui m-0" ref="map"></div>

methods: {
    locatorButtonPressed() {
        navigator.geolocation.getCurrentPosition(
            position => {
                this.lat = position.coords.latitude;
                this.lng = position.coords.longitude;
            },
            error => {
                console.log("Error getting location");
            }
        );
    },

    findCloseByButtonPressed() {
        const URL = `https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/nearbysearch/json?
                            location=${this.lat},${this.lng}
                            &type=${this.type}
                            &radius=${this.radius * 1000}
                            &key=`[KEY HERE]`;

        axios
            .get(URL)
            .then(response => {
                this.places = response.data.results;
                this.addLocationsToGoogleMaps();
            })
            .catch(error => {
            console.log(error.message);
        });
    },

    addLocationsToGoogleMaps() {
        var map = new google.maps.Map(this.$refs['map'], {
            zoom: 15,
            center: new google.maps.LatLng(this.lat, this.lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        this.places.forEach(place => {
            const lat = place.geometry.location.lat;
            const lng = place.geometry.location.lng;

            let marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map
            });

            google.maps.event.addListener(marker, "click", () => {
                infowindow.setContent(
                    `<div class="ui header">${place.name}</div><p>${place.vicinity}</p>`
                );
                infowindow.open(map, marker);
            });
        });
    }
}

}

Answer 1

if you want to implement map i prefer use this click here