<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PLATEAU DATA</title> <link rel="stylesheet" href="lib/ol6.14.1-dist/ol.css" type="text/css"> <link rel="stylesheet" href="lib/surveyor.css" type="text/css"> <script src="lib/ol6.14.1-dist/ol.js"></script> <script src="lib/jquery-2.1.1.min.js"></script> <script src="citymesh.js" type='text/javascript'></script> <style type="text/css"> #map { width: 98%; height: 720px; } #popup { position: relative; display: inline-block; margin: 1.5em 0; padding: 7px 10px; min-width: 120px; max-width: 100%; color: #555; font-size: 16px; background: #FFF; border: solid 3px #555; box-sizing: border-box; } #popup:before { content: ""; position: absolute; bottom: -24px; left: 50%; margin-left: -15px; border: 12px solid transparent; border-top: 12px solid #FFF; z-index: 2; } #popup:after { content: ""; position: absolute; bottom: -30px; left: 50%; margin-left: -17px; border: 14px solid transparent; border-top: 14px solid #555; z-index: 1; } .popup p { margin: 0; padding: 0; } </style> </head> <body onload='loadMap();'> <div id="wrap"> <div class="header"> <H1><div id='title'></div></H1> <div id='map'></div> </div> </div> <!-- ポップアップ --> <div id='popup' class='ol-popup'> <a href='#' id='popup-closer' class='ol-popup-closer'></a> <div id='popup-content'></div> </div> </body> </html>