javascript - Google Maps API using Express and Node.js - Stack Overflow

admin管理员组

文章数量:1356815

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=";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.

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./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.

• javascript
• html
• node.js
• google-maps
• express

Share Improve this question Follow edited Aug 28, 2018 at 22:19 Sam asked Aug 28, 2018 at 10:50 SamSam 8711 gold badge11 silver badge1111 bronze badges 1

• You need to write the function initMap in your frontend and not in backend. – Faizuddin Mohammed Commented Aug 28, 2018 at 10:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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./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!

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.) 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./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

本文标签： javascriptGoogle Maps API using Express and NodejsStack Overflow