Blog

Ako použiť vlastné marekry v Google mapách

Pracujem na jednom projekte, kde som chcel do Google máp vložiť vlastné markery. Markery majú rôzne farby a sú očíslované. Zistil som, že o podobných riešeniach na internete veľa nie je (aspoň nebolo), a tak som sa musel dopracovať k vlastnému riešeniu.

Postup:

1. Vytvorenie triedy pre marker

Vytvoríme si triedu, ktorá bude reprezentovať náš marker, pri vytváraní inštancie si sem môžeme vložiť akékoľvek dáta, ktoré môžeme neskôr poučiť (napr. v metóde draw). Týmto spôsobom vieme napríklad očíslovať markery.

function MyMarker(latlng,  map, num, status) {
    this.latlng_ = latlng;
    this.num_     = num; //naše číslo
    this.status_ = status;
    this.setMap(map);
}

2. Zdedenie objektu OverlayView

Musíme zdediť objekt OverlayView (ktorý je súčasťou Google API) aby sme mohli pracovať s našou treidou ako s markerom a kresliť do mapy.

CustomMarker.prototype = new google.maps.OverlayView();

3.Vytvorenie metódy na vykreslenie markera

Metóda v ktorej definujeme ako sa má vykrelsliť náš marker. Na tomto mieste pridáme CSS identifikátory a vložíme číslovanie. Pridáme markeru listener na klik a pridáme ho do DOM (dáme vedieť prehliadaču že existuje). Na záver mu povieme ako sa má vykresliť.

MyMarker.prototype.draw = function() {
 var marker = this;
 var div = this.div_;
 if (!div) {
   div = this.div_ = document.createElement('DIV');
   div.className = "htmlMarker";

   //naše číslovanie
   var num = this.num;
   div.innerHTML = '<div class="our-class">'+num+'</div>';
   google.maps.event.addDomListener(div, "click", function(event) {
     google.maps.event.trigger(
marker, "click");
   });
 
  
//Pridáme do DOM
   var panes = this.getPanes();
   panes.overlayImage.appendChild(div);
 }

 //Umiestnenie nášho markera na mape
 var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
 if (point) {
   div.style.left = point.x-20 + 'px';
   div.style.top = point.y-55+ 'px';
 }
};

4. Štýlovanie

Teraz môžeme marker jednoducho naštýlovať pomocou CSS. Marker používame presne tak isto ako defaultný marker, pričom pri vytvorení inštacie posielame číslo nášho markera. Fungujúca ukážku môžete vidieť v mojom projekte houry.info, ktorý slúźi na zisťovanie otváracích hodín (na projekte sa stále pracuje).

Zdroje:

Ostatné články:

Komentáre:
Komentár bol odoslaný