Add example `crossing_point`

<template>

  <div>

    <button @click="showMapMethod">Show Map</button>

  <div style="width: 90%; height: 90%">

    <button @click="showMapMethod();">Show Map</button>

    <GoogleMap

    v-if="showMap"

    api-key='AIzaSyDGn4q3xBEYl9Hqvn6Beqjk4yZSVGrL1bE' style="width: 100%; height: 700px" :center="center" :zoom="15">

    api-key="AIzaSyDGn4q3xBEYl9Hqvn6Beqjk4yZSVGrL1bE"

    :center="center"

    :zoom="3"

    style="width: 100%; height: 90%"

    >

      <Polyline :options="flightPath" />

      <Polyline :options="flightPath2" />

      <Circle :options="circle" />

      <Marker :options="markerOptions" />

    </GoogleMap>

  </div>

<script>

import { defineComponent } from "vue";

import { GoogleMap, Marker } from "vue3-google-map";

import { useRoute } from 'vue-router';

import { GoogleMap, Polyline, Circle, Marker } from "vue3-google-map";

// import axios from 'axios';

// console.log(process.env.VUE_APP_GOOGLE_MAPS_API_KEY)

let result

result =

{

  "crossing_point": [

    { lat: 1.5745, lng: 190.326 }

  ],

  "route1": [

    { "lat": 37.772, "lng": -122.214 },

    { "lat": 21.291, "lng": -157.821 },

    { "lat": -18.142, "lng": 178.431 },

    { "lat": -27.467, "lng": 153.027 }

  ],

  "route2": [

    { "lat": 37.772, "lng": 153.027 },

    { "lat": 21.291, "lng": 178.431 },

    { "lat": -18.142, "lng": -157.821 },

    { "lat": -27.467, "lng": -122.214 }

  ]

}

// console.log(result);

  // https://github.com/inocan-group/vue3-google-map#marker

  // https://developers.google.com/maps/documentation/javascript/reference/marker?hl=ko#Marker

export default defineComponent({

  components: { GoogleMap, Marker },

  components: { GoogleMap, Polyline, Circle, Marker },

  data()  {

    return {

    };

  },

  methods: {

    showMapMethod() {

      this.showMap = true;

    },

  },

  setup() {

      // Used by Copilot

      const route = useRoute();

    // console.log(result);

    const center = result.crossing_point[0];

      // Default location as Gyeongbokgung Palace

      const lat = route.query.lat ? parseFloat(route.query.lat) : 37.579617;

      const lng = route.query.lng ? parseFloat(route.query.lng) : 126.977041;

    let flightPlanCoordinates = result.route1;

    let flightPlanCoordinates2 = result.route2;

      const center = { lat: lat, lng: lng };

      const markerOptions = { position: center, label: "T", title: "TEST TITLE" };

    const circle = {

      center: center,

      radius: Math.sqrt(8405837) * 1000,

      strokeColor: "#FF00FF",

      strokeOpacity: 0.8,

      strokeWeight: 2,

      fillColor: "#FF00FF",

      fillOpacity: 0.35,

    };

      return { center, markerOptions };

    },

    const markerOptions = { position: center, label: "D", title: "DESTINY" };

    methods: {

      showMapMethod() {

        this.showMap = true;

      },

    const flightPath = {

      path: flightPlanCoordinates,

      geodesic: true,

      strokeColor: "#FF0000",

      strokeOpacity: 1.0,

      strokeWeight: 2,

    };

    const flightPath2 = {

      path: flightPlanCoordinates2,

      geodesic: true,

      strokeColor: "#0000ff",

      strokeOpacity: 1.0,

      strokeWeight: 2,

    };

  return { center, flightPath, flightPath2, circle, markerOptions };

  },

});

</script>

 No newline at end of file