Proper way to embed google maps?

Get Help
1

I must be doing something wrong, because my setup is showing nada…

My goal is to show the traffic situation in the surroundings of my office and found this script to do so.
When I put it in a plain html-file, it works fine, but I would like to embed the code and then it shows nada.

Do you know how to deal with this issue? That would be awsome :slight_smile:
samplecode.pdf (21.9 KB)
Hereby the complete html-code:


<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <meta charset="utf-8">
 <title>Traffic layer</title>
 <style>
 html, body {
 height: 100%;
 margin: 0;
 padding: 0;
 }
 #map {
 height: 100%;
 }
 </style>
 </head>
 <body>
 <div id="map"></div>
 <script>
 function initMap() {
 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 13,
 center: {lat: 34.04924594193164, lng: -118.24104309082031}
 });
 var trafficLayer = new google.maps.TrafficLayer();
 trafficLayer.setMap(map);
 }
 </script>
 <script async defer

src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
 </script>
 </body>
</html>
2

I think the following will work…

HTML to embed:

<div id="map"></div>

Custom Style Sheets:

<style type="text/css">
#map {
 height: 100%;
 }
</style>

Head content to embed:

<script type="text/javascript">
    function EmbedInit()
    {
        // Init will be called when this page is loaded in the client.
        return;
    }

function initMap() {
 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 13,
 center: {lat: 34.04924594193164, lng: -118.24104309082031}
 });
 var trafficLayer = new google.maps.TrafficLayer();
 trafficLayer.setMap(map);
 }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

You must change YOUR_API_KEY.

3

Hi Dan,

I appreciate your efford in helping me out, but unfortunately this doesn’t seem to work.

Since I don’t see any errormessage, I don’t have a clue what goes wrong.

Is there something else we can try?

Thanks Dan.

Kind regards,
Eric