Başlama

Bu eğitimde, Maps JavaScript'te fotogerçekçi 3D Haritalar'ı kullanarak ilk JavaScript programınızı oluşturacaksınız. Bu program, arka planda Marin Headlands ile Golden Gate Köprüsü'nün yukarıdan görünümünü gösteren basit 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 olduğundan ek yazılım yüklemeniz gerekmez.

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

HTML sayfası yazma

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

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

JavaScript ekleme

Ardından, haritayı yüklemek için JavaScript kodu 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 değerini 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 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=alpha&libraries=maps3d"></script>
  </body>
</html>

Programı çalıştırma

Programı çalıştırmak ve çıktıyı 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, tarayıcı penceresine sürükleyebilir veya sağ tıklayıp "Bununla aç"ı kullanabilirsiniz).
  3. Haritayı tarayıcı pencerenizde görürsünüz.

Tebrikler! Google'ın Maps JavaScript API'sini kullanarak fotogerçekçi 3D haritalar içeren bir program 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 Haritalar'ın tüm potansiyelini keşfedin.