Google Maps API pro více míst

Pracoval jsem na vytvoření stránky s místy pro koncept restaurace s více místy. V současnosti je převládajícím trendem zahrnutí mapy Google se značkou pro každé místo.

Obrovské společnosti, které mají pobočky po celém světě, mají rozsáhlé databáze map a mnoho různých překážek, které je třeba překonat – schopnost vyhledávat podle města nebo PSČ, dostupnosti Wi-Fi, otevírací doby a tak dále.

Pro svůj konkrétní projekt jsem měl jen několik potřeb:

  • Zahrnout na moji stránku mapu
  • Zobrazit značku pro každé místo
  • Každá značka zobrazuje adresu a může poskytovat pokyny

K tomu jsem potřeboval Google Maps API, součást Google Developers.

Moje největší mylná představa o rozhraní API Google Maps, než se do nich podívám, je, že do webu vkládáte Mapy Google tak, jak je známe. Myslel jsem, že jednoduchým přidáním značky místa se na postranním panelu objeví všechny informace, jako je adresa a vyhledávací pole pro trasu.

Ukázalo se, že tomu tak není – dostanete mapu, ale pouhé přidání značky nevede k žádné z očekávaných akcí. Přišel jsem na něco, co mi fungovalo, a napíšu vám o krocích, které jsem podnikl, pro případ, že by se někdo potýkal s podobnou situací.

Získat klíč Javascript API pro Mapy Google

Google Maps API jsou k dispozici v několika variantách – Android, iOS, webové a webové služby. Jednoduché vložení mapy pomocí několika značek na váš web spadá do kategorie web, která je známá jako Google Maps Javascript.

Prvním krokem je získání klíče API.

Budete muset souhlasit s jejich podmínkami a službami.

Budou chtít, abyste to pojmenovali a rozhodli o případných omezeních. Pokud na něj neuložíte žádná omezení, může jej použít kdokoli a vyčerpat vaši kvótu. Mapy jsou zdarma pouze do určitého bodu.

Poté se objeví s nějakým super zabezpečeným řetězcem znaků a nyní máte klíč.

Nyní, když mám klíč, mohu začít implementovat Mapy Google na svůj web.

Vložení mapy na svůj web

Dokumentace pro Google Maps API je rozsáhlá. Mají docela dobrý "Ahoj, světe!", neboli návod pro začátečníky. Než budete moci přejít k pokročilejším konceptům, je důležité se ujistit, že je vše správně nastaveno.

Stejně jako u všeho interaktivního na webu existují tři komponenty – HTML, CSS a JavaScript. Příklad na webu dává vše do jednoho souboru, ale začneme je rozdělovat do tří samostatných souborů, protože tak budete mít svůj projekt nastavený ve skutečnosti.

HTML

Mám běžný dokument HTML5, který odkazuje na šablonu stylů CSS a skript JS. Mapa bude obsažena v <div id="map"></div> . Samozřejmě musíte nahradit YOUR_API_KEY pomocí klíče z předchozího kroku.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Google Maps APIs</title>

    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>
<script src="script.js"></script>
<script
  async
  defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
