JSFiddle - React, Tailwind, and code Playground

by air_hadoken

HTML

<script src="https://www.bing.com/api/maps/mapcontrol"></script>
<p>
<a id="fix_a" href="javascript://">Click to fix.</a>
<a id="break" href="javascript://">Click to break.</a>
<a id="break_b" href="javascript://">Click to break (alternate).</a>
</p>
<div id="bingmap">

</div>

CSS

body {
  display: flex;
  flex-direction: column;
  width: 600px;
  height: 600px;
}

#bingmap {
  height: 400px;
  width: 400px;
  display: block;
  position:absolute;
  top: 50px;
  left: 0px;
}

JavaScript

var map = new Microsoft.Maps.Map(document.getElementById('bingmap'), {
  credentials: 'Put your Bing Maps access key here'
});

function makePushpin() {
	map.entities.push(new Microsoft.Maps.Pushpin(
    map.getCenter(), 
    { title: "a point", 
     subTitle: "that stretches",
     anchor: new Microsoft.Maps.Point(5, 20),
     icon: "https://maps.google.com/mapfiles/ms/micons/lightblue.png"
    }
  ));
}
makePushpin();

document.getElementById("fix_a").addEventListener("click", function() {
	document.body.style.display="block";
  map.entities.pop();
  makePushpin();
}, false);

document.getElementById("break_b").addEventListener("click", function() {
	document.body.style.display="flex";
	document.body.style["flex-direction"]="row";
  map.entities.pop();
  makePushpin();
}, false);

document.getElementById("break").addEventListener("click", function() {
	document.body.style.display="flex";
	document.body.style["flex-direction"]="column";
  map.entities.pop();
  makePushpin();
}, false);