İçeriğe geç

Ücretsiz Javascript API Google Haritalar Kullanmak

Google haritaları web sitenize ücretsiz olarak entegre etmek ister misiniz? Harita göstermek için bir araba parası vermeye gerek yok bence 🙂

Bu konu aslında o kadar zor değil. Biraz kod, hack ve iyi olan her şey.

Google Maps Access Token

Her şeyden önce, Google Map JS API nasıl çalışır?

  1. Size bir API anahtarı verirler.
  2. Anahtar kısıtlamalarını yapılandırabilirsiniz. (izin verilen alan adları, izin verilen IP vs.).
  3. Google maps javascript dosyasını çağırırken API anahtarını girersiniz.
  4. Harita, web sitesindeki anahtarı kullanıp kullanamayacağınızı öğrenmek için hizmetleri arar. Değilse, içeriği engeller.

Peki kısıtlamalar nasıl atlanır?

  1. Bir anahtara ihtiyacınız var.
  2. Doğrulama çağrısını durdurmanız ve engellemeniz gerekir.

Google haritalar kendi web sayfanıza entegre olduğundan tüm kontrole sahipsiniz ve gerçek zamanlı olarak müdahale edebilirsiniz. Bu yapacağımızı istediğiniz API anahtarıyla yapabilirsiniz. Örneğin:

AIzaSyDIJ9XX2ZvRKCJcFRrl-lRanEtFUow4piM

Bu anahtarla çalıştırmaya çalıştığınızda karşınıza buradaki gibi bir ekran çıkacaktır.

Baktığımızda erişim kontrolünü sağlayan iki tane çağrı var.

  • https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate
  • https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent

Peki bu dosyaların çağrılması nasıl engellenir?

Google Maps Doğrulamasını Engelleme

Google Haritalar backendle iletişim kurmak için JSONP kullanıyor. Yani kontrol için yazılı kodlar sayfaya daha sonradan dahil oluyor. O zaman engelleyelim ve ücretsiz kullanmaya başlayalım. Örnek kod aşağıdaki gibidir. İstediğiniz gibi düzenleyebilirsiniz.

Not: Kullanacağınız anahtar yinede geçerli bir anahtar olması gerekiyor. Google haritalar kullanan bir siteden alabilirsiniz.

<!DOCTYPE html>
<html>

<head>
    <title>Google Simple Map API Hacking</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        #map {
            height: 100%;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial;
        }

        header {
            background-color: #333;
            padding: 10px;
            text-align: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1;
        }

        button {
            padding: 8px;
            font-weight: bold;
            border-radius: 3px;
            margin: 0px 5px;
        }

        button:disabled {
            opacity: 0.3;
        }

        button.start-hack {
            background: #0c0;
            color: white;
            border: none;
        }

        button.stop-hack {
            background: #c00;
            color: white;
            border: none;
        }

        h1 {
            display: inline;
            font-size: 18px;
            color: #ccc;
            margin-right: 10px;
        }

        span {
            color: #CDDC39;
            font-style: italic;
            padding-right: 10px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: -34.397,
                    lng: 150.644
                },
                zoom: 8
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIJ9XX2ZvRKCJcFRrl-lRanEtFUow4piM&callback=initMap" async defer></script>
    <script>
        (() => {
            "use strict";

            const hackSetter = (value) => () => {
                window.name = value;
                history.go(0)
            };

            const appendChild = Element.prototype.appendChild;

            const urlCatchers = [
                "/AuthenticationService.Authenticate?",
                "/QuotaService.RecordEvent?"
            ];

            Element.prototype.appendChild = function(element) {
                const isGMapScript = element.tagName === 'SCRIPT' && /maps\.googleapis\.com/i.test(element.src);
                const isGMapAccessScript = isGMapScript && urlCatchers.some(url => element.src.includes(url));

                if (!isGMapAccessScript) {
                    return appendChild.call(this, element);
                }
                return element;
            };
        })();
    </script>
</body>

</html>

Artık ücretsiz bir şekilde Google Haritaları kullanabilirsiniz.

Tarih:Genel

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir