CODEWITHSUNDEEP
javascriptvue.js
insomniac22
insomniac22

Reputation: 151

Vue Google Maps Undefined - Single Marker Error

I am trying to map one location on a Google Map in Vue 2 using Vue-google-maps-2. I am using code that should work, as I am using it for calls in other parts of my app to plot multiple markers from an array. The error is making no sense as I am only reusing code that works elsewhere. The error is as follows:

""TypeError: Cannot read property 'maps' of undefined"

I have tried to add Number() and parseFloat() onto the inputs into the window.google.maps.LatLng() section (which is where the error is residing as far as I can see. Code below (I have excluded the CSS), any help greatly appreciated for such a noob error.

UPDATE: I think the offending code is

new window.google.maps.LatLng

I think this is firing before Google Maps has loaded. Any advice?

<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>

Upvotes: 0

Views: 386

Answers (1)

Dan Knights
Dan Knights

Reputation: 8368

From these docs (I'm guessing this is the package you're using). How you have google setup in computed means you can use this instead of window:

this.propertyLocation = new this.google.maps.LatLng(this.location.lat, this.location.lng);

Upvotes: 1

Related Questions