Új hozzászólás Aktív témák

• Sk8erPeter nagyúr

  #3784

  #3783 bazsika33

  2013-10-19 14:15:25

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Sk8erPeter

  nagyúr

  #3783 bazsika33

  #3783 bazsika33

  Köszönöm a segítséget, a térkép lényegében működik. Egyedül a html-ből állítható zoom nem megy.
  jsfiddle.net

  Tudod, mi volt a gond?
  Ez:

  var zoomLevelAttr = map_canvas.getAttribute('data-map-zoom-level');
  var zoomLevel = (zoomLevelAttr)? zoomLevelAttr : 13;

  így önmagában hibátlan, DE ezt a hibát írja:
  "Uncaught InvalidValueError: invalid argument to setZoom: 3 "
  Az oka pedig az, hogy a zoomLevel string típusú lesz, miközben számot vár...
  Ezért javítani kell így:

  var zoomLevel = (zoomLevelAttr)? parseInt(zoomLevelAttr, 10) : 13;

  így már integerré konvertálja.

  A Google Maps tesztelésénél a Google Maps scriptfájljainak betöltési módja miatt a jsFiddle-nél problémák tapasztalhatók, úgyhogy felraktam JS Binre:
  http://jsbin.com/EzeBUTe/2/edit

  A custom tooltip itt sem működik, de azzal nem foglalkoztam. De mivel írtad, hogy rájöttél, mi a baja, úgyhogy megoszthatnád.

