I'm currently working on integrating a single location map using Google Maps in Vue 2 with Vue-google-maps-2. Despite using code that has successfully worked for other parts of the application where multiple markers are plotted from an array, I am encountering an error that seems confusing since I'm essentially reusing functioning code. The error message displayed is:
""TypeError: Cannot read property 'maps' of undefined"
I attempted to address this issue by adding Number() and parseFloat() to the inputs inside window.google.maps.LatLng() section, which appears to be where the error lies based on my analysis. You can find the relevant code snippet below (I omitted CSS), any assistance would be greatly valued given my limited experience.
UPDATE: I suspect that the problematic code block is
new window.google.maps.LatLng
My assumption is that this is executing before Google Maps finishes loading. Any suggestions?
<div class="col-12">
<GmapMap
:center="center"
:zoom="zoom"
map-type-id="terrain"
ref="map"
>
<GmapMarker
:position="propertyLocation"
:clickable="false"
/>
</GmapMap>
</div>
<script>
import { gmapApi } from "vue2-google-maps";
export default {
name: 'BlogPost',
data() {
return {
propid: "",
location: [{ "id": 2, "name": "Chatterbridge", "lat": 52.2679288, "lng": -1.1202549, "postcode": "NN11", "country": "GB", "bedrooms": "1", "price": "65000" }]
center: {
lat: 52.2046,
lng: -1.77,
},
zoom: 12,
};
},
created() {
this.propid = Number(this.$route.params.slug)
this.location = locations.find(locations => locations.id === this.propid)
this.propertyLocation = new window.google.maps.LatLng(this.location.lat, this.location.lng);
},
computed: {
google: gmapApi,
}
}
</script>