Niedawno po raz pierwszy w życiu zajmowałem się Google Maps. Spodziewałem się, że zajmie to max kwadrans, w końcu masa stron to ma, dokumentacja jest dobra… no i moja Joanna na mapach zęby zjadła:). Niestety nawet z połączonymi siłami poprawne skorzystanie z map zajęło nam dobre kilka godzin.
Problemem okazało… w sumie kilka rzeczy. Wymagania: po kliknięciu w link otwórz popup z mapką pokazującą odpowiedni adres zakładając, że na stronie może być takich linków wiele. Odpadała więc jednokrotna inicjalizacja mapki z odpowiednimi parametrami.
Sam HTML wygląda tak:
1: <div id="dlgMap" class="hidden"> 2: <div id="map_canvas" style="width:600px;height:600px"></div> 3: </div>
Jednak po prostu wrzucenie kawałka javascriptu powodowało, że mapka albo się rozjeżdżała, albo w ogóle się nie pokazywała, albo pokazywała się w złym rozmiarze.
Kluczowe okazały się trzy elementy:
1) dialog jQuery musi być inicjalizowany PO inicjalizacji mapki
2) od razu po otwarciu dialogu trzeba wywołać zdarzenie:
1: google.maps.event.trigger(map, 'resize');
3) po wywołaniu tego zdarzenia trzeba zresetować zoom na mapce:
1: map.setZoom(map.getZoom());
Po tych zabiegach wszystko śmiga jak trzeba.
Poniżej kompletny kod javascript:
1: var map = new google.maps.Map(document.getElementById("map_canvas"), { 2: zoom: 14, 3: // any start position - will be reset later anyway 4: center: new google.maps.LatLng(-34.397, 150.644), 5: mapTypeId: google.maps.MapTypeId.ROADMAP 6: }); 7: 8: var dlgMap = $('#dlgMap'); 9: dlgMap.dialog({ 10: autoOpen: false, 11: modal: true, 12: width: 650, 13: height: 650, 14: draggable: false 15: }); 16: 17: var geocoder = new google.maps.Geocoder(); 18: 19: $('[data-role=show-on-map]').click(function (e) { 20: e.preventDefault(); 21: var oAddr = $(this).data().address; 22: 23: var sAddress = su.format('{0} {1} {2} {3}', oAddr.City, oAddr.Street, oAddr.BuildingNumber, oAddr.PostalCode); 24: 25: geocoder.geocode({ 'address': sAddress }, function (results, status) { 26: if (status == google.maps.GeocoderStatus.OK) { 27: dlgMap.dialog('open'); 28: google.maps.event.trigger(map, 'resize'); 29: map.setZoom(map.getZoom()); 30: map.setCenter(results[0].geometry.location); 31: var marker = new google.maps.Marker({ 32: map: map, 33: position: results[0].geometry.location 34: }); 35: 36: } else { 37: msgs.error('Nie znaleziono adresu'); 38: } 39: }); 40: });
Też robię projekt z wygorzystaniem GMapsów. Za pomocą JQuery i Ajax odświeżamy pozycje użytkowników na mapie. Działa rewelacyjnie. Polecam spróbować pobawić się w aplikacje geolokacyjne bo mają pier***nięcie ;)