Google maps API – zobrazení adres z databáze na mapě (2.)

by ·Komentáře: 5

V předchozím díle jsme vytvořili vrstvu s vloženou dynamickou mapou maps.google.com.
viz. Google maps API – zobrazení adres z databáze na mapě (1.)

Nyní zapíchneme do mapy špendlík na základě znalosti GPS souřadnice požadovaného bodu. (V dalších dílech to vylepšíme a budeme zobrazovat špendlík na základě adresy.)

Přidáme následující funkci, která vytváří značku na mapě:

// Vytvoření značek s písmennými indexy
function createMarker(point, index, address, name, mark) {
  // Vytvoření ikony (špendlíku) s písmenkem
  var letter = String.fromCharCode("A".charCodeAt(0) + index);
  var letteredIcon = new GIcon(baseIcon);
  letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
  // Vytvoření GMarkerOptions objektu
  markerOptions = { icon:letteredIcon };
  map.setCenter(point, zoom);
  var marker = new GMarker(point, markerOptions);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("<b>" + name + "</b><br />" + address + "<br /><i>" + mark + "</i>");
  });
  return marker;
}

A ještě funkci, která definuje, kam se mají značky umístit. (Prozatím jsou tam napevno definovány body, ale to do budoucna ještě vylepšíme.)

// Umístění několika značek
function markers() {
  map.addOverlay(createMarker(new GLatLng("50.769396","15.058115"),0,"E. Beneše 1, Lbc","radnice","na náměstí"));
  map.addOverlay(createMarker(new GLatLng("50.769878","15.064402"),1,"Husova 922, Lbc","nemocnice","krajská nemocnice Liberec"));
  map.addOverlay(createMarker(new GLatLng("50.759902","15.052428"),2,"Nitranská 415, Lbc","Babylon","zábavou k prázdné peněžence"));
}

Inicializaci při načítání stránky doplníme o funkci markers pro vykreslení značek:

<body onload="initialize();markers();"></body>

V příštím díle vytvoříme funkci, která umístí značku podle zadané adresy (tedy bez znalosti GPS souřadnic).
Třetí díl: Google maps API – zobrazení adres z databáze na mapě (3.)

,

5 komentářů

  1. Dobry den,
    narazil jsem na tyto Vaše články o google maps a velice mi pomohly, nicméně myslím, že tam nefunguje to vycentrování mapy.
    Mapa se zobrazí na posledním definovaném bodě. Ve vašem případě Nitranská 415. Pokusil jsem se centrování nahradit: map.setCenter(new GLatLng(49.586678, 15.795593), 7);
    coz by melo mit za nasledek aby byla videt v zakladni pozici cela mapa ČR a v ni definovane body. Nicmene bez odezvy nijak se tato zmena neprojevi. ¨

    Nemohl byste se k tomuto scriptu vratit a pomoci mi tento problem objasnit?
    Velice děkuji

    Odpovědět

    1. Bohužel to je s centrováním přesně tak, jak píšete – center se nastaví na poslední přidaný bod.
      To dělá funkce createMarker na řádku
      map.setCenter(point, zoom);

      Takže center se nastavuje vlastně dvakrát
      – poprvé je to ve funkci initialize řádek
      map.setCenter(new GLatLng(50.769396,15.058115), zoom);

      Tak já bych asi jako ad hoc řešení vyhodil to centrování z funkce createMarker a ve funkci initialize si nastavte nějaké optimum ručně.

      Nicméně připravuji článek o statických mapách google, které sice neumí tolik jako dynamické, ale umí si samy nastavit optimální zoom i center podle toho, jaké body na mapě zobrazujete. Tak prosím sledujte můj blog (počítám, že to bude začátkem příštího týdne – snad).

      Odpovědět

  2. Dobrý den,
    mám problém s propojením databáze mysql s výše uvedeným java skriptem ve funkci markers().
    Načtu do pole z databáze pomocí php souřadnice, které chci znázornit. Problém mám s indexem $j:
    map.addOverlay(createMarker(new GLatLng( , ) ,1,“Bavorsko“,“II/1″,“kamenný mezník“,“899712.44″,“1004916.11″,“646.59″));
    Když místo proměnné $j dám konkréní hodnotu, tak je to OK. Pokoušel jsem se to řešit pomocí cyklu, jenže java skript nezná právě tu proměnnou $j. Pomůžete mi?

    Odpovědět

    2. Nevím, jestli následující část kódu bude fungovat ve stylu copy – paste, ale zkuste to prozkoumat.
      V zásadě jde o to, že si přes php vytvořím normální javovské pole a v něm se pak pohybuji pomocí javovských prostředků.

          function markers() {
      // Add markers to the map
< ?php
      $i = 0;
      echo "java_adresa = [";
      foreach($adresy as $adresa){
        echo """.$adresa[3].", ".$adresa[10]." ".$adresa[4].""";
        if($i < count($adresy)-1) echo ",";
        $i++;
      }
      echo "];n";
?>
      for (var i = 0; i < <?php echo count($adresy); ?>; i++) {
        showAddress(java_adresa[i],i,java_jmeno[i],java_poznamka[i]);
      }
    }
      Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

CAPTCHA

*