API tools faq
paste
soknaly

KOI Map

soknaly
Nov 25th, 2014
79
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.77 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>KOI's Location</title>
  8.     <link href="https://www.dropbox.com/s/r2cv8njird0d1dt/bootstrap.min.css?raw=1" rel="stylesheet">
  9.  
  10.     <style>
  11.         @font_face{
  12.             font-family: Helvetica;
  13.             src: url(https://www.dropbox.com/s/fpy3chz65pvmduq/HelveticaNeueThn.ttf?raw=1);
  14.         }
  15.         html, body, #map-canvas {
  16.                 height: 100%;
  17.                 margin: 0px;
  18.                 padding: 0px;
  19.                 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  20.         }
  21.         #map-canvas,.border{
  22.             border: 1px solid;
  23.             border-radius: 2px;
  24.             border-left-color: rgb(223,224,228);
  25.             border-right-color: rgb(223,224,228);
  26.             border-top-color: rgb(229,230,233);
  27.             border-bottom-color: rgb(208,209,213);
  28.         }
  29.         .border{
  30.             background-color: #ffffff;
  31.         }
  32.         body{
  33.             background-color: #e9eaed;
  34.         }
  35.         .row{
  36.             margin-top:10px;
  37.             margin-bottom: 10px;
  38.         }
  39.         img{
  40.             padding: 15px;
  41.             border-radius: 5px;
  42.         }
  43.         p{
  44.             line-height:7px;
  45.         }
  46.         .col-sm-6{
  47.                 padding-right: 0px;
  48.         }
  49.         h3,strong{
  50.             font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  51.             font-size:16px;
  52.         }
  53.         li{
  54.             padding-bottom: 10px;
  55.             font-size: 12px;
  56.         }
  57.         .address{
  58.           width:30%;
  59.         }
  60.         .map,.image{
  61.             width: 35%;
  62.         }
  63.         iframe{
  64.            
  65.             padding-top:15px;
  66.             padding-bottom: 15px;
  67.         }
  68.     </style>
  69.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  70.     <script>
  71.         function initialize() {
  72.               var mapOptions = {
  73.                 zoom: 13,
  74.                 center: new google.maps.LatLng(11.5576032, 104.9040542)
  75.               }
  76.               var map = new google.maps.Map(document.getElementById('map-canvas'),
  77.                                             mapOptions);
  78.             setMarkers(map,KOIs);
  79.         }
  80.        
  81.         function setMarker(map,lat,lng){
  82.             var image={
  83.                 url: 'https://www.dropbox.com/s/lht62fjxhcizxv6/KOI.png?raw=1',
  84.                 size: new google.maps.Size(20, 36),
  85.                 origin: new google.maps.Point(0,0),
  86.                 anchor: new google.maps.Point(10, 18)
  87.             };
  88.             var latLng=new google.maps.LatLng(lat,lng);
  89.             var marker=new google.maps.Marker({
  90.                 position:latLng,
  91.                 map:map,
  92.                 icon:image,
  93.             });
  94.         }
  95.         var KOIs = [
  96.                     ['KOI Vattanac Capital', 11.5734294, 104.9185064, 1],
  97.                     ['KOI Mao Tse Tung', 11.5466401, 104.9085284, 2],
  98.                     ['KOI IFL', 11.567905, 104.893615, 3]
  99.                    ];
  100.         var contentString='<p>KOI IFL<p>';
  101.         function setMarkers(map, locations) {
  102.           for (var i = 0; i < locations.length; i++) {
  103.            var KOI = locations[i];
  104.            setMarker(map,KOI[1],KOI[2]);
  105.          }
  106.        }
  107.        google.maps.event.addDomListener(window, 'load', initialize);
  108.        function zoomToLatAndLng(lat,lng){
  109.            var mapOptions = {
  110.                zoom: 19,
  111.                center: new google.maps.LatLng(lat, lng)
  112.            }
  113.            var map=new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
  114.            setMarkers(map,KOIs);
  115.        }
  116.        
  117.    </script>
  118.  
  119. </head>
  120. <body>
  121.     <div class="container">
  122.         <div class="row">
  123.             <div class="span8">
  124.                 <div id="map-canvas" style="height: 350px"></div>
  125.             </div>
  126.         </div>
  127.         <div class="row border">
  128.             <div class="col-sm-4 address">
  129.                 <h3>KOI IFL</h3>
  130.                 <ul class="list-unstyled">
  131.                     <li style="font-size:11px">
  132.                         TEL: 092 699 777
  133.                     </li >
  134.                     <li style="font-size:11px">
  135.                         Operation Hour: 09:00AM-09:00PM
  136.                     </li>
  137.                     <li>
  138.                         <a href="#" onclick="zoomToLatAndLng(11.5678439, 104.8936495);">
  139.                             <p>120B Russian Confederation Blvd,</p>
  140.                             <p>Sangkat Tuek L'ak Ti Mouy,</p>
  141.                             <p>Khan Toul Kork,</p>
  142.                             <p>Phnom Penh, Cambodia</p>
  143.                         </a>
  144.                     </li>
  145.                 </ul>
  146.             </div>
  147.             <div class="col-sm-4 image">
  148.                     <img class="img-responsive" src="https://www.dropbox.com/s/e5ikgqowx74fr54/IFL.jpg?raw=1"alt="">
  149.             </div>
  150.             <div class="col-sm-4 map">
  151.                 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3908.7760769211864!2d104.89361500000001!3d11.567904!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x310951754759b31d%3A0xc70969637e98c9f9!2sKOI+Cafe+IFL!5e0!3m2!1sen!2skh!4v1416720902225" width="100%" height="232px" frameborder="0" style="border:0"></iframe>
  152.             </div>
  153.         </div>
  154.         <div class="row border">
  155.             <div class="col-sm-4 address">
  156.                 <h3>KOI Vattanac Capital</h3>
  157.                 <ul class="list-unstyled">
  158.                     <li style="font-size:11px">
  159.                         TEL: 092 880 880
  160.                     </li>
  161.                     <li style="font-size:11px">
  162.                         Operation Hour:09:00AM-09:00PM
  163.                     </li>
  164.                     <li>
  165.                         <a href="#" onclick="zoomToLatAndLng(11.5734294, 104.9185064);">
  166.                             <p> 66 Preah Monivong Blvd,</p>
  167.                             <p> Sangkat Wat Phnom,</p>
  168.                             <p> Khan Daun Penh,</p>
  169.                             <p> Phnom Penh, Cambodia</p>
  170.                         </a>
  171.                     </li>
  172.                 </ul>
  173.             </div>
  174.             <div class="col-sm-4 image">
  175.                     <!-- paste the link of Mao Tse Tung Image here in src="...link of MZT...."-->
  176.                     <img class="img-responsive" src="https://www.dropbox.com/s/l4r35idlyu2u86l/VTC.jpg?raw=1"alt="">
  177.             </div>
  178.             <div class="col-sm-4 map">
  179.                 <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3908.698921945341!2d104.9185!3d11.573428!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31095143acdafea1%3A0x5e5bdc05192899c9!2sKOI+Cafe+VTC!5e0!3m2!1sen!2skh!4v1416721048292" width="100%" height="232px" frameborder="0" style="border:0"></iframe>
  180.             </div>
  181.         </div>
  182.         <div class="row border">
  183.             <div class="col-sm-4 address">
  184.                 <h3>KOI Mao Tse Tung</h3>
  185.                 <ul class="list-unstyled">
  186.                     <li style="font-size:11px">
  187.                         TEL: 092 880 777
  188.                     </li>
  189.                     <li style="font-size:11px">
  190.                         Operation Hour: 09:00AM-09:00PM
  191.                     </li>
  192.                     <li>
  193.                         <a href="#" onclick="zoomToLatAndLng(11.5466401, 104.9085284);">
  194.                                 <p> 136DEo Mao Tse Tung Blvd,</p>
  195.                                 <p>Sangkat Tumnub Tirk,</p>
  196.                                 <p> Khan Chamkarmon,</p>
  197.                                 <p> Phnom Penh, Cambodia</p>
  198.                         </a>
  199.                     </li>
  200.                 </ul>
  201.             </div>
  202.             <div class="col-sm-4 image">
  203.                     <!-- paste the link of Mao Tse Tung Image here in src="...link of   MZT...."-->
  204.                     <img class="img-responsive" src="https://www.dropbox.com/s/964orpgs5nnsdpo/MZT.jpg?raw=1" alt="">
  205.             </div>
  206.             <div class="col-sm-4 map">
  207.                 <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3909.0720818488303!2d104.90849000000001!3d11.546687!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3109511dcddddaad%3A0xd75a54599f1767d8!2sKOI+Caf%C3%A9+Mao+Tse+Tung!5e0!3m2!1sen!2skh!4v1416721080773" width="100%" height="232px" frameborder="0" style="border:0"></iframe>
  208.             </div>
  209.         </div>
  210.     </div>
  211.     <script src="https://www.dropbox.com/s/vp2tsstc2mcdzyx/bootstrap.min.js?raw=1"></script>
  212.     <script src="https://www.dropbox.com/s/tpuou6ddc2655hw/jquery.js?raw=1"></script>
  213. </body>
  214. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!