Commit 3d33e102 authored by Fawad Mirzad's avatar Fawad Mirzad
Browse files

Add info window support

parent ca79bf75

components/Marker.vue

+19 −8
Original line number Diff line number Diff line 
<template>

  <div>marker</div>

  <div>

    <slot>marker</slot>

    <div ref="commentContainerRef" v-if="defaultSlot" :is="defaultSlot">

      <component :is="defaultSlot"></component>

    </div>

  </div>



</template>



<script>

import { inject } from "vue";

import { inject, ref } from "vue";

import {fitMapToMarkers} from "@fawmi/vue-google-maps/utils/center-markers";



const commentContainerRef = ref(null);

export default {

  props: {

    geoCoordinates: {
@@ -17,7 +24,7 @@ export default { 
      default: false

    }

  },

  setup(props) {

  setup(props, { slots }) {

    const mapPromise = inject(

        "mapPromise"

    );
@@ -25,7 +32,6 @@ export default { 
    if (mapPromise) {

      mapPromise.then((googleMap) => {

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



        props.geoCoordinates.forEach( geoCoordinate => {

          let marker = new google.maps.Marker({

            position: new google.maps.LatLng(
@@ -36,8 +42,10 @@ export default { 
          });



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

            infoWindow.setContent(`hallo`);

            if (slots.default) {

              infoWindow.setContent(commentContainerRef.value.innerHTML);

              infoWindow.open(googleMap, marker);

            }

          });

        });
@@ -47,7 +55,10 @@ export default { 
      });

    }



    return {};

    return {

      defaultSlot: slots.default,

      commentContainerRef

    };

  }

};

</script>

docs/src/components/infow-window.md

0 → 100755
+35 −0
Original line number Diff line number Diff line 
# Info Window



## Create



You can create info window by passing custom HTML or Vue components as the child of `Marker` component. 

```vue

  <GoogleMap>

    <Marker

        :geoCoordinates="[

          {

            lat: 51.2432981,

            lng: 6.7950981

          }

      ]"

    >

    <div>I am info window. I appear, when you click a marker</div>

  </Marker>

  </GoogleMap>

```



## Center markers automatically

To center markers so that all the markers are visible, use:

```vue

  <GoogleMap>

    <Marker

        :centerAutomatically="false"

        :geoCoordinates="[

          {

            lat: 51.2432981,

            lng: 6.7950981

          }

      ]"

    />

  </GoogleMap>

```