• Sk8erPeter nagyúr

  #3782

  #3781 bazsika33

  2013-10-18 00:27:10

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Sk8erPeter

  nagyúr

  #3781 bazsika33

  #3781 bazsika33

  Picit buheráltam rajta és már jónak tűnik.
  Még egy kérdés: nem lehetne h a 'lat' 'lng' mellett a zoom mértékét is a html-ben lehessen állítani?

  Konkrétan mit buheráltál a Tooltipen, mivel bírtad működésre?

  "Még egy kérdés: nem lehetne h a 'lat' 'lng' mellett a zoom mértékét is a html-ben lehessen állítani?"
  Az előző után már nem kéne, hogy túl nagy trouvaille legyen

  A HTML eddig így nézett ki:

  <div id="map_canvas" style="width:100%; height:400px" data-map-center-lat="47.507121" data-map-center-lng="19.045669"></div>

  helyette legyen PÉLDÁUL ilyen (a data-attribútumokat teljesen tetszőlegesen találhatod ki, a "data-map-center-lng és hasonló neveket én adtam csak hasraütésre! Lehetett volna akár data-pityipalko is!):

  <div id="map_canvas" style="width:100%; height:400px" data-map-center-lat="47.507121" data-map-center-lng="19.045669" data-map-zoom-level="15"></div>

  A JS-kódba pedig kerüljön bele mondjuk ezután a sor után:
  var center_lng = map_canvas.getAttribute('data-map-center-lng');
  ez:
  var zoomLevelAttr = map_canvas.getAttribute('data-map-zoom-level');
  var zoomLevel = (zoomLevelAttr)? zoomLevelAttr : 13;

  aztán

  var mapOptions = {
  ..........
  zoom: zoomLevel,
  ..........
  };

  hasonlóan bármilyen adatot bedrótozhatsz így a HTML-kódba, csak valami hasonló sémát kövess.

  Szerk.:
  Itt még egy pár percig percig próbálkoztam életre kelteni a Tooltipet, azzal játszottam, hogy definiáltam egy eseménykezelőt a térkép load eventjére, meg bemásoltam egy az egyben a Tooltip kódját, beraktam az inherit(Tooltip, google.maps.OverlayView); részt az initialize() függvénybe, aztán sikerült elcseszerinteni a dolgot, és végül most itt nem működik a térkép, és rohadtul nem volt most kedvem, agyam energiám folytatni De mintát vehetsz, itt benne van már a zoom-beállítás, csak náám múúkodik: http://jsfiddle.net/kxQw8/7/

• Sk8erPeter nagyúr

  #3778

  #3777 bazsika33

  2013-10-17 13:40:09

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Sk8erPeter

  nagyúr

  #3777 bazsika33

  #3777 bazsika33

  A 0ról kezdtem felépíteni a gmap-omat, kevéske tudással. Néztem mintákat, fórumokat, ollóztam össze innen-onnan. Mivel a markerek száma folyamatosan nőni fog, így az adatokat mfképpen 1 js-ben szeretném tárolni. És a lényeg az lenne h az összes pont (az újak is) az összes html-en megjelenjen.

  Konkrétan a data megoldásban tudnátok segíteni? Berakni vhogyan a parlament html-be a partlament marker 'latlng'-jét ide (hogy az legyen a parlament html-en a térképem centerje):
  <div id="map">
  <div id="map_canvas" style="width:100%; height:400px"></div>
  </div>

  Itt beírtam, hogy "Parlament, Budapest", vagy "Országház", vagy " 1055 Budapest, Kossuth Lajos tér 1-3.", vagy ahogy épp rátalálsz, aztán alul a "Click to see this area on Google Maps"-nél kattints (láthatod fölévitellel az URL-t):

  

  https://maps.google.com/maps?ll=47.507121,19.045669&z=17&t=m&hl=en-US&mapclient=apiv3

  (vagy az új Google Maps új URL-je szerint:
  https://www.google.com/maps/preview#!data=!1m4!1m3!1d4716!2d19.045669!3d47.507121
  )

  természetesen ll=47.507121,19.045669 az érdekes. Ez a felhasználandó koordináta.

  Ez alapján nézd meg a kódot jól, felhasználtam a map divjénél a data-attribútumokat, és a JavaScript-kódban is ezzel babráltam:
  http://jsfiddle.net/kxQw8/4/

  Konkrétan:
  HTML:
  <div id="map_canvas" style="width:100%; height:400px" data-map-center-lat="47.507121" data-map-center-lng="19.045669"></div>

  JS:
  var map_canvas = document.getElementById("map_canvas");
  var center_lat = map_canvas.getAttribute('data-map-center-lat');
  var center_lng = map_canvas.getAttribute('data-map-center-lng');
  // ...

  Szerk.:
  még annyi, hogy az általad felhasznált Tooltipes kód nem tudom, honnan származik, de hiányos, mivel exceptionöket dobál nem létező metódusok felhasználása miatt.
  Rákerestem, hátha meglelem a forrását, akkor ezt találtam:
  http://stackoverflow.com/questions/19383522/google-maps-api-v3-multiple-tooltips-with-custom-content
  Ezt Te kérdezted meg?

• Sk8erPeter nagyúr

  #3776

  #3774 bazsika33

  2013-10-17 12:01:50

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Sk8erPeter

  nagyúr

  #3774 bazsika33

  #3774 bazsika33

  JS google map problémám a következő:

  http://jsfiddle.net/kxQw8/
  Nekem nem jelenik meg semmi, sztem rosszul töltöttem be... De ehhez annyira nem értek.
  Amúgy a térkép itt található: http://googlemap.friweb.hu/

  Tehgát: minden egyes markerhez a saját html oldalán a marker centerjét szeretném beállítani. Tehát pl. a parlament html-en a parlament marker-je legyen a térképem központja.
  A js-be meg kell adni egy centert és így minden html-ben jelenleg ugyanaz lesz a center (lánchíd) - még akkor is ha a centert a html-ben is megadom. Nekem ez a bajom...

  Tehát azt szeretném h a centert a html-ben tudjam beállítani. Minden további adatot pedig a js-em tartalmazza.
  Közel 100 marker esetén ez nagy könnyítés lenne...
  Tippek? Egyáltalán meg lehet ezt oldani vhogyan? Köszi...

  Így már működik a példád:
  http://jsfiddle.net/kxQw8/2/
  De igazából csak működőképessé tettem jsFiddle-ön, érdemben nem módosítottam rajta.

  "Tehgát: minden egyes markerhez a saját html oldalán a marker centerjét szeretném beállítani. Tehát pl. a parlament html-en a parlament marker-je legyen a térképem központja."
  Annyira nem jó ötlet, hogy minden egyes helyszínhez újabb és újabb HTML-fájlokat hozol létre, mondjuk a 30. helyszínnél már el fogsz gondolkozni rajta, hogy biztos nincs-e egyszerűbb megoldás. Query stringbe kellene belerakni a helyszínek neveit.

  "A js-be meg kell adni egy centert és így minden html-ben jelenleg ugyanaz lesz a center (lánchíd) - még akkor is ha a centert a html-ben is megadom. Nekem ez a bajom...
  [...]
  Tehát azt szeretném h a centert a html-ben tudjam beállítani."
  Hogy a "HTML-ben is megadom", meg a "HTML-ben tudjam beállítani", azt nem egészen értem, mivel itt is JavaScript-kódban adtad meg a kezdőkoordinátákat. Persze amúgy HTML-kódba is bepasszírozhatod a már említett data-* attribútumokkal (erre kell gondolni: http://html5doctor.com/html5-custom-data-attributes/), csak nem biztos, hogy érdemes.

  Több markert így tudsz értelmesen kezelni:
  https://developers.google.com/maps/documentation/javascript/examples/icon-complex

  Itt van egy Places API-val összekötött térképes kereső:
  https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
  amint a találatra mész, középre rakja.

  Érdemes megnézni itt a demókat:
  https://developers.google.com/maps/documentation/javascript/examples/

  A saját kódodban itt adtad meg a középponti koordinátákat:
  var myLatlng = new google.maps.LatLng(47.506999, 19.045489);

  Ez itt van:
  https://maps.google.com/maps?ll=47.499014,19.045299&z=13&t=m&hl=en-US&mapclient=apiv3
  lásd az URL-ben ezt a részt: maps?ll=47.499014,19.045299
  (tehát a query stringben ez a lényeg: ll=47.499014,19.045299
  Tehát az eredmény azt mutatja, amit megadtál neki.

• Jim-Y veterán

  #3775

  #3774 bazsika33

  2013-10-17 11:00:00

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Jim-Y

  veterán

  #3774 bazsika33

  #3774 bazsika33

  JS google map problémám a következő:

  http://jsfiddle.net/kxQw8/
  Nekem nem jelenik meg semmi, sztem rosszul töltöttem be... De ehhez annyira nem értek.
  Amúgy a térkép itt található: http://googlemap.friweb.hu/

  Tehgát: minden egyes markerhez a saját html oldalán a marker centerjét szeretném beállítani. Tehát pl. a parlament html-en a parlament marker-je legyen a térképem központja.
  A js-be meg kell adni egy centert és így minden html-ben jelenleg ugyanaz lesz a center (lánchíd) - még akkor is ha a centert a html-ben is megadom. Nekem ez a bajom...

  Tehát azt szeretném h a centert a html-ben tudjam beállítani. Minden további adatot pedig a js-em tartalmazza.
  Közel 100 marker esetén ez nagy könnyítés lenne...
  Tippek? Egyáltalán meg lehet ezt oldani vhogyan? Köszi...

  ezt többféleképp is meg lehet oldani, az egyik, hogy a js-ben le tudod kérdezni az url-t, ki tudod nyerni belőle, hogy melyik oldalon vagy épp, és e szerint be tudod állítani a centert.

  Például felveszel egy olyan js objectet amiben a kulcsok a html oldalak nevei, értékek a latlng-ok.

  var centers = {
  elsoldal: new google.maps.LatLng(47.499014,19.043840),
  masodik: new google.maps.LatLng(47.499014,19.043840)
  stb...
  }

  majd lekéred az url-t, ynílván az vmi http://enoldalam.hu/elsooldal.html lesz, ebből kinyered, hogy elsooldal, majd kikeresed az ehhez a kulcshoz tartozó értéket a centers objektumban és beállítod centernek.

  Másik megoldás lehet, hogy a html kódba valahogy beégeted a koordinátákat, erre asszem vannak megoldások valamilyen data-* módszerrel, majd a js-ben lekéred a DOM-ból ezt az értéket még inicializálás előtt és beállítod centernek.

  üdv

• Sk8erPeter nagyúr

  #3773

  #3772 bazsika33

  2013-10-16 21:15:19

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Sk8erPeter

  nagyúr

  #3772 bazsika33

  #3772 bazsika33

  Jó estét, Lenne 1 kérdésem, íme:

  Az a gondom h van közel 100 markerem és jó lenne ha a térkép center-ét a html-ben tudnám megadni (tehát a Fehérház html-en a Fehérház marker-je legyen a térképem központja). A js-be alapból meg kell vmi center-t adni (és így minden html-ben ugyanaz lesz a center - még akkor is ha a center-t a html-ben is megadom...).
  Bocsánat, kicsit láma vagyok ehhez a témához. Ami eddig van azt is hetek alatt sikerült összehoznom. De legalább ismerkedem a témával......
  Tehát azt szeretném h a center-t a html-ben tudjam beállítani. Minden további adatot pedig a js-em tartalmazza.
  Tippek? Egyáltalán meg lehet ezt oldani vhogyan? Köszi...

  Tehát tömören a kódok:

  ---------- HTML ----------
  <script>
  function initialize() {
  var mapOptions = {
  zoom: 13,
  center: new google.maps.LatLng(20.805121,20.436148),
  mapTypeId: google.maps.MapTypeId.NORMAL
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
  }

  function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
  'callback=initialize';
  document.body.appendChild(script);
  }

  window.onload = loadScript;

  </script>

  ---------- JS ----------
  var map;
  var marker;
  var icon;
  var image;
  var link;
  var to_html;
  var from_html;
  var infowindow;
  function initialize() {
  var mapOptions = {
  center: new google.maps.LatLng(10.777916,10.270348),
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.NORMAL,

  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
  mapOptions);

  // -------------- MARKER 1

  var myLatlng = new google.maps.LatLng(0.805121,0.436148);
  var marker1 = new google.maps.Marker({
  position: myLatlng,
  map: map,
  icon: new google.maps.MarkerImage('../img/b.png'),
  tooltip: '...'
  });

  var tooltip1 = new Tooltip({map: map}, marker1);
  tooltip1.bindTo("text", marker1, "tooltip");
  google.maps.event.addListener(marker1, 'mouseover', function() {
  tooltip1.addTip();
  tooltip1.getPos2(marker1.getPosition());
  });
  google.maps.event.addListener(marker1, 'click', function() {
  map.setCenter(this.getPosition());
  map.setZoom(15);
  window.location.href = marker.url;
  });

  google.maps.event.addListener(marker1, 'mouseout', function() {
  tooltip1.removeTip();
  });
  // -------- END OF 1st MARKER

  // -------------- MARKER 2

  var myLatlng = new google.maps.LatLng(1.883236,1.443302);
  var marker2 = new google.maps.Marker({
  position: myLatlng,
  map: map,
  icon: new google.maps.MarkerImage('../img/c.png'),
  tooltip: '...'
  });

  var tooltip2 = new Tooltip({map: map}, marker2);
  tooltip2.bindTo("text", marker2, "tooltip");
  google.maps.event.addListener(marker2, 'mouseover', function() {
  tooltip2.addTip();
  tooltip2.getPos2(marker2.getPosition());
  });

  google.maps.event.addListener(marker2, 'mouseout', function() {
  tooltip2.removeTip();
  });
  // -------- END OF 2nd MARKER
  }

  Mindezt rakd fel kérlek jsFiddle-re, hogy ne nekünk kelljen vele tökölnünk:

  http://jsfiddle.net

  értelemszerűen mindenféle kódot a saját panelébe, HTML-t a HTML-hez, JavaScript-kódot a JavaScript-panelbe, CSS-kódot a CSS-panelbe, aztán mentsd el a Save-re kattintva, majd a kapott URL-t dobd be ide nekünk.

Új hozzászólás Aktív témák