JSFiddle - React, Tailwind, and code Playground

Bootstrap Contact Form with Google Map

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="well well-sm">
                <form class="form-horizontal" method="post">
                    <fieldset>
                        <legend class="text-center header">Contact us</legend>
                        <div class="form-group">
                            <div class="col-md-10 col-md-offset-1">
                                <input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-10 col-md-offset-1">
                                <input id="lname" name="name" type="text" placeholder="Last Name" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-10 col-md-offset-1">
                                <input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-10 col-md-offset-1">
                                <input id="phone" name="phone" type="text" placeholder="Phone" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-10...

CSS

.map {
    min-width: 300px;
    min-height: 300px;
    width: 100%;
    height: 100%;
}

.header {
    background-color: #F5F5F5;
    color: #36A0FF;
    height: 70px;
    font-size: 27px;
    padding: 10px;
}

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0

// www.prepbootstrap.com/bootstrap-template/contact-form-map

jQuery(function ($) {
    function init_map1() {
        var myLocation = new google.maps.LatLng(38.885516, -77.09327200000001);
        var mapOptions = {
            center: myLocation,
            zoom: 16
        };
        var marker = new google.maps.Marker({
            position: myLocation,
            title: "Property Location"
        });
        var map = new google.maps.Map(document.getElementById("map1"),
                                      mapOptions);
        marker.setMap(map);
    }
    init_map1();
});