Cara Memasang Google Maps di Blog dengan jQuery

Google Maps adalah sebuah jasa peta globe virtual gratis dan online disediakan oleh Google . Google Maps menawarkan peta yang dapat diseret dan gambar satelit untuk seluruh dunia, lokasi yang ditunjukan bisa merupakan letak bisnis, rekreasi, penginapan dan alokasi tempat lainnya.

Belum lama ini Google telah meluncurkan fitur baru pada Google Maps, Yaitu Maps GL. Menurut Google, mereka telah membuat ulang Google Maps dari awal. Maps yang disempurnakan ini memberikan kinerja yang lebih baik, grafis 3D yang lebih kaya, transisi halus antara citra, rotasi tampilan 45°, akses yang lebih mudah ke Street View, dan banyak lagi.

Demo   CODE

Kabar baik lainnya Google Maps bisa di pasangkan pada Website atau Blog dan dengan memodifikasi pada tampilan Google Maps bisa menciptakan keindahan didalamnya yaitu dengan menambahkan Efek slide dengan fungsi jQuery. Untuk memasang  Google Maps di Blog dengan jQuery, pertama-tama Anda masuk kesitus http://maps.google.com.

Kemudian pada kotak  pencarian Google maps, Anda ketikkan alokasi yang di inginkan misalnya disini saya ambil tempat wisata di The Jungle Water Adventure di Kota Bogor.

Selanjutnya Anda menuju ke bagian kanan bawah, Anda klik pada icon roda bergigi lalu pilih dan klik Share and embeb map.

Kemudian Anda pilih dan klik embeb, lalu salin kode. Anda bisa menyimpannya di notepad atau jangan menutup dulu web Google Maps.

Selanjutnya tahap pemasangan di Blog atau website.

Silahkan Anda buka Editor Template, kemudian Anda cari kode ]]></b:skin> lalu salin kode dibawah ini dan pasangkan diatasnya atau sebelumnya.

/*Google Maps with jQuery */
.circle-wrap {
  width: 50px;
  height: 50px;
  position: absolute;
  pointer: cursor;
  top: -19px;
  right: 20px;
  -webkit-transition: all 0.6s ease;
          transition: all 0.6s ease;
  -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
          transform: scale(1, 1);
}
.circle-wrap > * {
  outline: 0;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 50%;
  text-align: center;
  padding: 50% 0;
  line-height: 0;
  margin: 0;
  background-color: #e95de3;
  color: white;
  font-size: 20px;
  box-shadow: 2px 2px 10px -2px #4d4d4d;
}
.tada2 .circle-wrap {
  -webkit-transition: all 0.6s ease;
          transition: all 0.6s ease;
  -webkit-transform: scale(0.8, 0.8);
      -ms-transform: scale(0.8, 0.8);
          transform: scale(0.8, 0.8);
}
.item {
  overflow: hidden;
  margin: 80px auto;
  max-width: 600px;
  width: 100%;
}
.primary {
  height: 300px;
  background-color: #eee;
  color: darkgray;
  font-size: 50px;
  position: relative;
  text-align: right;
}
.primary .spoiler {
  margin: 0 10px;
  position: absolute;
  bottom: 40px;
  right: 0;
}
.present {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: calc(100% + 77px);
  background-color: red;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: all 0.8s 0.05s ease;
          transition: all 0.8s 0.05s ease;
}
.present.tada {
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
  -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
          transform: translateY(0%);
}
.title, .secondary {
  padding: 0 10px;
  z-index: 2;
  background-color: #fafafa;
}
.title {
  border-top: 1px solid #dadada;
  position: relative;
  width: 100%;
  color: #868686;
  font-size: 30px;
  padding: 10px 10px;
  -webkit-transition: all 0.6s ease;
          transition: all 0.6s ease;
}
.secondary {
  color: #acacac;
  line-height: 20px;
  font-size: 14px;
  padding: 20px 0;
}
.title.tada2 {
  -webkit-transform: translateY(77px);
      -ms-transform: translateY(77px);
          transform: translateY(77px);
  -webkit-transition: all 0.6s ease;
          transition: all 0.6s ease;
}
.caret-wrap {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition: all 0.6s ease;
          transition: all 0.6s ease;
}
.caret {
  display: block;
  -webkit-transform: scaleY(2);
      -ms-transform: scaleY(2);
          transform: scaleY(2);
}
.tada2 .caret-wrap {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}

Selanjutnya Anda cari kode </body> kemudian copy kode dibawah ini dan pasangkan diatasnya.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />

Catatan: Kode diatas selain bisa dipasangkan di </body> tetapi juga bisa di pasangkan di atas kode </head> dan jika pada template Anda sudah terinstall kode diatas maka lewati langkah tersebut .

Masih pada kode </body> , salin kode jQuery dibawah ini dan pasangkan diatasnya atau sebelumnya.

<script type="text/javascript">
setTimeout(function () {
    $('.present').toggleClass('tada');
    $('.title').toggleClass('tada2');
}, 2000);
$('.toggle-tada').click(function () {
    $('.present').toggleClass('tada');
    $('.title').toggleClass('tada2');
});
</script>

Selanjutnya pemasangan HTML dan kode Google Maps, Silahkan buka kembali Google maps lalu copy atau salin kode Google Maps dan gabungkan dengan kode HTML dibawah ini .

<div class="item">
    <div class="primary">
      <div class="spoiler">
        <div>
Your</div>
<div>
Present</div>
</div>

Pasangkan kode Google Maps Anda disini

</div>
<div class="title tada2">
      <h2>
Click to open ...</h2>
<div class="circle-wrap">
        <button class="toggle-tada" tabindex="1" type="button">
<div class="caret-wrap">
            <span class="caret">
&gt;
</span>
</div>
</button>
</div>
<div class="secondary">
            Tambahkan teks sesuai yang Anda kehendaki disini

</div>
</div>
</div>

Penjelasan :

 Tambahkan kode class="present tada" pada kode Google Maps sebagai contoh :
<iframe class="present tada" frameborder="0"  src=" ........" "></iframe>  

Pasangkan pada Entri baru Mode HTML, kemudian Anda publikasikan.

Semoga bermanfaat!

Share this post