var gMaps = [];
var marker;
function GMLoadSelectLocation(name, longid, latid) {
    
    if (!gMaps[name]) {
        var lat = document.getElementById(latid);
        var lng = document.getElementById(longid);
        var gLatLong = null;
        try {
            if (lat.value != '') {
                gLatLong = new google.maps.LatLng(lat.value, lng.value);
            }
            else {
                gLatLong = new google.maps.LatLng(53.104318265975316, 6.86495304107666);
            }
        } catch (e) {
            gLatLong = new google.maps.LatLng(53.104318265975316, 6.86495304107666);
        }
            var myOptions = {
                zoom: 11,
                center: gLatLong,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                navigationControl: true,
                navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
            };
            gMaps[name] = new google.maps.Map(document.getElementById(name), myOptions);

            gMaps[name].AmapName = name;

            //gMaps[name].addControl(new GLargeMapControl());
            //gMaps[name].addControl(new GMapTypeControl());
            //gMaps[name].enableDoubleClickZoom();


            var options = {
                suppressInitialResultSelection: true,
                inlineResultList: false,
                externalResultListContainer: false,
                searchFormHint: "Zoek locatie"

            };

            //gMaps[name].addControl(new google.maps.LocalSearch(options), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(0, 0)));


            // center on given lat/lng
            gMaps[name].setCenter(gLatLong, 13);

            addSelectedGoogleLocation(gMaps[name], gLatLong);

            google.maps.event.addListener(gMaps[name], 'click', function(event) {
                    var mapName = gMaps[name].AmapName;
                    var map = gMaps[name];
                    
                    marker.setMap();

                    document.getElementById(latid).value = event.latLng.lat();
                    document.getElementById(longid).value = event.latLng.lng();

                    addSelectedGoogleLocation(map, event.latLng);
              
            });

            // add button control
//            GEvent.addListener(gMaps[name], "click", function(overlay, point) {
//                if (!overlay) {
//                    var mapName = gMaps[name].AmapName;
//                    var map = gMaps[name];
//                    map.clearOverlays();

//                    document.getElementById(latid).value = point.lat();
//                    document.getElementById(longid).value = point.lng();

//                    addSelectedGoogleLocation(map, point);
//                }
//            });
        }

}

function addSelectedGoogleLocation(map, point) {
    var image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
    marker = new google.maps.Marker({
        position: point,
        map: map,
        icon: image
    });
}

function GMLoadLocation(name, longid, latid) {
    
    if (!gMaps[name]) {
        var lat = document.getElementById(latid);
        var lng = document.getElementById(longid);
        var gLatLong = null;
        try {
            if (lat.value != '') {
                gLatLong = new google.maps.LatLng(lat.value, lng.value);
            }
            else {
                gLatLong = new google.maps.LatLng(53.104318265975316, 6.86495304107666);
            }
        } catch (e) {
            gLatLong = new google.maps.LatLng(53.104318265975316, 6.86495304107666);
        }
        var myOptions = {
            zoom: 14,
            center: gLatLong,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        gMaps[name] = new google.maps.Map(document.getElementById(name), myOptions);

        gMaps[name].AmapName = name;

        var options = {
            suppressInitialResultSelection: true,
            inlineResultList: false,
            externalResultListContainer: false,
            searchFormHint: "Zoek locatie"

        };

        gMaps[name].setCenter(gLatLong, 13);

        addSelectedGoogleLocation(gMaps[name], gLatLong);
    }
}



function GMLoadLeden(name, longid, latid, zoomValue) {
    
    if (!gMaps[name]) {
        var lat = document.getElementById(latid);
        var lng = document.getElementById(longid);
        var gLatLong = null;
        try {
            if (lat.value != '') {
                gLatLong = new google.maps.LatLng(lat.value, lng.value);
            }
            else {
                gLatLong = new google.maps.LatLng(52.683043, 4.869690);
            }
        } catch (e) {
        gLatLong = new google.maps.LatLng(52.683043, 4.869690);
        }
        var myOptions = {
            zoom: zoomValue,
            center: gLatLong,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        gMaps[name] = new google.maps.Map(document.getElementById(name), myOptions);

        gMaps[name].AmapName = name;

        var options = {
            suppressInitialResultSelection: true,
            inlineResultList: false,
            externalResultListContainer: false,
            searchFormHint: "Zoek locatie"

        };

        gMaps[name].setCenter(gLatLong, zoomValue);

        //addSelectedGoogleLocation(gMaps[name], gLatLong);
    }
}






/* An InfoBox is like an info window, but it displays
* under the marker, opens quicker, and has flexible styling.
* @param {GLatLng} latlng Point to place bar at
* @param {Map} map The map on which to display this InfoBox.
* @param {Object} opts Passes configuration options - content,
*   offsetVertical, offsetHorizontal, className, height, width
*/
function InfoBox(opts) {
    google.maps.OverlayView.call(this);
    this.latlng_ = opts.latlng;
    this.map_ = opts.map;
    this.offsetVertical_ = -165;
    this.offsetHorizontal_ = -50;
    this.height_ = opts.height;
    this.width_ = opts.width;
    this.content_ = opts.content;

    var me = this;
    this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
        return me.panMap.apply(me);
    });

    // Once the properties of this OverlayView are initialized, set its map so
    // that we can display it.  This will trigger calls to panes_changed and
    // draw.
    this.setMap(this.map_);
}

