<style type="text/css"> 
#Preview 
{ 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
</style> 

        <%
            Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver")
                    .newInstance();
            String url = "jdbc:sqlserver://localhost:1433;DatabaseName=image";
            String user = "sa";
            String password = "sa";
            Connection conn = DriverManager.getConnection(url, user, password);
            Statement stmt = conn.createStatement();

            String sql = "select * from img_info";

            //img_info info = new img_info();

            ResultSet rs = stmt.executeQuery(sql);

            ArrayList<String> lis_nam = new ArrayList<String>();
            ArrayList<Double> lis_lat = new ArrayList<Double>();
            ArrayList<Double> lis_lon = new ArrayList<Double>();
            ArrayList<String> lis_address = new ArrayList<String>();

            for (int i = 0; rs.next(); i++) {

                lis_nam.add(rs.getString("img_name"));
                lis_lat.add(rs.getDouble("img_lat"));
                lis_lon.add(rs.getDouble("img_lon"));
                lis_address.add(rs.getString("img_address"));

            }

            int size = lis_nam.size();
            String[] nam = (String[]) lis_nam.toArray(new String[size]);
            Double[] lat = (Double[]) lis_lat.toArray(new Double[size]);
            Double[] lon = (Double[]) lis_lon.toArray(new Double[size]);
            String[] address = (String[]) lis_address.toArray(new String[size]);
        %>



        <script type="text/javascript">
var infowindow;
(function() {

    google.maps.Map.prototype.markers = new Array();

    google.maps.Map.prototype.addMarker = function(marker) {
        this.markers[this.markers.length] = marker;
    };

    google.maps.Map.prototype.getMarkers = function() {
        return this.markers
    };

    google.maps.Map.prototype.clearMarkers = function() {
        if (infowindow) {
            infowindow.close();
        }

        for ( var i = 0; i < this.markers.length; i++) {
            this.markers[i].set_map(null);
        }
    };
})();

function initialize() {
    var latlng = new google.maps.LatLng(50.9406645, 6.9599115);
    var myOptions = {
        zoom : 12,
        center : latlng,
        streetViewControl : false,    //not allow the little man shown on the map
        mapTypeId : google.maps.MapTypeId.ROADMAP
    
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var tef = "<%=nam[0]%>";


    var a = new Array();
    var k=0;

<%for (int i = 0; i < size; i++) {%> 
    var t = new Object();
        t.name = "<%=nam[i]%>"
        t.lat = <%=lat[i]%>
    t.lng = <%=lon[i]%>
    a[k] = t;
    k++
        
<%}%>    


    for ( var i = 0; i < a.length; i++) {
        var latlng = new google.maps.LatLng(a[i].lat, a[i].lng);
        map.addMarker(createMarker(a[i].name, latlng));
    }
    console.log(map.getMarkers());

    console.log(map.getMarkers());
}


var mark=''; //set a variable of mark icon

//this function is to change the icon address
function selectIcon(imgFile){
    var newPreview = document.getElementById("Preview"); 
    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; 
    newPreview.style.