MAINHACK

Viewing / Editing File: google-map.php

<?php include('header.php');?>

<div class="banner-inner">
	<img src="images/inner-banner.jpg" alt="" class="banner-img">
</div>

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="Kaikhali , Vip Road Near united bank of india, Kolkata - 700052" />
   <input type="submit" value="Get directions" />
</form>

<hr>

<div class="mod-directions">
  <div class="mod-directions-form">
    <div class="mod-directions-form-row">
      <label class="mod-directions-form-label">
        Départ
      </label>
      <input placeholder="Départ" type="text" class="mod-directions-form-input-block" id="mod-directions-form-departure" />
    </div>
    <div class="mod-directions-form-row">
      <label class="mod-directions-form-label">
        Arrivée
      </label>
      <input placeholder="Arrivée" type="text" class="mod-directions-form-input-block" id="mod-directions-form-arrival" value="Kolkata - 700052" />
    </div>
    <div class="mod-directions-form-row">
      <input type="submit" class="mod-directions-form-submit" id="mod-directions-form-submit" />
    </div>
  </div>
  <div class="mod-directions-map">
    <iframe id="mod-directions-map-passive-iframe" width="600" height="450" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q={arrival}&key=AIzaSyA6-_qrhr9_4yx7AyqUr-ep1tKmP_a3u7A"></iframe>
    <iframe id="mod-directions-map-active-iframe" width="600" height="450" frameborder="0" style="display: none;" src="https://www.google.com/maps/embed/v1/directions?origin={departure}&destination={arrival}&key=AIzaSyA6-_qrhr9_4yx7AyqUr-ep1tKmP_a3u7A"></iframe>
  </div>
</div>

.mod-directions{
  font-family: "Arial";
  .mod-directions-form{
    .mod-directions-form-row{
      overflow: hidden;
      margin-bottom: 24px;
      .mod-directions-form-label{
        display: inline-block;
        vertical-align: middle;
        width: 150px;
        font-weight: bold;
        font-size: 13px;
      }
      .mod-directions-form-input-block{
        display: inline-block;
        vertical-align: middle;
        padding: 6px;
        background: white;
        @include border-radius(5px);
        border: 2px solid lightgray;
        font-size: 14px;
        color: #34495e;
        outline: 0;
        &:focus,
        &:active{
          border-color: #1abc9c;
        }
      }
      .mod-directions-form-submit{
        margin-left: 150px;
        background: #1abc9c;
        color: white;
        @include border-radius(5px);
        padding: 8px 15px;
        border: none;
      }
    }
  }
  .mod-directions-map{
    iframe{
      @include border-radius(5px);
      border: 4px solid #34495E;
    }
  }
}
</style>

changePassiveFrameUrl();
  
  function changeActiveFrameUrl(){
    var departure_value = departure.value;
    var arrival_value = arrival.value;
    var active_frame_url = active_frame.src;
    active_frame_url = active_frame_url.replace("{arrival}", arrival_value)
      .replace("{departure}", departure_value);
    active_frame.src = active_frame_url;
  }
  
  function changePassiveFrameUrl(){
    var arrival_value = arrival.value;
    var passive_frame_url = passive_frame.src;
    passive_frame_url = passive_frame_url.replace("{arrival}", arrival_value);
    passive_frame.src = passive_frame_url;
  }
  
  submit.onclick = function(){
    changeActiveFrameUrl();
    passive_frame.style.display = "none";
    active_frame.style.display = "block";
  }
});
</script>

<?php include('footer.php');?>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: google-map.php

Server Info

System Features

User Info