{% extends 'layouts/base.html' %}
{% load static %}


{% block content %}

  <!-- [ Main Content ] start -->
  <div class="row">
    <!-- [ basic-map ] start -->
    <div class="col-lg-12 col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Basic</h5>
          <span class="d-block m-t-5">Map shows places around the world</span>
        </div>
        <div class="card-block">
          <div id="basic-map" class="set-map" style="height:400px;"></div>
        </div>
      </div>
    </div>
    <!-- [ basic-map ] end -->

    <!-- [ Markers-map ] start -->
    <div class="col-lg-12 col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Markers</h5>
          <span class="d-block m-t-5">Maps shows <code>location</code> of the place</span>
        </div>
        <div class="card-block">
          <div id="markers-map" class="set-map" style="height:400px;"></div>
        </div>
      </div>
    </div>
    <!-- [ Markers-map ] end -->

    <!-- [ Geo-Coding-map ] start -->
    <div class="col-lg-12 col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Geo-Coding</h5>
          <span class="d-block m-t-5">Search your location</span>
        </div>
        <div class="card-block">
          <form method="post" id="geocoding_form1">
            <div class="input-group input-group-button mb-3">
              <input type="text" id="address" class="form-control" placeholder="Write your place">
              <span class="input-group-addon" id="basic-addon1">
                <button class="btn btn-primary m-0">Search Location</button>
              </span>
            </div>
          </form>
          <div id="mapGeo" class="set-map" style="height:400px;"></div>
        </div>
      </div>
    </div>
    <!-- [ Geo-Coding-map ] end -->

    <!-- [ Overlay-map ] start -->
    <div class="col-lg-12 col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Overlay</h5>
          <span class="d-block m-t-5">Map shows places around the world</span>
        </div>
        <div class="card-block">
          <form method="post" id="geocoding_form2">
            <div id="mapOverlay" class="set-map" style="height:400px;"></div>
          </form>
        </div>
      </div>
    </div>
    <!-- [ Overlay-map ] end -->

    <!-- [ Street-View-map ] start -->
    <div class="col-lg-12 col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Street View</h5>
          <span class="d-block m-t-5">Map shows view of street</span>
        </div>
        <div class="card-block">
          <form method="post" id="geocoding_form3">
            <div id="mapStreet" class="set-map" style="height:400px;"></div>
          </form>
        </div>
      </div>
    </div>
    <!-- [ Street-View-map ] end -->

    <!-- [ Map-Types-map ] start -->
    <div class="col-lg-12 col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Map Types</h5>
          <span class="d-block m-t-5">Select your <code>map-types</code> to see differant views</span>
        </div>
        <div class="card-block">
          <form method="post" id="geocoding_form4">
            <div id="mapTypes" class="set-map" style="height:400px;"></div>
          </form>
        </div>
      </div>
    </div>
    <!-- [ Map-Types-map ] end -->

    <!-- [ GeoRSS-Layers ] start -->
    <div class="col-lg-12 col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>GeoRSS Layers</h5>
          <span class="d-block m-t-5">Shows <code>RSS</code> location</span>
        </div>
        <div class="card-block">
          <form method="post" id="geocoding_form5">
            <div id="georssmap" class="set-map" style="height:400px;"></div>
          </form>
        </div>
      </div>
    </div>
    <!-- [ GeoRSS-Layers ] end -->

    <!-- [ Marker-Clustering ] start -->
    <div class="col-lg-12 col-xl-6">
      <div class="card">
        <div class="card-header">
          <h5>Marker Clustering</h5>
          <span class="d-block m-t-5">Multiple markers show differant location</span>
        </div>
        <div class="card-block">
          <form method="post" id="geocoding_form6">
            <div id="map" class="set-map" style="height:400px;"></div>
          </form>
        </div>
      </div>
    </div>
    <!-- [ Marker-Clustering ] end -->
  </div>
  <!-- [ Main Content ] end -->

{% endblock content %}

{% block extra_js %}

  <!-- google-map Js -->
  <script
    src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script src="{% static 'assets/plugins/google-maps/js/gmaps.js' %}"></script>
  <script src="{% static 'assets/js/pages/google-maps.js' %}"></script>

{% endblock extra_js %}