jquerygoogle-mapsgoogle-maps-api-3getelementbyid

document.getElementById for variable Elements in jQuery


I seemed to have a problem which might be new here (I can't find a solution anywhere)

I have a jQuery-plugin which gets 4 variables with Geocoords as Value (50.3675658° or -23.73456°) in an Object I call my function with $('#map').rectangle(qsparam);

'#map' is the ID of the div, in which Google-maps gives me my custom-map with a border around the 2 Points I gave in the object.

This is my Plugin:

(function($) {
    $.fn.rectangle = function(param) {
        var map, rectangle, coords = param || {};
        var southwest = new google.maps.LatLng(coords.s || -10, coords.w || -10);
        var northeast = new google.maps.LatLng(coords.n || 10, coords.e || 10);
        return this.each(function() {
            map = new google.maps.Map(document.getElementById('map'), {
                'mapTypeId' : google.maps.MapTypeId.TERRAIN
            })
            var bounds = new google.maps.LatLngBounds(southwest, northeast);
            map.fitBounds(bounds);
            rectangle = new google.maps.Rectangle({
                map : map,
                strokeColor : "#008DCF",
                strokeOpacity : 0.6,
                strokeWeight : 4,
                fillColor : "#B8B23B",
                fillOpacity : 0.18,
                Bounds : bounds
            });
        });
    }
})(jQuery);

but I want to keep the Plugin variable for other div's, so can u please help me to change the document.getElementById('map') into something like document.getElementById(name of the div I don't know atm), so that I don't need to change ma Plugin when I want to use it for div's with other names?


Solution

  • Use this instead of document.getElementById('map').

    return this.each(function() {
        map = new google.maps.Map(this, {'mapTypeId' : google.maps.MapTypeId.TERRAIN});
        // ...