Question

I have a variable length collection of address models which I want to edit. I use Steve Sandersons approach to edit the collection

I add a EditAddress partial view(RenderPartial) via Ajax on a button click which works fine.

This partial view also contains a google map ‘control’ which allows pointing out the address on the map. Initializing the map requires passing in the id of the div element I want the map to appear in. So in the partial view I define a div with an id say “#map” and pass it to the google map initializer via jquery (the script resides in the partial view).

Now the question is when there are multiple of these partial views added there will be multiple ‘#map’ divs of the page (when i do view source I dont see the elements added via ajax although the page renders it fine so I am just guessing that the id’s will be the same), how does one select the correct id of an element to hook up the jquery to?

And if its not at all possible what are my options?

Answer 1

Do not use an id selector, use something else, like a class selector.

var map = new google.maps.Map($('.map')[0], myOptions);

If you have multiple map selectors, you can iterate over a listing element that contains them, and initialize each individually.

$('.map-listing-element').each(function(){
    var mapElement = $(this).find('.map-canvas');
    var options = {...};  // whatever the options are
    var googleMap = new google.maps.Map(mapElement[0], options);
});

<div class="this-box-wraps-all-maps">
    <div class="map-listing-element">
        ...load your partial views wrapped in this element
        Map 1
        <div class="map-canvas"></div>
    </div>
    <div class="map-listing-element">
        ...load your partial views wrapped in this element
        Map 2
        <div class="map-canvas"></div>
    </div>
    <div class="map-listing-element">
        ...load your partial views wrapped in this element
        Map 3
        <div class="map-canvas"></div>
    </div>
    <div class="map-listing-element">
        ...load your partial views wrapped in this element
        Map N
        <div class="map-canvas"></div>
    </div>
</div>