Map section

Sections documentation

  1. Home
  2. Sections
  3. Map

Installation

<script src='../../HTWF/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>
                    Lorem ipsum dolore consectetur adipisicing elito 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>
                    Lorem ipsum dolore consectetur adipisicing elito 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>
                    Lorem ipsum dolore consectetur adipisicing elito 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>
                    Lorem ipsum dolore consectetur adipisicing elito 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 the map component. Complete documentation here