CODEWITHSUNDEEP
javascripthtmlnode.jsgoogle-mapsexpress
Sam
Sam

Reputation: 87

Google Maps API using Express and Node.js

I'm trying to create a basic web app using the google maps API with express/node. Currently my three files are as follows:

server.js 

const express = require('express');
const bodyParser = require('body-parser');
const app = express()

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs')

// Initialize and add the map
function initMap() {
    // The location of Uluru
    var uluru = {
      lat: -25.344,
      lng: 131.036
    };
    // The map, centered at Uluru
    var map = new google.maps.Map(
      document.getElementById('map'), {
        zoom: 4,
        center: uluru
      });
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

app.get('/', function (req, res) {
  res.render('index');
})

app.post('/', function (req, res) {
    res.render('index');
  })

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

style.css

#map {
    height: 400px; 
    width: 100%; 
   }

index.html 

<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API&callback=initMap">
</script>

When i run the app the error returned is "initMap is not a function". I have been reading through examples online but everything i have tried has not worked. I would like to keep as little javascript away from my HTML file as possible.

Upvotes: 1

Views: 21638

Answers (2)

saAction
saAction

Reputation: 2065

There is nothing wrong with your code

It is working fine, check below:

Solution : apply initMap() function to client side javascript file, not in server.js

function initMap() {
    // The location of Uluru
    var uluru = {
        lat: -25.344,
        lng: 131.036
    };
    // The map, centered at Uluru
    var map = new google.maps.Map(
        document.getElementById('map'), {
            zoom: 4,
            center: uluru
        });
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });
}
#map {
    height: 400px; 
    width: 100%; 
}
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=_____&callback=initMap">
</script>


<h3>My Google Maps Demo</h3>
<div id="map"></div>

Note : NEVER SHARE YOUR API-Key to anyone!

Upvotes: 2

Sebastian Bergl&#246;nn
Sebastian Bergl&#246;nn

Reputation: 4278

IMPORANT: Do not show your API-key. People can take it and use it for their own, and you can get a huge invoice.

What you are doing currently is creating markers in Node.js, which is backend. The library that you use (maps.googleapis.com) is used on the frontend. So what you should do is a new javascript file that you have referenced in the HTML-file.

Example:

index.html

<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap">
</script>
<script>
function initMap() {
    // The location of Uluru
    var uluru = {
      lat: -25.344,
      lng: 131.036
    };
    // The map, centered at Uluru
    var map = new google.maps.Map(
      document.getElementById('map'), {
        zoom: 4,
        center: uluru
      });
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>

If you dont want javascript inline, create a new file in the same directory as index.html, and reference it with <script src="script.js"></script>

I hope this will help you

Upvotes: 1

Related Questions