Responzívna Google mapa

19. 1. 2016 19:00:29

Zdravím,

je možné nastaviť niekde v javascripte responzivitu pre google mapu? Potrebujem aby mi na všetkých zariadeniach s rôznymi veľkosťami obrazovky zobrazovalo len slovenskú republiku lebo mám na nej markeri. Môj js kód pre google mapu + css. Súradnice lng a lat sú nastavené na stred slovenska.

Javascript:

function load() {

var map = new google.maps.Map(document.getElementById("map"), {

center: new google.maps.LatLng(48.730556, 19.457222),

zoom: 8,

scrollwheel: false,

mapTypeId: 'roadmap'

});

var infoWindow = new google.maps.InfoWindow;

CSS:

margin: 0;

padding: 0;

height: 800px;

z-index:4;

width: 100%;

19. 1. 2016 19:00:29

https://webtrh.cz/diskuse/responzivna-google-mapa/#reply1167469

tomve

(22 hodnocení)

19. 1. 2016 19:43:22

ehm, co si vzpomínám, tak někde psali o použítí resize, v tom směru bych zkusil hledat

19. 1. 2016 19:43:22

https://webtrh.cz/diskuse/responzivna-google-mapa/#reply1167468

Karol Smolík

(5 hodnocení)

19. 1. 2016 19:45:46

a čo chceš vlastne spraviť? Mapa je sama o sebe responzívna ak chceš zmeniť zoom tak jednoducho kontroluj šírku okna a zadefinuj si zoomy podľa toho aby bolo stále vidno SR

19. 1. 2016 19:45:46

https://webtrh.cz/diskuse/responzivna-google-mapa/#reply1167467

Infix

19. 1. 2016 19:59:25

Potrebujem aby mi na mobile zobrazilo rovnako mapu aspoň ako aj na PC. Neviem to proste spraviť :( bol by som rád ak by mi niekto pomohol poprípadne niečo aj pošlem nejakú čiastku za pomoc. Posielam odkazy ako mi to ukazuje na PC a ako na mobile + nahral som aj javascript.

Javascript

http://test.odkazovac.eu/map.js

Na mobile:

http://test.odkazovac.eu/mobile.jpg

Na pc:

http://test.odkazovac.eu/pc.jpg

19. 1. 2016 19:59:25

https://webtrh.cz/diskuse/responzivna-google-mapa/#reply1167466

Karol Smolík

(5 hodnocení)

19. 1. 2016 20:30:15

Tu máš kód, ktorý sa ti zazoomuje vždy na všetky tvoje body, je potrebné aby si tam definoval všetky tvoje súradnice:

alebo tam nahoď len najzápadnejší, najvýchodnejší, najsevernejší a najjužnejší to postačí.

19. 1. 2016 20:30:15

https://webtrh.cz/diskuse/responzivna-google-mapa/#reply1167465

Infix

19. 1. 2016 20:56:52

Kde ho tam mám presne vložiť do javascriptu prosím ? Ja som v javascripte noob :X Ďakujem veľmi pekne !

19. 1. 2016 20:56:52

https://webtrh.cz/diskuse/responzivna-google-mapa/#reply1167464

Karol Smolík

(5 hodnocení)

19. 1. 2016 21:29:35

vlož to takto:

19. 1. 2016 21:29:35

https://webtrh.cz/diskuse/responzivna-google-mapa/#reply1167463

Infix

19. 1. 2016 21:36:04

Ďakujem, kde môžem prosím Vás ešte vložiť tento kód ?

Je to pre automatickú šírku mapy tuším. Malo by sa mi to prispôsobiť zariadeniu

var map = ...; // your map initialisation code
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});

19. 1. 2016 21:36:04

https://webtrh.cz/diskuse/responzivna-google-mapa/#reply1167462

vpixle

(3 hodnocení)

21. 1. 2016 17:06:25

Googli mapa se obecne rozlije po celem divu, ktery ji urcis. Div musi mit alespon jeden staticky definovany rozmer (klasicky to byva vyska). Podle me bys mel resit primarne spravne zobrazeni toho divu a v 90% pripadu se o zbytek se ta mapa postara sama.

@propik ti spravne poradil nastaveni bounds, vyzkousej to podle toho co ti poslal, kdyz to nepujde snaz se primarne ovlivnovat ten div (treba pomoci @mediaquery). Tu mapu bych skadlil, az jako posledni moznost.

21. 1. 2016 17:06:25

https://webtrh.cz/diskuse/responzivna-google-mapa/#reply1167461

Pro odpověď se přihlašte.

Přihlásit