Commit 8e0792b9 authored by Fawad Mirzad's avatar Fawad Mirzad
Browse files

Initial commit

parents

.gitignore

0 → 100644
+2 −0
Original line number Diff line number Diff line 
.idea
 
 No newline at end of file

components/Circle.vue

0 → 100644
+39 −0
Original line number Diff line number Diff line 
<template>

  <div>Cirlce</div>

</template>



<script >

import { inject } from "vue";

export default {

  props: {

    position: {

      required: true

    },

    radius: {

      required: true

    }

  },

  setup(props) {

    const mapPromise = inject(

      "mapPromise"

    );



    if (mapPromise) {

      mapPromise.then((googleMap) => {

        new google.maps.Circle({

          strokeColor: "red",

          strokeOpacity: 0.8,

          strokeWeight: 2,

          fillColor: "#FF0000",

          fillOpacity: 0.35,

          map: googleMap,

          center: new google.maps.LatLng(props.position.lat, props.position.lng),

          radius: props.radius

        });

      });

    }



    return {};

  }

};

</script>

components/Map.vue

0 → 100644
+72 −0
Original line number Diff line number Diff line 
<template>

  <div id="map" ref="mapContainer">

    <slot></slot>

  </div>

</template>



<script>

import { Loader } from "../utils/load-google-maps";

import { ref, provide } from "vue";

export default {

  props: {

    center: {

      required: false

    },

    zoom: {

      type: Number,

      default: 12

    },

    mapTypeId: {

      default: "terrain"

    },

    style: {

      default: "width: 500px; height: 300px"

    },

    options: {

      zoomControl: true,

      mapTypeControl: false,

      scaleControl: false,

      streetViewControl: false,

      rotateControl: false,

      fullscreenControl: true,

      disableDefaultUI: false

    }

  },

  setup: function(props) {

    const mapContainer = ref(null);



    const mapsLoader = new Loader({

      apiKey: "",

      version: "weekly",

      libraries: [

        "places",

        "drawing",

        "geometry",

        "visualization",

        "localContext"

      ]

    });



    const mapPromise = mapsLoader.load().then(() => {

      const map = new google.maps.Map(mapContainer.value, {

        zoom: props.zoom,

        center: new google.maps.LatLng(38.423733, 27.142826),

        mapTypeId: "terrain"

      });

      return map;

    });



    provide("mapPromise", mapPromise);



    return {

      mapContainer

    };

  }

};

</script>



<style>

#map {

  height: 80vh;

}

</style>

components/Marker.vue

0 → 100644
+42 −0
Original line number Diff line number Diff line 
<template>

  <div>marker</div>

</template>



<script>

import { inject } from "vue";



export default {

  props: {

    location: {

      required: true

    }

  },

  setup(props) {

    const mapPromise = inject(

        "mapPromise"

    );



    if (mapPromise) {

      mapPromise.then((googleMap) => {

        const infoWindow = new google.maps.InfoWindow();



        console.log(props.location)

        const marker = new google.maps.Marker({

          position: new google.maps.LatLng(

              props.location.lat,

              props.location.lng

          ),

          map: googleMap

        });



        marker.addListener("click", (event) => {

          infoWindow.setContent(`hallo`);

          infoWindow.open(googleMap, marker);

        });

      });

    }



    return {};

  }

};

</script>

components/Polygon.vue

0 → 100644
+35 −0
Original line number Diff line number Diff line 
<template>

  <div>marker</div>

</template>



<script >

import { inject } from "vue";

export default {

  props: {

    coords: {

    }

  },

  setup(props) {



    const mapPromise = inject(

      "mapPromise"

    );



    if (mapPromise) {

      mapPromise.then((googleMap) => {

        const bermudaTriangle = new google.maps.Polygon({

          paths: props.coords,

          strokeColor: "#FF0000",

          strokeOpacity: 0.8,

          strokeWeight: 2,

          fillColor: "#FF0000",

          fillOpacity: 0.35

        });

        bermudaTriangle.setMap(googleMap);

      });

    }



    return {};

  }

};

</script>