Google Maps API - mapa z markerem

W kolejnej częsci naszego kursu Google Maps API zobaczysz jak umieścić na stronie prostą mapę Google z markerem. To nic trudnego. Poradzisz sobie, jeśli tylko masz podstawową wiedzę z HTML i CSS oraz choć minimalną znajomością JavaScript.

Wyświetl mapę na osobnej stronie

Cały kod strony z mapą:

Poniżej cały kod html wraz ze skyptem Google Maps API. Skopiuj i wklej do edytora (chodzi o edytor dla programistów np. np. RJ TextEd lub inny), a następnie zapisz jako plik html i otwórz plik w przeglądarce (np. Chrome). Powinna się wyświtlić strona z mapą (jak powyżej).

UWAGA! Pamietaj o wpisaniu/podmianie Klucza API. Jak uzyskać klucz API?


<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>Mapa Google z markerem</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Marker
  var marker = {lat: 51.344, lng: 18.036};
  // The map, centered at Marker
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: marker});
  // The marker, positioned at Marker
  var marker = new google.maps.Marker({position: marker, map: map});
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=Twój_klucz_API&callback=initMap">
    </script>
  </body>
</html>

A teraz rozkładając na czynniki pierwsze, czyli o co chodzi w tym kodzie...

Tytuł:

<h3>My Google Maps Demo</h3>

Osadzenie mapy:

<div id="map"></div>

Styl:

<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

width - szerokość okna z mapą
height - wysokość okna
background-color - kolor tła

Skrypt wywołujący mapę:

// Initialize and add the map
function initMap() {
  // The location of Marker
  var uluru = {lat: 51.344, lng: 18.036};
  // The map, centered at Marker
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: marker});
  // The marker, positioned at Marker
  var marker = new google.maps.Marker({position: marker, map: map});
}

Współrzędne markera:

  // The location of Marker
  var marker = {lat: 51.344, lng: 18.036};

Powiększenie (zoom) oraz wyśrodkowanie (center):

  // The map, centered at Marker
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: marker});

Klucz API

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Odsłony: 6301