Cara Mengatasi Google Maps Tidak Tampil

Google Maps Tidak Tampil?!

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

1. Menambahkan dan membuat halaman bisnis di google plus, serta menempatkan geocode lokasi bisnis, dilanjutkan dengan melakukan konfirmasi. Ini membutuhkan waktu paling cepat 2 pekan, karena pihak google akan mengirimkan kartu pos yang berisi kode untuk mengkonfirmasi halaman bisnis dan letak bisnis esuai pada saat dibuat halaman bisnis.
2. Membuat ID dan API key di https://developers.google.com/maps/ dilanjutkan pembuatan credensial.

Setelah melakukan hal diatas, peta google juga tidak akan langsung tampil, melainkan masih harus menunggu sampai disetujui google.

Bagi anda pengguna theme chingsy dan zagi news:

• Pastikan juga setting file index.php dan contact.php pada bagian script peta sudah benar.
• Pastikan geocode dan alamat pada dashboard admin sesuai penempatan pada google maps untuk halaman bisnis.

Cara Mengatasi Peta Google Map tidak Tampil

Solusi lain untuk mengatasi peta google map tidak tampil adalah sebagai berikut:

1. Kunjungi https://www.google.co.id/maps/place/ dan cari letak alamat yang anda ingin tampilkan, kemudian dapatkan geocode dari hasil pencarian tersebut. Jika pada hasil alamat yang di tentukan sudah memiliki PIN, klik kanan pada PIN lalu pilih "Ada apa disini?". Jika pada hasil peta yang diharapkan belum memiliki PIN, copy URL dari address bar, pada url tersebut anda akan mendapatkan geocode.
2. Kunjungi https://developers.google.com/maps/, klik > Web > Klik Get A Key > Klik kanan pada "geo console". Sementara terbuka tab baru, pada halaman dimana anda dapatkan API Key > > Klik API Consol > Klik FINISH. Pada Api Consol buatlah Credential, gunakan perujuk HTTP Referer, dan tambahkan URL Website anda tanpa https://
   Hanya nama-domain.com atau dengan tambahan www, sehingga menjadi www.nama-domain.com
3. Konfirmasi nama domain yang telah anda tambahkan pada tab selanjutnya.
4. Pada tab baru yang sudah terbuka, buatlah sebuah credensial > pilih "Perujuk HTTP(Situs Web)".
5. Tambahkan URL domain anda tanpa https:// dan tanpa www, hanya alamat domain > Klik Simpan.
6. Kembali pada halaman sebelumnya > Klik Google Maps JavaScript API > Klik Create a Map with a Marke atau Visualize Data.
7. Jika anda memilih Map with marker, dapatkan script seperti tampak dibawah:

8.   <h3>My Google Maps Demo</h3>
     <div id="map"></div>
     <script>
      function initMap() {
       var uluru = {lat: -25.363, lng: 131.044};
       var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru
       });
       var marker = new google.maps.Marker({
        position: uluru,
        map: map
       });
      }
     </script>
     <script async defer
     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
     </script>
   

   Ganti nilai {lat: -25.363, lng: 131.044}; dengan geocode yang anda dapatkan pada langkah point ke 1. Dan ganti teks YOUR_API_KEY dengan API KEY yang anda dapatkan pada langkah point ke 2.

9. Jika anda memilih visualize data, dapatkan script seperti tampak dibawah:

10.   <div id="map"></div>
      <script>
       var map;
       function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
         zoom: 2,
         center: new google.maps.LatLng(2.8,-187.3),
         mapTypeId: 'terrain'
        });
    
        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
       }
    
       // Loop through the results array and place a marker for each
       // set of coordinates.
       window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
         var coords = results.features[i].geometry.coordinates;
         var latLng = new google.maps.LatLng(coords[1],coords[0]);
         var marker = new google.maps.Marker({
          position: latLng,
          map: map
         });
        }
       }
      </script>
      <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
      </script>
    

    Ganti nilai LatLng(2.8,-187.3), dengan geocode yang anda dapatkan pada langkah point ke 1, ganti juga teks YOUR_API_KEY dengan API KEY yang anda dapatkan pada langkah point ke 2.

11. Tempel script yang telah anda sesuaikan tersebut pada file contact.php dari theme yang anda gunakan.

UPDATE

Setelah mempelajari dan meninjau di beberapa kasus yang di hadapi para developer, bahwasanya selain hal-hal diatas harus dilakukan secara benar dan seksama. Supaya peta google map pada halaman kontak atau pada website dapat tampil, maka pengelola, pemilik, atau web master juga harus melakukan verifikasi website ke google webmaster tool.

Tambahkan situs anda disana dengan klik tombol pada sisi kanan atas berwarna merah "ADD PROPERTY", masukan url situs lengkap lalu klik "ADD". Setelah itu anda akan dibawa pada halaman dimana anda harus memverifikasi situs.

Setelah semua proses diatas anda lakukan dengan benar, maka pada saatnya peta google map pada halaman kontak akan tampil.

Sudah berusaha dengan Berbagai cara dan tidak berhasil? Silahkan Gunakan Jasa Service/Maintenance!