<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-9">
        <h2>Google maps</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Miscellaneous</a>
            </li>
            <li class="active">
                <strong>Google maps</strong>
            </li>
        </ol>
    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Google Maps Basic example</h5>
                </div>
                <div class="ibox-content">
                    <p>
                        With google maps <a href="https://developers.google.com/maps/documentation/javascript/reference#MapOptions">API</a> You can easy customize your map.
                    </p>
                    <section id="map" ng-controller="GoogleMaps">
                        <div ui-map="myMap" ui-options="mapOptions" class="google-map"></div>
                    </section>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Custom theme 1</h5>
                </div>
                <div class="ibox-content">
                    <p>
                        This is a custom theme for Google map.
                    </p>
                    <section id="map2" ng-controller="GoogleMaps">
                        <div ui-map="myMap2" ui-options="mapOptions2" class="google-map"></div>
                    </section>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Map Type</h5>
                </div>
                <div class="ibox-content">
                    <p>
                        You can also change a map type.
                    </p>
                    <section id="map3" ng-controller="GoogleMaps">
                        <div ui-map="myMap3" ui-options="mapOptions3" class="google-map"></div>
                    </section>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Custom theme 2</h5>
                </div>
                <div class="ibox-content">
                    <p>
                        This is a custom theme for Google map.
                    </p>
                    <section id="map4" ng-controller="GoogleMaps">
                        <div ui-map="myMap4" ui-options="mapOptions4" class="google-map"></div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>