MapKit/gettingstarted.html at master · DPandaman/MapKit · 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Getting Started: MapKit</title>
  <link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
  <!-- Header -->
  <header>
    <div class="container">
      <h1>MapKit: Getting Started with Secure API Keys</h1>
      <nav id="navbar">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="gettingstarted.html">Getting Started</a></li>
          <li><a href="index.html#templates">Templates</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Intro -->
  <section class="gs-intro">
    <div class="gs-container">
      <h2>Set Up Your Google Maps API Key Securely</h2>
      <p>Make sure your API keys are safe and secure before starting your projects!</p>
    </div>
  </section>

  <!-- Steps -->
  <section class="gs-steps">
    <div class="gs-container">

      <div class="gs-step">
        <div class="gs-step-number">1</div>
        <div class="gs-step-content">
          <h3>Get a Google Maps API Key</h3>
          <p>
            Go to the <a href="https://console.cloud.google.com/" target="_blank" rel="noopener noreferrer">Google Cloud Console</a>, create a new project, and enable the <strong>Maps JavaScript API</strong>.
          </p>
          <!-- <p>
            <strong>Direct link:</strong> <a href="https://console.cloud.google.com/apis/library/maps-backend.googleapis.com" target="_blank" rel="noopener noreferrer">Enable Maps API</a>
          </p> -->
        </div>
      </div>

      <div class="gs-step">
        <div class="gs-step-number">2</div>
        <div class="gs-step-content">
          <h3>Restrict Your API Key</h3>
          <p>In the Cloud Console under <em>Credentials</em>, add HTTP referrer restrictions (e.g., <code>websitename.com</code>) and enable only the required APIs for your project.</p>
        </div>
      </div>

      <div class="gs-step">
        <div class="gs-step-number">3</div>
        <div class="gs-step-content">
          <h3>Store the API Key in a Server Environment Variable</h3>
          <p>Create a <code>.env</code> file in your backend project root and add:</p>
          <pre><code>GOOGLE_MAPS_API_KEY = YOUR_API_KEY_HERE</code></pre>
          <p>Make sure to add <code>.env</code> to your <code>.gitignore</code> to avoid committing secrets.</p>
        </div>
      </div>

      <div class="gs-step">
        <div class="gs-step-number">4</div>
        <div class="gs-step-content">
          <h3>Serve the API Key Securely via Your Backend</h3>
          <p>Create a backend API endpoint that returns the API key securely (example using Node.js & Express):</p>
          <pre><code>
require('dotenv').config();
const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname)));

app.get('/api-key', (req, res) => {
  res.json({ key: process.env.GOOGLE_MAPS_API_KEY});
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});
          </code></pre>
        </div>
      </div>

      <div class="gs-step">
        <div class="gs-step-number">5</div>
        <div class="gs-step-content">
          <h3>Load the Google Maps API Script Dynamically on the Frontend</h3>
          <p>Fetch the API key from your backend and add it to the bottom of your script:</p>
          <pre><code>
async function loadGoogleMaps() {
  try {
    const response = await fetch('/api-key');
    if (!response.ok) {
      throw new Error('Failed to fetch API key');
    }
    const data = await response.json();

    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${data.key}&callback=initMap&libraries=places`;
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);
  } catch (error) {
    console.error("Error loading Google Maps API: ", error);
  }
}

loadGoogleMaps();
          </code></pre>
        </div>
      </div>

      <div class="gs-step">
        <div class="gs-step-number">6</div>
        <div class="gs-step-content">
          <h3>Keep Your API Key Safe</h3>
          <ul id="tipsforAPI">
            <li>Never commit your API key directly to public repositories</li>
            <li>Use HTTPS for your website</li>
            <li>Regularly review and restrict API key usage in Google Cloud Console</li>
            <li>Always always always follow these steps. Better safe than sorry!</li>
          </ul>
        </div>
      </div>

    </div>
  </section>

  <footer id="footer">
    <div class="container">
      <p>&copy; 2025 MapKit</p>
    </div>
  </footer>
</body>
</html>