Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

ShanonWEB

Dodanie mapy Google na naszą stronę.

Promowane odpowiedzi

ShanonWEB    738

post-2-0-58382500-1438464171_thumb.jpg

 

Cześć, dnia dzisiejszego przedstawię Wam jak dodać mapę google na swoją stronę. 

 

Co będzie Nam potrzebne? Niewiele, lecz kilka rzeczy: 

  • edytor HTML (Osobiście polecam: notepad++, sublime text 2, rapid php) 

  • przeglądarka internetowa (chrome, opera, firefox)

Aby dodać mapę na naszą stronę należy wstawić kod JavaScript, który również jest udostępniony na tej stronie.

 

Załóżmy, że nasza strona posiada taki kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Nasza pierwsza strona</title>
        </head>
    <body>
    <h1>Nasza pierwsza strona.</h1>
    </body>
</html>

Teraz dodamy funkcję odpowiadającą dla api mapki, wstawiamy ją między znaczniki <head> </head>

<script type='text/javascript'>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
</script> 

mapTypeId - podajemy typ/wygląd mapy

(44.5403, -78.5463) - podajemy współrzędne lokalizacji

zoom: 8 - podajemy wartość przybliżenia

(Jeżeli chciałbyś dodać inny wygląd mapy należy odwiedzić stronę.)

 

Następnie dodajemy diva o id="mapconvas", a w nim definiujemy wysokość oraz szerokość naszej mapy: (wstawiamy między znaczniki <body></body>)

 

width: 500px; - mapa będzie miała 500 pikseli szerokości

height:400px; - mapa będzie miała 400 pikseli wysokości.

<div id="map-canvas" style="width: 500px; height: 400px;"></div>

Cały kod prezentuje się następująco:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Nasza pierwsza strona</title>
        </head>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas" style="width: 500px; height: 400px;"></div>
  </body>
 
</html>

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
SeNioR    6,716

A nie lepiej zrobić to prościej?

Przechodzimy do Google Maps, wpisujemy naszą lokalizację np. Warszawa

Następnie klikamy w ikonkę przy wyszukiwarce.

post-2-0-80717100-1438464669.jpg

Przechodzimy do Udostępnij lub umieść mapę -> Umieść mapę -> Możemy wybrać sobie rozmiar i kopiujemy kod następnie umieszczamy ten kod w dowolnym miejscu na stronie.

W kodzie mamy już zawarte współrzędne lokalizacji i rozmiar.

 


 

Edytowane przez SeNioR
  • Lubię to! 3

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×