Bdtjtk

I am using Vue to build a site that takes in some data and displays a google map with markers and circles around the points with the markers.

So far I can create the map with markers perfectly fine, however I have no idea what the proper way to create a circle is with the Vue2-google-maps package, despite having combed through the Documentation for a long time.

Here is the code so far

    <GmapMap

      :center="center"

      :zoom="10"

      class="google-map">

        <GmapMarker

          :key="index"

          v-for="(pin, index) in markers"

          :position="pin.position"

          :icon="pin.icon"

          :clickable="true"

          :draggable="true"

          @click="center=pin.position">

        </GmapMarker>

        <GmapCircle

          :key="index"

          v-for="(pin, index) in markers"

          :center="pin.position"

          :radius="1000"

          :visible="true"

          :fillColor="red"

          :fillOpacity:="1.0">

        </GmapCircle>

    </GmapMap>

Note that markers is a list of markers that is created somewhere else in the code.

If you take out the tags, the code works perfectly fine placing all the markers. I just need to know what the proper tag/object set is for creating a circle.

You are on the right track, GmapCircle component in vue2-google-maps library is intended for creating circles on the map. There are might be several reasons why circles are not getting displayed:

• 
  center property value is invalid, the supported format is {lat: <lat>, lng: <lng>} or google.maps.LatLng value
  


• maybe you could not spot them due to relatively small size (given the provided 2 kilometer diameter, they could be easily missed)?

Regarding fillColor and fillOpacity properties, they need to be passed via options property, e.g. :options="{fillColor:'red',fillOpacity:1.0}"

Anyway the following example demonstrates how to create circles on map via vue2-google-maps

<GmapMap :center="center" :zoom="zoom" ref="map">

  <GmapCircle

    v-for="(pin, index) in markers"

    :key="index"

    :center="pin.position"

    :radius="100000"

    :visible="true"

    :options="{fillColor:'red',fillOpacity:1.0}"

  ></GmapCircle>

</GmapMap>







export default {

  data() {

    return {

      zoom: 5,

      center: { lat: 59.339025, lng: 18.065818 },

      markers: [

        { Id: 1, name: "Oslo", position: { lat: 59.923043, lng: 10.752839 } },

        { Id: 2, name: "Stockholm", position: { lat: 59.339025, lng: 18.065818 } },

        { Id: 3,  name: "Copenhagen", position: { lat: 55.675507, lng: 12.574227 }},

        { Id: 4, name: "Berlin", position: { lat: 52.521248, lng: 13.399038 } },

        { Id: 5, name: "Paris", position: { lat: 48.856127, lng: 2.346525 } }

      ]

    };

  },

  methods: {}

};