Başlama

Platform seçin: Android iOS JavaScript

Bu eğitimde, Maps JavaScript API'deki 3D Haritalar'ı kullanarak ilk JavaScript uygulamanızı oluşturma konusunda size yol göstereceğiz. Bu uygulama, arka planda Marin Headlands ile Golden Gate Köprüsü'nün yukarıdan görünümünü gösteren temel bir penceredir.

Eğitimi tamamladığınızda geliştirme ortamınızda aşağıdaki haritayı görürsünüz:

Ortamınızı ayarlama

Kod yazmaya başlamadan önce JavaScript'i çalıştıran bir ortam ayarlamanız gerekir. Bu eğitimde ortamınız olarak bir web tarayıcısı kullanacaksınız. Tüm modern web tarayıcılarında JavaScript için yerleşik destek bulunur. Bu nedenle, ek bir yazılım yüklemeniz gerekmez.

  1. İstediğiniz bir metin düzenleyiciyi açın.
  2. Yeni bir dosya oluşturun ve dosyayı .html uzantısıyla (ör. hello-p3djs.html) kaydedin.

HTML sayfası yazma

Başlamak için temel bir HTML yapısına sahip bir web sayfası oluşturursunuz:

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

JavaScript ekleme

Ardından, haritayı yüklemek için özel bir HTML öğesi ekleyeceksiniz. Kod iki öğe içerir:

  • gmp-map-3d, başlangıçtaki kamera konumunu ve görünümünü başlatmak için kullanılan parametreleri içerir.
  • script, Maps JavaScript API'yi yükleme çağrısını içerir. YOUR_KEY kısmını API anahtarınızla değiştirdiğinizden emin olun.

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

Uygulamayı çalıştırın

Uygulamayı çalıştırmak ve çıkışı görmek için aşağıdaki adımları uygulayın:

  1. Oluşturduğunuz HTML dosyasını kaydedin.
  2. Dosyayı bir web tarayıcısında açın (dosyayı çift tıklayabilir, bir tarayıcı penceresine sürükleyebilir veya sağ tıklayıp "Birlikte aç"ı kullanabilirsiniz).
  3. Haritayı tarayıcı pencerenizde görmeniz gerekir.

Tebrikler! Google'ın Maps JavaScript API'sindeki 3D Haritalar'ı kullanarak yeni bir uygulama yazdınız.

Sonraki adımlar

  • Google'ın mevcut örneklerini kullanarak daha karmaşık 3D harita deneyimleri oluşturun.
  • Referans belgelerini okuyarak Maps JavaScript API'deki 3D Haritalar'ın tüm potansiyelini keşfedin.