Simple code to display map of disruption on a website

hello, I want to display a map of London planned road closures and disruptions on my website.

Assuming I have an API key, can anyone just give me the full code of what I need to put in my html file to display an iframe with a map of london and the road closures marked on it?

Thank you.

I also have a google maps api key as well.

i would use the widget, but its discontinued

Welcome.

Well @programmersocks it used to be quite simple to do that sort of thing, but since they introduced the Content-Security-Policy to browsers recently it not possible to this with HTML alone.

It’s not that hard to do, but you will need to be able to

  • load some JavaScript code to do the map bit as a sperate bit of code;
  • be able to modify the headers of your “webpage” that you use for the “widget” that you put in the iframe to implement the Content-Security-Policy

The Javascript is quite simple and kind of starts with something like this…

    this.map = new google.maps.Map(document.getElementById(strVisiblePanel), {
        center: {lat: centre.latitude, lng: centre.longitude},
        zoom: this.defaultZoom,
        mapId: this.myMapID,
        mapTypeControl: false, streetViewControl: false


    });
    this.map.setTilt(this.defaultTilt);
    this.map.setHeading(this.defaultHeading);

this is great. would you perhaps be able to furnish me with a codepen of the thing? to copy paste in to my main.js etc.

Perhaps for a fee? :roll_eyes: