こんにちは。現在、node.js上にてgoogle maps apiを使用して、地図を表示させたいと思っております。
具体的にはaxiosを使用してHTTP通信をし、レスポンスをinitMap関数で処理してindex.ejs上で表示させたいと思っております。
しかし、表示させることができなかったため質問させていただきます。解決法やアドバイスなどございましたら、ご教授いただけると幸いです。
解決したいこと
Node.js上で、google maps apiを使用して地図を表示させたい。
エラーコード
ReferenceError: google is not defined
ソースコード
js
1const express = require('express'); 2const router = express.Router(); 3const axios = require('axios'); 4 5const apikey = 'api_key'; 6// クエリーパラメーターにコールバック関数(initMap)を設定しています。 7const URL = 'https://maps.googleapis.com/maps/api/js?key=' + apikey + '&callback=initMap'; 8 9router.get('/', function(req, res, next) { 10 11 axios.get(URL) 12 .then(function initMap() { 13 var map; 14 var target = '<div id="map"></div>'; 15 var empire = {lat: 40.748441, lng: -73.985664}; 16 map = new google.maps.Map(target, { 17 center: empire, 18 zoom: 14 19 }); 20 return map; 21 }) 22 .catch(console.log('エラーです。')); 23 24 const data = { 25 title: 'タイトル', 26 map: map 27 } 28 res.render('index', data); 29}); 30
//index.ejs <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="content-type" content="text/html"> <title><%= title %></title> </head> <body> <style> #map { height: 400px; width: 600px; } </style> //ここにマップを表示させたいです <%= map %> </body> </html>
実行環境
node 16.6.1
ejs 2.6.1
axios 0.21.1
express 4.16.1
あなたの回答
tips
プレビュー