Section

Google Maps section

Installation

<script src='../scripts/google.maps.min.js'></script>
<script src='https://maps.googleapis.com/maps/api/js?sensor=false'></script>

Usage

<div class="section-map" style="height:300px;">
    <div class="google-map" data-address="New York, US" data-skin="green" data-zoom="15"></div>
</div>
<div class="section-map box-middle-container" style="height:300px;">
    <div class="google-map" data-address="via bettin 234, italy" data-zoom="15" data-marker-pos="col-md-6-left" data-marker="http://www.framework-y.com/images/marker-map.png"></div>
    <div class="overlaybox overlaybox-side overlaybox-right">
        <div class="container content">
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6 overlaybox-inner box-middle">
                    <h2>MARKER LEFT</h2>
                    L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                    <ul class="fa-ul text-s" style="margin-top:25px;">
                        <li><i class="fa-li fa fa-map-marker"></i>Street Carbone 25/A, London, UK</li>
                        <li><i class="fa-li fa fa-phone"></i>(+05) 320-3256472</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>            
<div class="section-map box-middle-container" style="height:300px;">
    <div class="google-map" data-address="London, UK" data-zoom="15" data-marker-pos="col-md-6-right" data-marker="http://www.framework-y.com/images/marker-map.png"></div>
    <div class="overlaybox overlaybox-side">
        <div class="container content">
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6 overlaybox-inner box-middle">
                    <h2>MARKER RIGHT</h2>
                    L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                    <ul class="fa-ul text-s" style="margin-top:25px;">
                        <li><i class="fa-li fa fa-map-marker"></i>Street Carbone 25/A, London, UK</li>
                        <li><i class="fa-li fa fa-phone"></i>(+05) 320-3256472</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>              
<div class="section-map box-middle-container" style="height:300px;">
    <div class="google-map" data-address="via bettin 234, italy" data-zoom="15" data-marker-pos="center-top" data-marker="http://www.framework-y.com/images/marker-map.png"></div>
    <div class="overlaybox overlaybox-side overlaybox-center">
        <div class="container content">
            <div class="row">
                <div class="col-md-6 overlaybox-inner" style="margin-top:139px;">
                    <h2>MARKER TOP</h2>
                    L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
                </div>
            </div>
        </div>
    </div>
</div>              
<div class="section-map box-middle-container" style="height:300px;">
    <div class="google-map" data-address="via bettin 234, italy" data-zoom="15" data-marker-pos="center-bottom" data-marker="http://www.framework-y.com/images/marker-map.png"></div>
    <div class="overlaybox overlaybox-side overlaybox-center">
        <div class="container content">
            <div class="row">
                <div class="col-md-6 overlaybox-inner" style="margin-top:15px;">
                    <h2>MARKER BOTTOM</h2>
                    L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
                </div>
            </div>
        </div>
    </div>
</div>             

Main documentation

Section map is part of components. Complete documentation here

MARKER LEFT

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
  • Street Carbone 25/A, London, UK
  • (+05) 320-3256472

MARKER RIGHT

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
  • Street Carbone 25/A, London, UK
  • (+05) 320-3256472

MARKER TOP

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

MARKER BOTTOM

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.