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 -->
javascripthtmlcssgoogle-mapsleaflet

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am experiencing issues with my Ajax code where it is not successfully sending data to the server and

Can someone help me troubleshoot my PHP AJAX code? I am new to PHP and just getting started with learning AJAX. index.html: <html> <head> <script> function sendmessage(str) { var xmlhttp; if (window.XMLHttpRe ...

phphtmlajax

updating a d3js line graph in real-time using JSON information

Trying to wrap my head around dynamically updating a line graph with new data, shifting the graph to the left and adding fresh data from the right - you following me? Want it to behave just like the examples on I'm fairly new to d3 (javascript) and l ...

javascriptjsond3.jsdynamiclinegraph

javascript cannot utilize html reset functionality

My drop down menu includes an onChange event that triggers a JavaScript method. However, when I select a new value and then click the reset button, the dropdown reverts back to its original value but the onChange event does not fire. <select onChange= ...

javascripthtml

Non-IIFE Modules

Check out this discussion on Data dependency in module I have several modules in my application that rely on data retrieved from the server. Instead of implementing them as Immediately Invoked Function Expressions (IIFEs) like traditional module patterns ...

javascriptajaxmoduleiife

Can dynamic attributes be used with ternary operators in Angular?

I attempted to alter the id of a div using Angular and implemented the following code: <div [id]="'item_' + (itemName !== undefined ? itemName.replace(' ', '-').toLowerCase() : '')"> However, when I run my te ...

javascriptangularattributesconditional-operator

The :before pseudo element doesn't seem to be functioning properly on Internet Explorer 11

The following code works well in Chrome and Mozilla, but unfortunately does not function correctly in IE11. I am attempting to apply a background color on hover to a div with the class .border-green, however this functionality is failing specifically in ...

cssstylesheet

I'm trying to set it up so that an image pops up when I hover over text. I've tried incorporating a few different JavaScripts, but I still can

I'm struggling to display an image on my website. I have the necessary code parts, but it's not working as expected. function showImage() { $('.img').addClass('display'); } function hideImage() { $('.img'). ...

javascripthtmlcss

The Django template fails to implement CSS styling

I am trying to apply text-align: justify and reduce the text width on a Django template file, but it seems that my CSS isn't working for only this specific element. I have no idea how to solve this issue even though my static files and direction are f ...

htmlcssdjangodjango-templates

Revamp the Design Layout of a Drag-and-Drop Tool

After experimenting with a drag and drop feature using jQuery, I discovered the following useful code snippet. Here's how it functions: $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); #so ...

javascriptjquery

Leveraging the power of ReactJS for efficiency in executing multiple API calls concurrently

I'm encountering an issue with the following code snippet: let tmpContributors = [...this.state.contributors]; for (let i = 0; i < 10; i++) {//10 most active contributors due to performance and github limits contributorPropertiesPromises.pus ...

javascriptreactjsfrontend

Is there a way to implement fixed scrolling on a website?

I'm interested in implementing fixed scrolling on a webpage similar to the effect used here: . When you scroll on that website, it smoothly transitions to the next div. I believe there is some JavaScript involved, but I am not sure how to achieve thi ...

javascriptjqueryhtmlcssscroll

Angular - a simple method to determine the number of non-empty inputs in a complex template-driven form

As I work on multiple substantial Angular 11 template forms containing basic inputs like text, radiolists, and checkboxes, I am looking for the most effective method to calculate the percentage of completed inputs while the user is actively engaging with ...

javascriptangulartypescript

Receiving unexpected results when returning a function within a React hook

I'm currently working on developing a custom React hook that will provide users with a function to execute. This hook is designed to generate a function internally. Check out this simplified example // fetch.js import { useEffect, useState} from &qu ...

javascriptreactjsreact-hooks

Exploring the resolution of unit test for an Angular Bootstrap modal using the John Papa ViewModel style

A custom ModalService has been created to display two different types of dialogs, CancelDialog and ErrorDialog, based on the parameter passed to the service. For example, the following code will show an ErrorDialog: ModalService.openModal('Analysis ...

javascriptangularjstwitter-bootstrapunit-testingjasmine

Using z-index to overlay a background image with transparency

I'm attempting to make a partially transparent div with text on top. My approach involves creating a parent tag with relative positioning. I have one child span with transparency set using the class .body-content-background and another child containi ...

htmlz-index

What methods can be used to determine if a session is still active? Are there specific techniques that are effective for verifying session status?

After my initial experience with Web Design, I realized that the way I handled sessions wasn't efficient due to time constraints. I need advice on how to properly handle sessions in web development. In my previous project, I used PHP embedded within H ...

javascriptphpajaxsession

Adding a version number to the splash screen in Cordova: A step-by-step guide

After successfully integrating the Cordova Splashscreen plugin into my Ionic project, everything is running smoothly. However, I am now looking to dynamically add a version number to the splash screen without manually editing the Splash Screen PNG file e ...

javascriptangularjscordovamobileionic-framework

What could be causing my Ajax function to malfunction?

I've been attempting to incorporate a form that sends two javascript variables to a php script and displays the result in a new Div on the same page using an ajax function. Unfortunately, it's not functioning as expected. Here is the code snippe ...

phpjavascriptjqueryajax

Symfony2 compresses CSS and JS files to improve performance

Currently, I am attempting to execute php app/console assetic:dump in order to test my production environment. While my css file gets generated successfully, the js file does not. The following error message is displayed : C:\wamp\www\p ...

javascriptphpsymfonyassetsassetic

What is the best way to determine the size of the URLs for images stored in an array using JavaScript?

I am working on a project where I need to surround an image with a specific sized 'div' based on the image's dimensions. The images that will be used are stored in an array and I need to extract the height and width of each image before disp ...

javascripthtmlcssarrays