/* InfoBox extends GOverlay class from the Google Maps API
*/
InfoBox.prototype = new google.maps.OverlayView();

/* Creates the DIV representing this InfoBox
*/
InfoBox.prototype.remove = function() {
    if (this.div_) {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }
};

/* Redraw the Bar based on the current projection and zoom level
*/
InfoBox.prototype.draw = function() {
    // Creates the element if it doesn't exist already.
    this.createElement();
    if (!this.div_) return;

    // Calculate the DIV coordinates of two opposite corners of our bounds to
    // get the size and position of our Bar
    var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
    if (!pixPosition) return;

    // Now position our DIV based on the DIV coordinates of our bounds
    this.div_.style.width = this.width_ + "px";
    this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
    this.div_.style.height = this.height_ + "px";
    this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
    this.div_.style.display = 'block';
};

/* Creates the DIV representing this InfoBox in the floatPane.  If the panes
* object, retrieved by calling getPanes, is null, remove the element from the
* DOM.  If the div exists, but its parent is not the floatPane, move the div
* to the new pane.
* Called from within draw.  Alternatively, this can be called specifically on
* a panes_changed event.
*/
InfoBox.prototype.createElement = function() {
    var panes = this.getPanes();
    var div = this.div_;
    if (!div) {
        // This does not handle changing panes.  You can set the map to be null and
        // then reset the map to move the div.
        div = this.div_ = document.createElement("div");
        div.style.border = "0px";
        div.style.position = "absolute";
        div.style.background = "url('http://mfnh.cms3.pageflow.nl/assets/noordholland/images/gmaps/bg_infobox.png')";
        //div.style.background = "#ffffff";
        div.style.width = this.width_ + "px";
        div.style.height = this.height_ + "px";
        var contentDiv = document.createElement("div");
        contentDiv.style.padding = "10px"
        contentDiv.innerHTML = this.content_;

        var topDiv = document.createElement("div");
        //topDiv.style.textAlign = "right";
        topDiv.style.position = "absolute";
        topDiv.style.left = "170px"
        topDiv.style.padding = "8px 0px 5px 0px"
        var closeImg = document.createElement("img");
        closeImg.style.width = "13px";
        closeImg.style.height = "13px";
        closeImg.style.cursor = "pointer";
        closeImg.src = "http://mfnh.cms3.pageflow.nl/assets/noordholland/images/gmaps/close.gif";
        topDiv.appendChild(closeImg);

        function removeInfoBox(ib) {
            return function() {
                ib.setMap(null);
            };
        }

        google.maps.event.addDomListener(closeImg, 'click', removeInfoBox(this));

        div.appendChild(topDiv);
        div.appendChild(contentDiv);
        div.style.display = 'none';
        panes.floatPane.appendChild(div);
        this.panMap();
    } else if (div.parentNode != panes.floatPane) {
        // The panes have changed.  Move the div.
        div.parentNode.removeChild(div);
        panes.floatPane.appendChild(div);
    } else {
        // The panes have not changed, so no need to create or move the div.
    }
}

/* Pan the map to fit the InfoBox.
*/
InfoBox.prototype.panMap = function() {
    // if we go beyond map, pan map
    var map = this.map_;
    var bounds = map.getBounds();
    if (!bounds) return;

    // The position of the infowindow
    var position = this.latlng_;

    // The dimension of the infowindow
    var iwWidth = this.width_;
    var iwHeight = this.height_;

    // The offset position of the infowindow
    var iwOffsetX = this.offsetHorizontal_;
    var iwOffsetY = this.offsetVertical_;

    // Padding on the infowindow
    var padX = 40;
    var padY = 40;

    // The degrees per pixel
    var mapDiv = map.getDiv();
    var mapWidth = mapDiv.offsetWidth;
    var mapHeight = mapDiv.offsetHeight;
    var boundsSpan = bounds.toSpan();
    var longSpan = boundsSpan.lng();
    var latSpan = boundsSpan.lat();
    var degPixelX = longSpan / mapWidth;
    var degPixelY = latSpan / mapHeight;

    // The bounds of the map
    var mapWestLng = bounds.getSouthWest().lng();
    var mapEastLng = bounds.getNorthEast().lng();
    var mapNorthLat = bounds.getNorthEast().lat();
    var mapSouthLat = bounds.getSouthWest().lat();

    // The bounds of the infowindow
    var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
    var iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) * degPixelX;
    var iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
    var iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) * degPixelY;

    // calculate center shift
    var shiftLng =
      (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
      (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
    var shiftLat =
      (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
      (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);

    // The center of the map
    var center = map.getCenter();

    // The new map center
    var centerX = center.lng() - shiftLng;
    var centerY = center.lat() - shiftLat;

    // center the map to the new shifted center
    map.setCenter(new google.maps.LatLng(centerY, centerX));

    // Remove the listener after panning is complete.
    google.maps.event.removeListener(this.boundsChangedListener_);
    this.boundsChangedListener_ = null;
};


InfoBox.prototype.onRemove = function() { this.div_.parentNode.removeChild(this.div_); this.div_ = null; }