Commit ca79bf75 authored by Fawad Mirzad's avatar Fawad Mirzad
Browse files

Improve marker and map components

parent 34dbed6f

components/Map.vue

+6 −1
Original line number Diff line number Diff line
@@ -7,6 +7,7 @@ 
<script>

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

import { ref, provide, inject } from "vue";

import {fitMapToMarkers} from "../utils/center-markers";



export default {

  props: {
@@ -26,6 +27,9 @@ export default { 
    disableDefaultUI: {

      type: Boolean,

    },

    geoCoordinates: {

      default: [],

    },

    options: {

      zoomControl: true,

      mapTypeControl: true,
@@ -71,9 +75,10 @@ export default { 
        zoom: props.zoom,

        style: props.style,

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

        mapTypeId: "terrain",

        mapTypeId: props.mapTypeId,

        ...uiOptions

      });



      return map;

    });

components/Marker.vue

+24 −13
Original line number Diff line number Diff line
@@ -4,11 +4,17 @@ 


<script>

import { inject } from "vue";

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



export default {

  props: {

    location: {

      required: true

    geoCoordinates: {

      required: true,

      default: []

    },

    centerAutomatically: {

      required: false,

      default: false

    }

  },

  setup(props) {
@@ -20,11 +26,11 @@ export default { 
      mapPromise.then((googleMap) => {

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



        console.log(props.location)

        const marker = new google.maps.Marker({

        props.geoCoordinates.forEach(geoCoordinate=> {

          let marker = new google.maps.Marker({

            position: new google.maps.LatLng(

              props.location.lat,

              props.location.lng

                geoCoordinate.lat,

                geoCoordinate.lng

            ),

            map: googleMap

          });
@@ -34,6 +40,11 @@ export default { 
            infoWindow.open(googleMap, marker);

          });

        });



        if (props.centerAutomatically) {

          fitMapToMarkers(props.geoCoordinates, googleMap)

        }

      });

    }



    return {};

docs/src/components/marker.md

0 → 100755
+33 −0
Original line number Diff line number Diff line 
# Marker



## Install



With marker you can show specific locations on the map

```vue

  <GoogleMap>

    <Marker

        :geoCoordinates="[

          {

            lat: 51.2432981,

            lng: 6.7950981

          }

      ]"

    />

  </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>

```

utils/center-markers.js

0 → 100644
+13 −0
Original line number Diff line number Diff line 
export function fitMapToMarkers(geoCoordinates, mapInstance) {

    /* eslint-disable no-undef */

    const bounds = new google.maps.LatLngBounds();

    if (geoCoordinates.length === 1) {

        mapInstance.setCenter({lat: geoCoordinates[0].position.lat, lng: geoCoordinates[0].position.lng});

        mapInstance.setZoom(16);

    } else if (geoCoordinates.length > 0) {

        geoCoordinates.forEach(geoCoordinate => {

            bounds.extend({lat: geoCoordinate.position.lat, lng: geoCoordinate.position.lng});

        });

        mapInstance.fitBounds(bounds);

    }

}