Google Maps

Overview

A declarative Google Map Svelte component using Svelte, lazy-loading dependencies and current-location finder.

Import Link

add link at src/app.html file

<script defer async src="//maps.googleapis.com/maps/api/js?key=AIzaSyCtSAR45TFgZjOs4nBFFZnII-6mMHLfSYI&callback=initMap"></script>

Remove Link

remove link at src/app.html file

<script defer async src="//maps.googleapis.com/maps/api/js?key=AIzaSyCtSAR45TFgZjOs4nBFFZnII-6mMHLfSYI&callback=initMap"></script>

Examples

<script>
  import Map from "../../Components/Common/Map.svelte";
  import { Card, CardBody, CardHeader, Col, Container, Row } from 'sveltestrap';
  import BreadCrumb from '../../Components/Common/BreadCrumb.svelte';
</script>

<div class="page-content">
    <Container fluid>
        <BreadCrumb title="Google Maps" pageTitle="Maps" />

        <Row>
            <Col lg={6}>
                <Card>
                    <CardHeader>
                        <h4 class="card-title mb-0">Markers</h4>
                    </CardHeader>
                    <CardBody>
                        <div style="height: 269px">
                            <Map latitude={-34.397} longitude={150.644} />
                        </div>
                    </CardBody>
                </Card>
            </Col>
        </Row>
    </Container>
</div>