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 kendinize rehberlik edeceksiniz. 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 çalıştıran bir ortam oluşturmanız gerekir. Bu eğitimde ortam 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şturacaksınız:

<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ıç 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ştirmeyi unutmayın.

<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! Maps JavaScript API'de Google'ın 3D haritalarını kullanan bir uygulama yazdınız.

Sonraki adımlar

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