I am currently using the google map api to develop a basic application with vue.js. Interestingly, when I utilize a simple html and javascript setup with the api key, everything runs smoothly. However, once I transition the same process to vue, the map fails to appear without any error messages in the console. It's puzzling because I can't pinpoint what mistake I might be making.
Within the project's index.html file, I embed the api url in this manner:
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=MY_API_KEY"></script>
Vue component
<template>
<div>
<h3>The map will be displayed here</h3>
<div ref="map" id="map"></div>
<button @click="getMap">Show the map</button>
</div>
getMap() {
const uluru = { lat: -25.344, lng: 131.036 };
const map = new window.google.maps.Map(this.$refs['map'],{
zoom: 15,
center: uluru,
mapTypeID: window.google.maps.MapTypeId.ROADMAP
}
return map;
}
It is necessary to prefix window before 'google' while calling the google map object in vue cli, or else an error occurs.
new window.google.maps.Map()...instead of new google.maps.Map()
Despite following the code as shown above, no map appears on the screen and no errors are indicated in the console. Where could I possibly be going wrong?