Initialize google maps api inside lightbox (colorbox, shadowbox etc) after click on link

Vote count:

0

I have a list of links with addresses:

<a href="#location_google" data-address="Moscow" class="openmap"><span>Address</span></a>
<a href="#location_google" data-address="London" class="openmap"><span>Address</span></a>
<a href="#location_google" data-address="Tel Aviv" class="openmap"><span>Address</span></a>

This is my GMap script (from here):

function initialize() {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      codeAddress();
      var mapOptions = {
        zoom: 12,
        center: latlng,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE
            },
            scrollwheel: false
      }
      map = new google.maps.Map(document.getElementById('map_wrap'), mapOptions);

    }

    function codeAddress() {
      var address = document.getElementById('address').value;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
          });
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }

I have an input with id="address" that is empty, this input will save my address from "data-address" parameter:

<div id="map_wrap"></div>
<input type="hidden" id="address" value="" />

I need after click on my link with address, get jQuery(this) address, put it on id="address" input, and then, open it in some lightbox. I tried before THIS lightbox, but it didn't work for me... What am I doing wrong? Thanks

asked 1 min ago

vol4ikman

1

Initialize google maps api inside lightbox (colorbox, shadowbox etc) after click on link