xkjyeah / vue-google-maps

Google maps component for vue with 2-way data binding
https://xkjyeah.github.io/vue-google-maps/
1.88k stars 474 forks source link

Can't seem to get map line to render #409

Closed gabaum10 closed 6 years ago

gabaum10 commented 6 years ago

I've built a UI for adding map lines by clicking on the map. I've got it set up so when the user clicks, it updates the appropriate model which in turn renders the data on the map. It works if I render individual map points. However, trying to use the same point data as indices for map lines doesn't seem to work. Take the following template:

<gmap-map
    ref="mapRef"
    :center="realCenter"
    :map-type-id="mapType"
    :zoom="zoom"
    :style="`height: ${height}; width: ${width};`" @click="onMapClick">
    <gmap-marker
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"/>
    <gmap-polyline
      :options="{geodesic:true, strokeColor:'#FF0000'}"
      v-for="(path, index) in lines"
      :key="`line-${index}`"
      :path="path"
      :editable="true"
      @path_changed="updatePolylinePath($event)"/>
  </gmap-map>

Which gives a component with this data: mappolyline

however, the map doesn't show any line data, even though there should clearly be a 5 vertex line. Any idea what I'm doing wrong here? Am I missing something obvious?

gabaum10 commented 6 years ago

Nevermind, was using the wrong google object. This is working.