Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add HTML Google Maps

See original GitHub issue

I am trying to use HTML Google Maps inside the ‘HTML’ option. Below is my code.

const express = require(‘express’) const app = express(); const nodeHtmlToImage = require(‘node-html-to-image’);

app.get(‘/’, async function (req, res) { const images = await nodeHtmlToImage({ html: <html> <head> <link href="https://fonts.googleapis.com/css?family=Poppins:400,700,900" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4DWWpIHA-o8nFtCCh-IAYwgaUbdUW280"></script> <style> body { font-family: "Poppins"; font-weight: 100; } img { max-width: 100%; } </style> </head> <body> Hello world {{name}}! <div id='map-canvas'></div> <script type="text/javascript"> $(document).ready(function () { var mapOptions = { zoom: 16, // initialize zoom level - the max value is 21 streetViewControl: false, // hide the yellow Street View pegman scaleControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(32.920, -96.773), }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); }); </script> </body> </html>, content: [{ name: ‘Praveen’ }] }); res.writeHead(200, { ‘Content-Type’: ‘image/png’ }); res.end(images[0], ‘binary’); }); app.listen(3000)

I’m able to get the result but the map is not showing in the background.

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

frinyvonnickcommented, Feb 8, 2022

Since it fixed your issue, I close it 👍

1reaction

frinyvonnickcommented, Feb 8, 2022

@colonelEnigma I managed to make it work. Here is the js code:

const express = require("express");
const app = express();
const nodeHtmlToImage = require("node-html-to-image");

app.get("/", async function (req, res) {
  const images = await nodeHtmlToImage({
    html: `<!DOCTYPE html>
<html>
<head>
<link href="styles.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4DWWpIHA-o8nFtCCh-IAYwgaUbdUW280"></script>
</head>
<body>
<div id='container'>
<h1>OMG, this is ON TOP OF THE MAP!</h1>
</div>

<div id='map-canvas' style="height:300px"></div>

<script type="text/javascript">
	$(document).ready(function () {
   var mapOptions = {
      zoom: 16, // initialize zoom level - the max value is 21
      streetViewControl: false, // hide the yellow Street View pegman
      scaleControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(32.920, -96.773),
   };
  new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
});
</script>
</body>
</html>`,
    content: [{ name: "Praveen" }],
  });
  res.writeHead(200, { "Content-Type": "image/png" });
  res.end(images[0], "binary");
});
app.listen(3000);

Since I don’t have the style.css file from you example I had to put a height on the div #map-canvas (see <div id='map-canvas' style="height:300px"></div>) otherwise the map was not displayed because the div’s height was 0.

Here is the result I get running this code: