Cara Memasang Google Maps Di Blog Dengan Jquery

Google Maps yakni sebuah jasa peta globe virtual gratis dan online disediakan oleh Google . Google Maps menunjukkan peta yang sanggup diseret dan gambar satelit untuk seluruh dunia, lokasi yang ditunjukan sanggup merupakan letak bisnis, rekreasi, penginapan dan alokasi daerah lainnya.

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

Demo   CODE

Kabar baik lainnya Google Maps sanggup di pasangkan pada Website atau Blog dan dengan memodifikasi pada tampilan Google Maps sanggup membuat 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 contohnya disini aku ambil daerah wisata di The Jungle Water Adventure di Kota Bogor.

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

Kemudian Anda pilih dan klik embeb, kemudian salin kode. Anda sanggup 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> kemudian salin arahan 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 arahan </body> kemudian copy arahan dibawah ini dan pasangkan diatasnya.

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

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

Masih pada arahan </body> , salin arahan 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 arahan Google Maps, Silahkan buka kembali Google maps kemudian copy atau salin arahan Google Maps dan gabungkan dengan arahan HTML dibawah ini .

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

Pasangkan arahan 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 arahan class="present tada" pada arahan Google Maps sebagai pola :
<iframe class="present tada" frameborder="0"  src=" ........" "></iframe>  

Pasangkan pada Entri gres Mode HTML, kemudian Anda publikasikan.

Semoga bermanfaat!

Share this post