GoogleMaps v3 i jQuery

1

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

About Author

Programista, trener, prelegent, pasjonat, blogger. Autor podcasta programistycznego: DevTalk.pl. Jeden z liderów Białostockiej Grupy .NET i współorganizator konferencji Programistok. Od 2008 Microsoft MVP w kategorii .NET. Więcej informacji znajdziesz na stronie O autorze. Napisz do mnie ze strony Kontakt. Dodatkowo: Twitter, Facebook, YouTube.

1 Comment

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

Newsletter devstyle!
Dołącz do 2000 programistów!
  Zero spamu. Tylko ciekawe treści.
Dzięki za zaufanie!
Do przeczytania wkrótce!
Niech DEV będzie z Tobą!