DotNetBrowser-Examples/csharp/winforms/GoogleMaps/map.html at v4 · TeamDev-IP/DotNetBrowser-Examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!--
 *  Copyright © 2026, TeamDev. All rights reserved.
 *
 *  Redistribution and use in source and/or binary forms, with or without
 *  modification, must retain the above copyright notice and the following
 *  disclaimer.
 *
 *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 *  "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 *  LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 *  A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 *  OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 *  SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 *  LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 *  DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 *  THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 *  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 *  OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>Google Maps</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>

<!--
    The inline bootstrap loader recommended by Google. It loads the Maps
    JavaScript API asynchronously and exposes google.maps.importLibrary().

    Replace API_KEY below with a key of your own. This page is loaded from
    disk, so the browser sends no HTTP referrer: a key restricted by HTTP
    referrer is rejected with RefererNotAllowedMapError. Use an unrestricted
    key, or serve the page over HTTP from an origin the key allows.
-->
<script>
    (g => {
        var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary",
            q = "__ib__", m = document, b = window;
        b = b[c] || (b[c] = {});
        var d = b.maps || (b.maps = {}), r = new Set(), e = new URLSearchParams(),
            u = () => h || (h = new Promise(async (f, n) => {
                await (a = m.createElement("script"));
                e.set("libraries", [...r] + "");
                for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
                e.set("callback", c + ".maps." + q);
                a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
                d[q] = f;
                a.onerror = () => h = n(Error(p + " could not load."));
                a.nonce = m.querySelector("script[nonce]")?.nonce || "";
                m.head.append(a);
            }));
        d[l] ? console.warn(p + " only loads once. Ignoring:", g)
             : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n));
    })({
        key: "API_KEY",
        v: "weekly"
    });
</script>

<script>
    // The map is exposed as a global so that the .NET side can obtain it
    // with IFrame.ExecuteJavaScript<IJsObject>("map").
    let map;

    async function initMap() {
        const {Map} = await google.maps.importLibrary("maps");

        // The marker library is imported up front so that the .NET side can
        // construct google.maps.marker.AdvancedMarkerElement right away.
        await google.maps.importLibrary("marker");

        map = new Map(document.getElementById("map"),
            {
                center: {lat: 48.209331, lng: 16.381302},
                zoom: 4,
                // Advanced markers require a map ID. DEMO_MAP_ID is the
                // sandbox ID Google provides for samples; use a map ID of
                // your own in a real application.
                mapId: "DEMO_MAP_ID"
            });

        // Hand the map over to the .NET side. window.external is injected by
        // the InjectJsHandler configured in MainForm.
        window.external.OnMapInitialized(map);
    }

    // Asks Chromium for the current position and reports it back to .NET.
    // The Geolocation permission is granted by the permission handler
    // configured in MainForm.
    function showMyLocation() {
        navigator.geolocation.getCurrentPosition(
            position => {
                const location = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                // Centering the map here rather than from .NET: the .NET
                // callback below runs on the browser thread, which must not be
                // blocked with another JavaScript call.
                map.setCenter(location);
                map.setZoom(14);
                window.external.OnLocationDetected(location.lat, location.lng);
            },
            error => window.external.OnLocationFailed(error.message));
    }

    initMap().catch(error => console.error(error));
</script>
</body>
</html>