{"id":535,"date":"2022-07-15T13:54:02","date_gmt":"2022-07-15T13:54:02","guid":{"rendered":"https:\/\/smultron.software\/google-maps-na-stronie-internetowej\/"},"modified":"2024-06-13T17:01:41","modified_gmt":"2024-06-13T17:01:41","slug":"google-maps-na-stronie-internetowej","status":"publish","type":"post","link":"https:\/\/smultron.software\/pl\/blog\/google-maps-na-stronie-internetowej","title":{"rendered":"Google Maps na stronie internetowej"},"content":{"rendered":"\n

Google Maps to pot\u0119\u017cne narz\u0119dzie. Dzi\u0119ki niemu mo\u017cemy odnale\u017a\u0107 interesuj\u0105ce nas miejsce, wyznaczy\u0107 optymaln\u0105 tras\u0119 z punktu A do punktu B, znale\u017a\u0107 dane kontaktowe danej firmy i wiele wiele innych. Wi\u0119ksza cz\u0119\u015b\u0107 spo\u0142eczno\u015bci korzystaj\u0105cej na co dzie\u0144 z internetu zna to rozwi\u0105zanie i potrafi si\u0119 nim pos\u0142ugiwa\u0107 co najmniej w podstawowym stopniu. Przez to jest to platforma o kt\u00f3rej my\u015blimy w pierwszej kolejno\u015bci gdy potrzebujemy umie\u015bci\u0107 na swojej stronie internetowej map\u0119 jakiego\u015b obszaru z interesuj\u0105cymi odwiedzaj\u0105cych informacjami. Znajomy UI pozwala u\u017cytkownikom w szybszy spos\u00f3b pos\u0142u\u017cy\u0107 si\u0119 map\u0105 na Twojej stronie.<\/p>\n\n\n\n

Jak osadzi\u0107 map\u0119<\/h2>\n\n\n\n

Osadzenie mapy Google Maps na stronie internetowej mo\u017cemy wykona\u0107 na kilka sposob\u00f3w. <\/p>\n\n\n\n

Najprostszy spos\u00f3b (ale i daj\u0105cy najmniejsze mo\u017cliwo\u015bci wp\u0142ywu na to, co na mapie b\u0119dzie si\u0119 znajdowa\u0107) to udost\u0119pnienie widoku mapy za pomoc\u0105 iframe bezpo\u015brednio z Google Maps.<\/p>\n\n\n\n

Osadzanie iFrame z Google Map<\/h3>\n\n\n\n
    \n
  1. Wchodzimy na stron\u0119 map: https:\/\/www.google.com\/maps\/?hl=pl<\/a><\/li>\n\n\n\n
  2. Wyszukujemy interesuj\u0105cy nas obiekt<\/li>\n\n\n\n
  3. W lewym panelu klikamy \u201cUdost\u0119pnij\u201d
    \"\"<\/figure> <\/li>\n\n\n\n
  4. Na otwartym popupie wybieramy zak\u0142adk\u0119 \u201cUmieszczanie mapy\u201d
    \"\"<\/figure> <\/li>\n\n\n\n
  5. Mo\u017cemy wybra\u0107 jeden z rozmiar\u00f3w iframe mapy lub poda\u0107 w\u0142asne<\/li>\n\n\n\n
  6. Nast\u0119pnie kopiujemy wygenerowany kod HTML i wklejamy w odpowiednim miejscu na naszej stronie.<\/li>\n<\/ol>\n\n\n\n

    Osadzanie iFrame Google Map z tras\u0105<\/h3>\n\n\n\n

    W podobny spos\u00f3b mo\u017cemy udost\u0119pni\u0107 r\u00f3wnie\u017c tras\u0119 z punktu A do punktu B<\/p>\n\n\n\n

      \n
    1. Wyznaczamy tras\u0119
      \"\"<\/figure>
      <\/li>\n\n\n\n
    2. W lewym g\u00f3rnym rogu klikamy ikon\u0119 menu
      \"\"<\/figure>
      <\/li>\n\n\n\n
    3. Wybieramy \u201cUdost\u0119pnij lub umie\u015b\u0107 map\u0119\u201d<\/li>\n\n\n\n
    4. Dalej post\u0119pujemy analogicznie do opisu z udost\u0119pnienia punktu na mapie (podpunkty 4-6)<\/li>\n<\/ol>\n\n\n\n

      Jak wida\u0107, ten rodzaj osadzania Google Map na stronie nie daje nam zbyt wielu mo\u017cliwo\u015bci. Mo\u017cemy jedynie wybra\u0107 istniej\u0105ce miejsce (lub tras\u0119) na mapie i zmieni\u0107 jej rozmiar.<\/p>\n\n\n\n

      Pozosta\u0142e sposoby wymagaj\u0105 znajomo\u015bci programowania, ale dzi\u0119ki udost\u0119pnionym API mo\u017cemy osi\u0105gn\u0105\u0107 z mapami du\u017co wi\u0119cej. <\/p>\n\n\n\n

      Je\u015bli wi\u0119c potrzebujesz umie\u015bci\u0107 na stronie map\u0119 z wieloma znacznikami, informacjami dotycz\u0105cymi zasi\u0119gu wybranej us\u0142ugi lub wzbogaci\u0107 j\u0105 o interakcje czy dane, kt\u00f3re nie s\u0105 og\u00f3lnodost\u0119pne, to warto zwr\u00f3ci\u0107 si\u0119 z takim zadaniem do specjalisty<\/a>.<\/p>\n\n\n\n

      Kiedy potrzebne jest u\u017cycie API Google Maps?<\/h2>\n\n\n\n

      W ramach platformy Google Maps mo\u017cemy korzysta\u0107 z kilkunastu API odnosz\u0105cych si\u0119 do r\u00f3\u017cnych funkcjonalno\u015bci i danych Map Google. <\/p>\n\n\n\n

      API b\u0119dzie nam te\u017c potrzebne gdy b\u0119dziemy chcieli zbudowa\u0107 produkt oparty na Mapach Google.<\/p>\n\n\n\n

      W tym artykule skupimy si\u0119 na API potrzebnym do budowy map, kt\u00f3re chcemy wykorzysta\u0107 na stronie internetowej. Najcz\u0119\u015bciej b\u0119dzie to Maps Javascript API<\/strong>.<\/p>\n\n\n\n

      Za\u0142\u00f3\u017cmy, \u017ce jeste\u015bmy w\u0142a\u015bcicielami firmy, kt\u00f3ra ma kilka oddzia\u0142\u00f3w w Polsce i kilka za granic\u0105. Na naszej stronie chcieliby\u015bmy zaprezentowa\u0107 map\u0119 z prze\u0142\u0105cznikiem, dzi\u0119ki kt\u00f3remu b\u0119dziemy mogli pokaza\u0107 oddzielnie oddzia\u0142y polskie i zagraniczne. <\/p>\n\n\n\n

      Aby zbudowa\u0107 map\u0119 o takiej funkcjonalno\u015bci b\u0119dziemy musieli skorzysta\u0107 z Maps Javascript API<\/strong>.<\/p>\n\n\n\n

      Innym przyk\u0142adem mo\u017ce by\u0107 umieszczenie na stronie kontaktowej mapy z niestandardow\u0105 pinezk\u0105 i dymkiem informuj\u0105cym o lokalizacji biznesu, albo mapy o niestandardowej palecie kolor\u00f3w.<\/p>\n\n\n\n

      \n\t
      \n\t\t
      \n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego? Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t
      \n\t\t\t\n
      \n\t
      \n\t\t\t\t\t\n\t\t\t<\/div>\n\t
      \n\t\t
      \n\t\t\t\n\t\t\t\thello@smultron.pl\t\t\t<\/a>\n\t\t<\/div>\n\t\t
      \n\t\t\t\n\t\t\t\t+48 791 991 797\t\t\t<\/a>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\n

      Czy korzystanie z Maps Javascript API jest darmowe?<\/h2>\n\n\n\n

      Miesi\u0119cznie <\/strong>przys\u0142uguje nam 28 500 request\u00f3w<\/strong> (czyli r\u00f3wnowarto\u015b\u0107 200$)  do wykorzystania bez<\/strong> poniesienia \u017cadnych koszt\u00f3w<\/strong>. Bezpiecznie mo\u017cna za\u0142o\u017cy\u0107, \u017ce taka liczba request\u00f3w powinna by\u0107 wystarczaj\u0105ca dla stron ma\u0142ych\/\u015brednich przedsi\u0119biorstw, gdzie ruch na stronach z mapami nie b\u0119dzie przekracza\u0142a 20 000 wy\u015bwietle\u0144\/miesi\u0105c.<\/p>\n\n\n\n

      Mimo to, aby m\u00f3c u\u017cywa\u0107 Map Google musimy utworzy\u0107 konto w Google Cloud Platform z podpi\u0119t\u0105 do niego kart\u0105 kredytow\u0105, poniewa\u017c korzystanie z API powy\u017cej tego limitu nie jest darmowe.<\/p>\n\n\n\n

      W przypadku stron o wi\u0119kszym ruchu b\u0119dziemy musieli zap\u0142aci\u0107 za ka\u017cdy dodatkowy 1000 request\u00f3w. Op\u0142aty s\u0105 r\u00f3\u017cne, w zale\u017cno\u015bci od wykorzystanego API i sumarycznej ilo\u015bci zapyta\u0144. Przyk\u0142adowy koszt Maps Javascript API, po przekroczeniu 28 500 zapyta\u0144 to 7$ za ka\u017cdy kolejny 1000 zapyta\u0144 (powy\u017cej 100 000 zapyta\u0144 koszt za 1000 request maleje).<\/p>\n\n\n\n

      Co przekaza\u0107 programi\u015bcie, aby zaimplementowa\u0142 Google Maps<\/h2>\n\n\n\n
        \n
      1. Za\u0142\u00f3\u017c konto w Google cloud platform (je\u015bli masz ju\u017c konto – zaloguj si\u0119). <\/li>\n\n\n\n
      2. Podczas procesu rejestracji zostaniesz poproszony o dane wymagane do utworzenia konta oraz podanie danych do p\u0142atno\u015bci.<\/li>\n\n\n\n
      3. Dodaj szczeg\u00f3\u0142y p\u0142atno\u015bci (bez poprawnych danych p\u0142atno\u015bci Mapy Google nie b\u0119d\u0105 dzia\u0142a\u0107 na Twojej stronie)<\/li>\n\n\n\n
      4. Po poprawnym zalogowaniu do panelu zostanie utworzony nowy projekt. Je\u015bli si\u0119 tak nie stanie utw\u00f3rz projekt klikaj\u0105c \u201cUtw\u00f3rz projekt\u201d (lub u g\u00f3ry \u201cwybierz projekt\u201d a nast\u0119pnie \u201cutw\u00f3rz projekt\u201d
        \"\"<\/figure>
        <\/li>\n\n\n\n
      5. Utw\u00f3rz nowy projekt, podaj\u0105c nazw\u0119 oraz wybieraj\u0105c organizacj\u0119, je\u015bli zosta\u0142a wcze\u015bniej utworzona
        \"\"<\/figure>
        <\/li>\n\n\n\n
      6. Przejd\u017a do w\u0142\u0105czenia wymaganych API (zazwyczaj b\u0119dzie to Maps Javascript API – poinformujemy Ci\u0119 jakie API jest potrzebne aby zbudowa\u0107 wymagan\u0105 funkcjonalno\u015b\u0107). Otw\u00f3rz lewy panel klikaj\u0105c ikon\u0119 menu, wybierz \u201cInterfejsy API…\u201d > \u201cPanel\u201d > Kliknij \u201cW\u0142\u0105cz interfejsy API i us\u0142ugi\u201d
        \"\"<\/figure>
        \"\"<\/figure>

        Wyszukaj lub wybierz wybrane API (w naszym przypadku Maps Javascript API):<\/p>

        \"\"<\/figure>

        Nast\u0119pnie kliknij \u201cW\u0142\u0105cz\u201d:<\/p>

        \"\"<\/figure>
        <\/li>\n\n\n\n
      7. Przejd\u017a do tworzenia danych logowania (klucz API kt\u00f3ry b\u0119dziesz musia\u0142 przekaza\u0107 programi\u015bcie<\/strong>). Otw\u00f3rz lewy panel klikaj\u0105c ikon\u0119 menu, wybierz \u201cInterfejsy API…\u201d > \u201cDane logowania\u201d<\/li>\n\n\n\n
      8. Kliknij \u201cUtw\u00f3rz dane logowania\u201d > \u201cKlucz interfejsu API\u201d
        \"\"<\/figure>

        Skopiuj klucz i przejd\u017a do ograniczenia klucza:<\/p>

        \"\"<\/figure>
        <\/li>\n\n\n\n
      9. Przejd\u017a do ograniczenia klucza API (w przypadku Maps Javascript API klucz API b\u0119dzie widoczny w kodzie strony, warto wi\u0119c go ograniczy\u0107 aby nikt poza Tob\u0105 nie nara\u017ca\u0142 Ci\u0119 na koszty zwi\u0105zane z wykorzystaniem Google Cloud Platform). Najlepiej ograniczy\u0107 klucz do wykorzystania wy\u0142\u0105cznie w obr\u0119bie Twojej strony i wy\u0142\u0105cznie z wymaganymi API

        Ograniczanie dost\u0119pu do witryny:<\/p>

        \"\"<\/figure>

        Ograniczenie Interfejs\u00f3w API (zaznaczamy \u201cOgranicz klucz\u201d > klikamy \u201cSelect API\u201d i wpisujemy nazw\u0119 API, zaznaczmy i klikamy \u201cok\u201d:<\/p>

        \"\"<\/figure>
        \"\"<\/figure>
        <\/li>\n\n\n\n
      10. Kliknij \u201cZapisz\u201d. Od tej chwili nasz klucz API powinien dzia\u0142a\u0107 w obr\u0119bie domeny kt\u00f3r\u0105 podali\u015bmy w poprzednim kroku.
        \"\"<\/figure>
        <\/li>\n<\/ol>\n\n\n\n

        Jak znale\u017a\u0107 koordynaty miejsca w Google Maps<\/h2>\n\n\n\n

        Czasami potrzebujemy znale\u017a\u0107 koordynaty (szeroko\u015b\u0107 i d\u0142ugo\u015b\u0107 geograficzn\u0105) danego miejsca na mapie. <\/p>\n\n\n\n

        Aby to zrobi\u0107 klikamy prawym przyciskiem myszy  dok\u0142adnie w miejscu kt\u00f3rego wsp\u00f3\u0142rz\u0119dne chcieliby\u015bmy pozna\u0107. <\/p>\n\n\n\n

        Pierwsza pozycja na rozwini\u0119tym menu to wsp\u00f3\u0142rz\u0119dne geograficzne. Gdy w nie klikniemy – skopiuj\u0105 si\u0119 automatycznie do schowka.<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        Niestandardowe stylowanie Google Maps<\/h2>\n\n\n\n

        Gdy umieszczamy mapk\u0119 na stronie za pomoc\u0105 API, mo\u017cemy wp\u0142yn\u0105\u0107 na jej wygl\u0105d. <\/p>\n\n\n\n

        Jeste\u015bmy w stanie zmieni\u0107 palet\u0119 kolor\u00f3w, ukry\u0107 niekt\u00f3re warstwy danych, uwypukli\u0107 inne, usun\u0105\u0107 lub zmieni\u0107 elementy UI na niestandardowe.<\/p>\n\n\n\n

        Przy stylowaniu map przydatnym narz\u0119dziem jest strona https:\/\/snazzymaps.com\/explore<\/a>, mo\u017cemy tutaj podejrze\u0107\/wybra\u0107\/dostosowa\u0107 r\u00f3\u017cne style wizualne. Na stronie znajdziemy bardzo wiele przyk\u0142ad\u00f3w kt\u00f3re mo\u017cemy filtrowa\u0107 dost\u0119pnymi filtrami oraz wyszukiwark\u0105.<\/p>\n

        \n\t
        \n\t\tSkontaktuj si\u0119 z nami\t<\/div>\n\t
        \n\t\t\n
        \n\t
        \n\t\t
        \n\t\t\t\n\t\t\t
        \n\t\t\t\t
        Marcin Stawowiak<\/div>\n\t\t\t\t
        \n\t\t\t\t\tCo-founder, Executive Manager\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t
        \n\t\t
        \n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego?
        Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t
        \n\t\t\thello@smultron.pl<\/a>\n\t\t\t+48 791 991 797<\/a>\n\t\t<\/div>\n\t<\/div>\n\t
        \n\t\t
        \n\t\t\tSmultron Web Development\t\t<\/div>\n\t\t
        \n\t\t\tul. S\u0142awkowska 12\t\t\t\n\t\t\t31-014 Krak\u00f3w\t\t<\/div>\n\t\t
        \n\t\t\tNIP: 6762482785\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t\n
        \n\t\n
        \n

        <\/p>

          <\/ul><\/div>\n
          \n
          \n<\/fieldset>\n
          \n
          \n
          \n\t\t\tWype\u0142nij poni\u017cszy formularz\n <\/div>\n
          \n
          \n