Question

What I would like to do is create a map after an element is clicked on. I’m using Google Maps v3.

I have a Realty listing page that shows 15 results/properties per page. Instead of generating 15 maps I would like 1 map to be created when I click on an element. Once clicked on, the map generation process takes place. The map canvas/div is initially hidden.

I was thinking that the click element and map element relationship would be something like this:

<span id="12-1234" lat="10.101010" lng="-25.252525" class="view-map">View Map</span>
... other markup ...
<div id="12-1234-map" class="google-map"></div>

Using HTML5 I add custom attributes to the element about the property like id, latitude and longitude so I can change the icon and center the map.

I’ve got a functioning map from which I load markers from a dynamically generated XML file based on the search parameters.

I’ve been looking at addListener and addDomListener but haven’t had any luck. Most searches just pull up issues related to markers.

I had a wonky thing that sort of worked that used jQuery. Something like this:

$('.view-map').click(function(){
     google.maps.event.addDomListener( this, 'click', initialize );
     $("#" + this.id + "-map").toggle();
});

Obviously this wasn’t perfect as you’d have to click the element a couple more times before seeing the map as you’ve bound another click event to it after having already clicking on it.

I feel like I’m missing something obvious.

Answer 1

function initialize(link) {
  var mapDiv = $('#' + link.attr('id') + '-map');
  mapDiv.toggle();

  var options = {
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(link.attr('lat'), link.attr('lng'))
  };

  var map = new google.maps.Map(mapDiv[0], options);
}

$('.view-map').click(function(){
  initialize(this);
});