></script>
```

CSS

CSS poskytovaný společností Google je určen pro mapu na celou obrazovku. Vkládám to do style.css .

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

html a body třídy musí mít 100% výšku, stejně jako map id. Nastavení okraje a odsazení na 0 resetuje prohlížeč.

Tento kód je v pořádku, ale raději bych nastavil něco ve smyslu height: 60vh na map id. 60vh by se rovnalo 60 % výšky výřezu, takže by zabíralo 60 % dostupné plochy obrazovky. Tímto způsobem by uživatel mohl snadno posouvat mapu na jakýkoli další obsah, který máte. V zájmu tohoto článku to nechám na 100 %, protože nemám žádný další obsah.

V tomto okamžiku jste skončili s HTML a CSS, pokud jde o mapu.

JavaScript

Zde vložím počáteční příklad Google v script.js .

var map

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644,
    },
    zoom: 8,
  })
}

Deklaruji map proměnnou, která spouští mapu pomocí initMap() a umístění mapy Google do mého ID mapy CSS uvnitř map proměnná.

center rozhoduje, kde by měla být mapa vycentrována (Sydney, Nový Jižní Wales, Austrálie) a zoom určuje, jak daleko bude přiblíženo.

Nyní byste měli mít funkční mapu.

Přizpůsobení mapy

Mapu mám, ale zatím nic konkrétního nedělá. Můžete přibližovat a oddalovat zobrazení, přepínat mezi zobrazením ulic a satelitním zobrazením a kliknutím a přetažením mapy.

Chtěl jsem přidat značku, tak jsem se podíval na stránku Markers v dokumentaci. Přidání značky však dělá jen to - a nic jiného. Poté jsem přešel na Info Windows, která přidává podrobnosti do značky. Myslel jsem, že vyskakovací okno může obsahovat jakékoli informace o dané oblasti v Mapách Google, ale informační okno obsahuje pouze váš vlastní obsah.

Zdá se, že webová služba Google Places API se o něco více integruje s databází Map Google, ale je také mnohem obtížnější implementovat, takže jsem se pro svůj projekt držel Javascript API Map Google.

Při hledání jednoduchého a efektivního způsobu, jak zahrnout více značek s adresami a informacemi, jsem našel tento vynikající příspěvek na StackOverflow. Za toto řešení si nemohu připsat zásluhy. Je to velmi flexibilní kousek kódu, který mi opravdu pomohl v mém projektu.

Cíl

Definujme cíl a pak jej uskutečňme.

  • Jako příklad použiji Chipotle.
  • Místo bude Chicago.
  • Budu předstírat, že existují pouze tři lokace Chipotle, ale může jich přijít více.
  • Každé místo bude mít vyskakovací okno s názvem, adresou a odkazem na trasu

K tomu budu potřebovat znát adresy míst a také zeměpisnou šířku a délku. Get Lat Long from Address je úžasný samovysvětlující zdroj, který jsem našel a použil.

Místa

Zde jsou moje tři místa.

  • Broadway

  • 5224 N Broadway St, Chicago, IL 60640

  • (41,976816, -87,659916)

  • Belmont

  • 1025 W Belmont Ave, Chicago, IL 60657

  • (41,939670, -87,655167)

  • Sheridan

  • 6600 N Sheridan Rd, Chicago, IL 60626

  • (42,002707, -87,661236)

Další věc, kterou chci, je adresa URL, která vede k získání trasy na toto místo. Za tímto účelem jsem jednoduše šel do Map Google, zadal požadovanou adresu a kliknul na Získat trasu . Nyní mohu získat odkaz na mapu, takže kliknu na Sdílet nebo vložit mapu a získejte adresu URL.

Nyní mám vše, co potřebuji k vytvoření vlastní mapy. Nejprve zavolám funkci initMap.

function initMap() {
  // More
}

Pak pro každé místo vyrobím objekt. Každý objekt je proměnná, která bude obsahovat informační pole, zeměpisnou šířku a délku.

var broadway = {
  info:
    '<strong>Chipotle on Broadway</strong><br>\
    	5224 N Broadway St<br> Chicago, IL 60640<br>\
    	<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
  lat: 41.976816,
  long: -87.659916,
}

info je řetězec, do kterého jsem napsal název a adresu své polohy a také odkaz na trasu v Mapách Google. Přidání \ na konci řádku řetězce vám umožní pokračovat v jeho psaní na dalším řádku.

Také jsem vytvořil objekty pro belmont a sheridan .

Nyní vytvořím pole v proměnné s názvem location který obsahuje info , lat a long .

var locations = [
  [broadway.info, broadway.lat, broadway.long, 0],
  [belmont.info, belmont.lat, belmont.long, 1],
  [sheridan.info, sheridan.lat, sheridan.long, 2],
]

Budu mapu nazývat stejným způsobem jako v "Hello, World!" příklad. Jdu na zoom na 13, protože všechna moje místa jsou blízko u sebe, a center je to na zeměpisné šířce pro Broadway, protože je to prostřední místo.

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 13,
  center: new google.maps.LatLng(41.976816, -87.659916),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
})

S posledním kouskem kódu se množství značek a informačních oken dynamicky aktualizuje na základě našich locations proměnná.

var infowindow = new google.maps.InfoWindow({})

var marker, i

for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
  })

  google.maps.event.addListener(
    marker,
    'click',
    (function (marker, i) {
      return function () {
        infowindow.setContent(locations[i][0])
        infowindow.open(map, marker)
      }
    })(marker, i)
  )
}

Zde je konečný, úplný JavaScript.

function initMap() {
  var broadway = {
    info:
      '<strong>Chipotle on Broadway</strong><br>\
    	5224 N Broadway St<br> Chicago, IL 60640<br>\
    	<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
    lat: 41.976816,
    long: -87.659916,
  }

  var belmont = {
    info:
      '<strong>Chipotle on Belmont</strong><br>\
    	1025 W Belmont Ave<br> Chicago, IL 60657<br>\
    	<a href="https://goo.gl/maps/PHfsWTvgKa92">Get Directions</a>',
    lat: 41.93967,
    long: -87.655167,
  }

  var sheridan = {
    info:
      '<strong>Chipotle on Sheridan</strong><br>\r\
    	6600 N Sheridan Rd<br> Chicago, IL 60626<br>\
    	<a href="https://goo.gl/maps/QGUrqZPsYp92">Get Directions</a>',
    lat: 42.002707,
    long: -87.661236,
  }

  var locations = [
    [broadway.info, broadway.lat, broadway.long, 0],
    [belmont.info, belmont.lat, belmont.long, 1],
    [sheridan.info, sheridan.lat, sheridan.long, 2],
  ]

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(41.976816, -87.659916),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  })

  var infowindow = new google.maps.InfoWindow({})

  var marker, i

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
    })

    google.maps.event.addListener(
      marker,
      'click',
      (function (marker, i) {
        return function () {
          infowindow.setContent(locations[i][0])
          infowindow.open(map, marker)
        }
      })(marker, i)
    )
  }
}

Nyní jsou všechna naše místa na mapě s příslušným informačním polem.