Skip to main content
Instapage

Place Google Maps in the Background of your Contact Form

This is a demo of contact form that embeds a Google Map in the background. It isn’t using a static screenshot image of Google Maps in the background but the map is an interactive one — you can zoom in and out, drag the Pegman to turn on street view or even toggle between the Satellite view and the Maps view.


Contact Form with Google Maps


There are basically two layers on the page – one is the map and the other is the form – and we are using the z-index property of CSS to define the stack order. The form has a higher z-index than Google Maps and thus the latter appears in the background. Let’s look at the actual code now.


The HTML — There are two DIV elements – the map will render inside the element with ID #googlemaps while everything that you add inside #contactform will show up in your form. You can even embed a Google Form here.



<div id="googlemaps"></div>
<div id="contactform">
<!-- You can even embed a Google Form here -->
</div>

The CSS — The #googlemaps element occupies the entire height and width of the page while the #contactform has a fixed width. You can also change the opacity level of #contactform to make your forms slightly transparent.



#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: 300px;
margin: 60px auto 0;
padding: 10px;
background: black;
height: auto;
opacity: .45; /* Set the opacity for a slightly transparent Google Form */
color: white;
}

The JavaScript — Find the latitude and longitude of your place and replace the co-ordinates in line #7. You can then copy-paste the modified JavaScript code in the footer of your HTML page.



<!-- Include the Google Maps API library - required for embedding maps -->
<script src="http://ift.tt/MhUkIj;

<script type="text/javascript">

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

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>

You may refer to the HTML source of this contact form for a complete example.




This story, Place Google Maps in the Background of your Contact Form, was originally published at Digital Inspiration on 19/03/2014 under Embed, Google Maps, Internet



from Digital Inspiration Technology Blog

Comments

Popular posts from this blog

How to Get SMS Alerts for Gmail via Twitter

How do you get SMS notifications on your mobile phone for important emails in your Gmail? Google doesn’t support text notifications for their email service but Twitter does. If we can figure out a way to connect our Twitter and Gmail accounts, the Gmail notifications can arrive as text on our mobile via Twitter. Let me explain:Twitter allows you to follow any @user via a simple SMS. They provide short codes for all countries (see list) and if you text FOLLOW to this shortcode following by the  username, any tweets from that user will arrive in your phone as text notifications. For instance, if you are in the US, you can tweet FOLLOW labnol to 40404 to get my tweets as text messages. Similarly, users in India can text FOLLOW labnol to 9248948837 to get the tweets via SMS.The short code service of Twitter can act as a Gmail SMS notifier. You create a new Twitter account, set the privacy to private and this account will send a tweet when you get a new email in Gmail. Follow this account …

Instagram Story links get 15-25% swipe-through rates for brands, publishers

Instagram may arrived late as a traffic source for brands and publishers, but it’s already showing early signs of success, driving new visitors to their sites and even outperforming its parent company, Facebook.For years brands, publishers and other have tried to push people from the Facebook-owned photo-and-video-sharing app to their sites. Outside of ads and excepting a recent test with some retailers, Instagram didn’t offer much help to companies looking to use it to drive traffic. So they had to find workarounds. They put links in their Instagram bios. They scrawled short-code URLs onto their pictures. And they typed out links in their captions.Then last month Instagram finally introduced an official alternative to these hacky workarounds: the ability for verified profiles to insert links in their Instagram Stories.Almost a month after the launch, 15% to 25% of the people who see a link in an Instagram Story are swiping on it, according to a handful of brands and publishers that h…

Five great tools to improve PPC ads

Every digital marketer wants to reach the top position on the search engine results. However, if you’ve recently launched a new website or your niche is saturated, starting with paid search ads sounds like a good idea.Strategically created PPC campaigns can drive leads, sales or sign-ups to your websites. You know what? In fact, businesses earn an average of $8 for every dollar they spend on Google Ads.Optimizing PPC campaigns is not easy, but it’s very powerful if you do it properly. Just like SEO, it is essential to conduct extensive keyword research, optimize ad copy, and design high-converting landing pages.Fortunately, there are a lot of effective PPC tools that will help you analyze your competitors’ PPC strategies, figure out tricks in their campaigns, and improve your PPC campaigns.If you are ready to take an evolutionary leap in your PPC advertising, take a look at my list of five amazing tools to save you time, give you crucial insights, and raise money for your business.Fiv…