Commit 74dc164c authored by Fawad Mirzad's avatar Fawad Mirzad
Browse files

Add info window component

parent 182b6df2

components/InfoWindow.vue

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

  <slot></slot>

</template>
 
 No newline at end of file

components/Marker.vue

+12 −5
Original line number Diff line number Diff line 
<template>

  <div>marker</div>

  <div ref="markerRef" >

    <slot></slot>

  </div>

</template>



<script>

import { inject } from "vue";

import {inject, ref} from "vue";



export default {

  props: {
@@ -19,6 +21,8 @@ export default { 
    }

  },

  setup(props) {

    const markerRef = ref();



    const mapPromise = inject(

        "mapPromise"

    );
@@ -26,8 +30,6 @@ export default { 
    if (mapPromise) {

      mapPromise.then((googleMap) => {

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

        console.log(props.location.lat)

        console.log(props.location.lng)

        const options = {

          position: new google.maps.LatLng(

              props.location.lat,
@@ -43,12 +45,17 @@ export default { 
          ...options,

        });

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

          infoWindow.setContent(props.infoWindow);

          infoWindow.setContent(markerRef.value.innerHTML);

          infoWindow.open(googleMap, marker);

        });

      });

    }



    return {

      markerRef,

    };





    return {};

  }

};

index.js

+2 −0
Original line number Diff line number Diff line
@@ -3,6 +3,7 @@ import Marker from './components/Marker' 
import Circle from './components/Circle'

import Polygon from './components/Polygon'

import Rectangle from './components/Rectangle'

import InfoWindow from './components/InfoWindow'



export default {

    install: (app, options) => {
@@ -11,6 +12,7 @@ export default { 
        app.component('Circle', Circle)

        app.component('Polygon', Polygon)

        app.component('Rectangle', Rectangle)

        app.component('InfoWindow', InfoWindow)

        app.provide('apiKey', options.apiKey)

        app.provide('mapIds', options.mapIds)

    }