Başlarken

Bu eğiticide, Haritalar JavaScript'te Fotogerçekçi 3D Haritalar'ı kullanarak ilk JavaScript programınızı (arka planda Marin Burunları bulunan Golden Gate Köprüsü'nün kuş bakışı görünümünü gösteren basit bir pencere) oluştururken size rehberlik edeceksiniz.

Eğiticiyi tamamladıktan sonra, geliştirme ortamınızda aşağıdaki haritayı görmeniz gerekir:

Ortamınızı ayarlama

Kod yazmaya başlamadan önce, JavaScript çalıştıran bir ortam kurmanız gerekir. Bu eğitim için ortamınız olarak web tarayıcısı kullanacaksınız. Modern web tarayıcılarının tümü JavaScript için yerleşik destek sunduğundan ek yazılım yüklemenize gerek yoktur.

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

HTML sayfası yazma

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

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

JavaScript ekleyin

Ardından, haritayı yüklemek için JavaScript kodu ekleyin. Kod iki öğe içerir:

  • gmp-map-3d, başlangıç kamera konumu 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çeriyor. YOUR_KEY kısmını API anahtarınızla değiştirmeyi unutmayın.
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
  </body>
</html>

Programı çalıştırma

Programı çalıştırmak ve sonucu görmek için aşağıdaki adımları izleyin:

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

Tebrikler! Google Haritalar JavaScript API'si fotogerçekçi 3D haritaları kullanarak bir program yazdınız.

Sonraki adımlar

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