OverviewOfficial Website

Google maps library allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

Add Package
  <script src="https://maps.googleapis.com/maps/api/js?key="></script> in +layout.svelte file.
Examples:
Title Javascript
Default Map 

<script>
    import { onMount } from "svelte";

    onMount(() => {
        setTimeout(() => {
            const myLatLng = { lat: -12.043333, lng: -77.028333 };
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 15,
                center: myLatLng,
            });

            // marker
            new google.maps.Marker({
                position: myLatLng,
                map,
                title: "Hello World!",
            });
        }, 500);
    });
</script>

<div id="map" class="gmaps" />
Overlays 

<script>
    import { onMount } from "svelte";
    
    onMount(() => {
        setTimeout(() => {
        const myLatLng = { lat: -12.043333, lng: -77.028333 };
        const map = new google.maps.Map(document.getElementById("mapoverlay"), {
            zoom: 15,
            center: myLatLng,
        });
    
        // Create a custom overlay using OverlayView
        function CustomOverlay(map, position, content) {
            this.map = map;
            this.position = position;
            this.content = content;
            this.div = null;
    
            this.setMap(map);
        }
    
        CustomOverlay.prototype = new google.maps.OverlayView();
    
        CustomOverlay.prototype.onAdd = function () {
            const div = document.createElement("div");
            div.style.position = "absolute";
            div.innerHTML = this.content;
    
            this.div = div;
    
            const panes = this.getPanes();
            panes.overlayLayer.appendChild(div);
        };
    
        CustomOverlay.prototype.draw = function () {
            const overlayProjection = this.getProjection();
            const position = overlayProjection.fromLatLngToDivPixel(this.position);
    
            this.div.style.left = position.x + "px";
            this.div.style.top = position.y + "px";
        };
    
        CustomOverlay.prototype.onRemove = function () {
            this.div.parentNode.removeChild(this.div);
            this.div = null;
        };
    
        // Usage of the custom overlay
        const customOverlay = new CustomOverlay(
            map,
            new google.maps.LatLng(myLatLng.lat, myLatLng.lng),
            '<div class="gmaps-overlay">Lima<div class="gmaps-overlay_arrow above"></div></div>'
        );
        }, 100);
    });
    </script>
    
    <div id="mapoverlay" class="gmaps" />
Street View Panoramas 

<script>
    import { onMount } from "svelte";
    
    onMount(() => {
        setTimeout(() => {
        const myLatLng = { lat: 42.3455, lng: -71.0983 };
        // Create a panorama
        const panorama = new google.maps.StreetViewPanorama(
            document.getElementById("Panorama"),
            {
            position: myLatLng,
            pov: { heading: 165, pitch: 0 },
            zoom: 1,
            }
        );
        }, 100);
    });
    </script>
    
    <div id="Panorama" class="gmaps" />
Map Types 

<script>
    import { onMount } from "svelte";
    
    onMount(() => {
        setTimeout(() => {
        const map = new google.maps.Map(document.getElementById("maptype"), {
            center: { lat: -12.043333, lng: -77.028333 },
            zoom: 16,
            mapTypeControlOptions: {
            mapTypeIds: ["hybrid", "roadmap", "satellite", "terrain", "osm"],
            },
        });
    
        map.mapTypes.set(
            "osm",
            new google.maps.ImageMapType({
            getTileUrl: function (coord, zoom) {
                return (
                "https://a.tile.openstreetmap.org/" +
                zoom +
                "/" +
                coord.x +
                "/" +
                coord.y +
                ".png"
                );
            },
            tileSize: new google.maps.Size(256, 256),
            name: "OpenStreetMap",
            maxZoom: 18,
            })
        );
    
        map.setMapTypeId("osm");
        }, 100);
    });
    </script>
    
    <div id="maptype" class="gmaps" />
© Skote.