Başlama

Bu eğiticide, Haritalar JavaScript'teki Fotogerçekçi 3D Haritalar'ı kullanarak ilk JavaScript uygulamanızı oluşturma konusunda rehberlik edeceksiniz. Bu, arka planında Marin Headlands ile Golden Gate Köprüsü'nün yukarıdan görünümünü gösteren temel bir penceredir.

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 oluşturmanız gerekir. Bu eğitim için ortamınız olarak bir web tarayıcısı kullanacaksınız. Tüm modern web tarayıcıları yerleşik JavaScript desteğine sahiptir. Bu nedenle herhangi bir ek yazılım yüklemenize gerek yoktur.

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

HTML sayfası yazma

Başlangıç olarak temel HTML yapısına sahip bir web sayfası oluşturacaksınız:

<!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

Sonra, haritayı yüklemek için özel bir HTML öğesi ekleyeceksiniz. Bu kodda iki öğe bulunur:

  • gmp-map-3d, başlangıç kamerası 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çeriyor. YOUR_KEY kısmını API anahtarınızla değiştirdiğinizden emin olun.
<!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 mode="hybrid" center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=beta&libraries=maps3d"></script>
  </body>
</html>

Uygulamayı çalıştırın

Uygulamayı çalıştırmak ve sonucu 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ç" seçeneğini kullanabilirsiniz).
  3. Haritayı tarayıcı pencerenizde göreceksiniz.

Tebrikler! Maps JavaScript API'de Google'ın Fotogerçekçi 3D Haritalar'ını kullanarak 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 Fotogerçekçi 3D Haritalar'ın tam potansiyelini keşfedin.