Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

Question

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

I am currently working on a one-page website and I would like to include a map as a background behind the "contact" section. The map can be set to float, draggable, or positioned at the back. I have experience using both the Google Maps API and LeafletJS, so I am open to utilizing either of them or any other suggestions.

The coordinates given are 14.2973° N, 121.0392° E, with the contact section layout provided below:

<!-- 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 elit quisque 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> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17767e7472272e5774787a6776796e3974787a">[email protected]</a></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>
                        <a href="javascript:;" onclick="window.location.href = '#'" class="fa fa-facebook"></a>
                    </li>
                    <li>
                        <a href="javascript:;" onclick="window.location.href = '#'" class="fa fa-twitter"></a>
                    </li>
                    <li>
                        <a href="javascript:;" onclick="window.location.href = '#'" class="fa fa-instagram"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- end contact -->

javascript html css google-maps leaflet

Answer 1

Answer №1

EXPERIENCE THE SOLUTION TO YOUR QUERY.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4dfd2d6d1dfd6e7bcc4cfcadfcdccd98dd8dcc5">[email protected]</a>/dist/leaflet.css" />
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01434e4a4d474e6b20405f41475546543f44114f4044">[email protected]</a>/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>  <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcaba5a6abbdaaa2b5befdbecabfafb9afbbacb5fac7afa3bacbebfb58e878189ce998783ff82a08c8e89a28986999c95">[email protected]</a>')
    .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>

Answer 2

EXPERIENCE THE SOLUTION TO YOUR QUERY.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4dfd2d6d1dfd6e7bcc4cfcadfcdccd98dd8dcc5">[email protected]</a>/dist/leaflet.css" />
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01434e4a4d474e6b20405f41475546543f44114f4044">[email protected]</a>/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>  <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcaba5a6abbdaaa2b5befdbecabfafb9afbbacb5fac7afa3bacbebfb58e878189ce998783ff82a08c8e89a28986999c95">[email protected]</a>')
    .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>

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

Answer №1

Similar questions

Absolute positioned content causing unexpected spacing on top of relative positioned content

How can I include additional view folders for Jade files in my EXPRESS application?

Tips for receiving a reply from S3 getObject in Node.js?

Error encountered while creating SvelteKit: The module 'intl-messageformat' that was requested is in CommonJS format

Having trouble toggling between the trending and search features on giphy website

Adjusting the height of content in Angular Material 2 md-tab

AngularJS animation fails to activate

What is the reason CURL is unable to retrieve the HTML content of a page?

EJS unable to display template content

Navigating through a React application with several workspaces - the ultimate guide

What is the proper way to place the authorization header for a background image using the url()

What is the step-by-step process for incorporating the `module` module into a Vue project?

Stop music with one click, code in Javascript

Performing calculations within handsontable

the router is having trouble choosing the right function

Is it feasible to add on to an existing object in the database? (Using Node.js and Mongoose

Every time I try to create a new React app, I consistently run into the same error

What is the best way to pass multiple variables to a PHP file with AJAX using a GET request?

`Save user edits on the webpage using Electron`

When hovering over an image, CSS text will be displayed