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:
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: });