<!DOCTYPE html>
<html>

  <head>
    <!-- leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />

  <style>
   #map {
      height: 600px;
    }
  </style>
  </head>

  <body>
    <div id="map"></div>
    
    
    <!-- Leaflet -->
    <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
    
    <script> //Leaflet map
      var map = L.map('map').setView([50.5, 30.5], 13);
      var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      	maxZoom: 19,
      	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      }).addTo(map);
      
      var marker = L.marker([50.5, 30.5]).addTo(map);

      marker.bindPopup('<iframe frameborder="0" seamless="seamless" width=600px height=400px \
      scrolling="no" src="//plot.ly/~mrmillky/1.embed?autosize=true&link=false"></iframe></div>', {maxWidth: 600});
      
      //<iframe autosize=True frameborder="0" \
      //scrolling="no" src="//plot.ly/~mrmillky/1.embed?autosize=true&link=false"></iframe></div>'
    </script>
    

  </body>

</html>
/* Styles go here */