背景や背景としての地図（リーフレットやグーグルマップ）

Question

私は今、1ページのウェブサイトを作成しています。地図上に「連絡先」セクションを追加し、背景として設定して、フロートして地図にしますそのドラッグテーブルの後ろに置かれていたり、背中に置かれているものは受け入れ可能です。また、私はgoogle map apiとleafletjsを使用しているので、私はそれらのいずれかを使用することを好むので、私はいかなる提案も受け入れます。座標14.2973°Nを考える

、121.0392°Eと、以下のセクションの接触：

<!-- start contact --> 
<section id="contact"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h2 class="wow bounceIn" data-wow-offset="50" data-wow-delay="0.3s">CONTACT <span>US</span></h2> 
      </div> 
      <div class="col-md-6 col-sm-6 col-xs-12 wow fadeInLeft" data-wow-offset="50" data-wow-delay="0.9s"> 
       <form action="#" method="post"> 
        <label>NAME</label> 
        <input name="fullname" type="text" class="form-control" id="fullname"> 

        <label>EMAIL</label> 
        <input name="email" type="email" class="form-control" id="email"> 

        <label>MESSAGE</label> 
        <textarea name="message" rows="4" class="form-control" id="message"></textarea> 

        <input type="submit" class="form-control"> 
       </form> 
      </div> 
      <div class="col-md-6 col-sm-6 col-xs-12 wow fadeInRight" data-wow-offset="50" data-wow-delay="0.6s"> 
       <address> 
           <p class="address-title">OUR ADDRESS</p> 
           <span>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molestie.</span> 
           <p><i class="fa fa-phone"></i> 090-020-0340</p> 
           <p><i class="fa fa-envelope-o"></i> aice09@company.com</p> 
           <p><i class="fa fa-map-marker"></i> Carmona, Cavite, Philippines</p> 
          </address> 
       <ul class="social-icon"> 
        <li> 
         <h4>WE ARE SOCIAL</h4> 
        </li> 
        <li> 
         <ahref="javascript:;" onclick="window.location.href = '#'" class="fa fa-facebook"> 
          </a> 
        </li> 
        <li> 
         <ahref="javascript:;" onclick="window.location.href = '#'" class="fa fa-twitter"> 
          </a> 
        </li> 
        <li> 
         <ahref="javascript:;" onclick="window.location.href = '#'" class="fa fa-instagram"> 
          </a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</section> 
<!-- end contact --> 

Answer 1

ここにあなたの問題のTH CODE。

HTML：

<div id="googlemaps"></div> 
    <div id="contactform"> 
    <form> 
     <div class="row"> 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
      <div class="form-group"> 
      <input type="text" class="form-control input-lg" id="firstname" placeholder="First Name"> 
      </div> 
     </div> 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
      <div class="form-group"> 
      <input type="text" class="form-control input-lg" id="lastname" placeholder="Last Name"> 
      </div> 
     </div> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <div class="form-group"> 
      <input type="text" class="form-control input-lg" id="email" placeholder="Email"> 
      </div> 
     </div> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <div class="form-group"> 
      <textarea class="form-control" rows="3" placeholder="Message"></textarea> 
      </div> 
     </div> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <button type="submit" class="btn btn-default btn-lg btn-block">SEND MESSAGE</button> 
     </div> 
     </div> 
    </form> 
    </div> 

LEAFLETJS

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> 
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> 
<script type="text/javascript"> 
    var map = L.map('googlemaps').setView([14.2973, 121.0392], 16); 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
}).addTo(map); 

L.marker([14.2973, 121.0392]).addTo(map) 
    .bindPopup('<b>ANONYMOUS PHIL</b> <br> Lot 3-5, Carmona, Cavite, Philippines <br> (02) 851 7601 <br> anonymousphil@gmail.com') 
    .openPopup(); 
</script> 

GOOGLE MAP：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

// The latitude and longitude of your business/place 
var position = [14.2973, 121.0392]; 

function showGoogleMaps() { 

    var latLng = new google.maps.LatLng(position[0], position[1]); 

    var mapOptions = { 
     zoom: 16, // initialize zoom level - the max value is 21 
     streetViewControl: false, // hide the yellow Street View pegman 
     scaleControl: true, // allow users to zoom the Google Map 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: latLng 
    }; 

    map = new google.maps.Map(document.getElementById('googlemaps'), 
     mapOptions); 

    // Show the default red marker at the location 
    marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     draggable: false, 
     animation: google.maps.Animation.DROP 
    }); 
} 

google.maps.event.addDomListener(window, 'load', showGoogleMaps); 
</script> 

STYLE

<style type="text/css"> 
    #googlemaps { 
    height: 100%; 
    width: 100%; 
    position:absolute; 
    top: 0; 
    left: 0; 
    z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */ 
} 

#contactform { 
    position: relative; 
    z-index: 1; /* The z-index should be higher than Google Maps */ 
    width: 500px; 
    margin: 60px auto 0; 
    padding: 10px; 
    background: black; 
    height: auto; 
    opacity: .45; /* Set the opacity for a slightly transparent Google Form */ 
    color: white; 
} 
</style>