google-maps-svelte

This library is use to render google maps in svelte application. We will have to pass 'latLong' as an input to display google maps in our application. in case we want to add markers of our map neary by locations we will have to pass markers data as per the below defined format. when user click on any particular marker an event will execute and user will notify on which marker user has been clicked

Usage no npm install needed!

<script type="module">
  import googleMapsSvelte from 'https://cdn.skypack.dev/google-maps-svelte';
</script>

README

Documentation

This library is use to render google maps in svelte application. We will have to pass 'latLong' as an input to display google maps in our application. in case we want to add markers of our map neary by locations we will have to pass markers data as per the below defined format. when user click on any particular marker an event will execute and user will notify on which marker user has been clicked

Installation

import google maps javacript in our publish/index.html file

<script src="https://maps.googleapis.com/maps/api/js?key=googleapikey&**callback=initMap"></script>

npm install google-maps-svelte

import GoogleMaps from "google-maps-svelte";

in component html we can use

<GoogleMaps bind:latLong bind:markers on:markerClicked={markerClicked}/>

latLong config format

latLong = {
    lat: 'your latitide',
    long: 'your longitude'
  };

markers config format

markers = [
    {
      lat: 'marker latitude',
      long: 'marker longitude',
      labelDetails: {
        text: 'Marker Text display on marker this is required',
        fontWeight: 'normal',
        fontSize: '12px',
        color: 'white'
      }
    }
  ];

Inputs

Input Type Required/Optional Uses
latLong object required We will pass lat/long to display map of that particular area
markers array optional We will pass as an array in case we want to display nearby by markers in that particular map

Events

Output Uses
markerClicked This emitter will trigger when user click on any particular marker and return that particular marker information