fbpx
devstyle.pl - Blog dla każdego programisty
devstyle.pl - Blog dla każdego programisty
3 minut

GoogleMaps v3 i jQuery


18.04.2011

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:  });
0 0 votes
Article Rating
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Wojtek
12 years ago

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

Kurs Gita

Zaawansowany frontend

Szkolenie z Testów

Szkolenie z baz danych

Książka

Zobacz również