var map =null;
var mgr = null;
//se usa para guardarlas y usar su index para buscarlas
var gmarkers = [];
//Links de acceso rapido a paises
var lnks = "";

function crearMap() {
    map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(22.59372606392931, -103.0078125), 2);
    map.addControl(new GSmallMapControl());
    mgr = new MarkerManager(map);
    //CARGAMOS LOS MARKERS
    loadMapMarkers();
}


function loadMapMarkers() {
    $.getJSON("./services/gMapGetPaises.php",
        function(obj) {
            //RECORREMOS LOS PAISES
            $.each(obj.paises, function(i, item) {
                //AGREGAMOS LAS MARKERS AL MANAGER
                var mkr = createMarker(item.lat, item.lon,item.nombre,item.id);
                //agreamos al manager(marker,zoom1,zoom2,id)
                mgr.addMarker(mkr, item.zoom, item.zoom, item.id);
                //agregamos la mkr al arreglo
                gmarkers[i] = mkr;
                //GENERAMOS LA LISTA DE RESULTADOS
                lnks = lnks+"<div class='mapCountry' onclick='goToMarker(" + i + "," + item.zoom + ");'>" + item.nombre + "</div>";
            });
            $("#gMapNombres").html(lnks);
        });
}


function goToMarker(index,zoom){
	var lat = gmarkers[index].getLatLng().lat();
	var lng = gmarkers[index].getLatLng().lng();
	map.setCenter(new GLatLng(lat, lng), zoom)
	try {
		GEvent.trigger(gmarkers[index], "click"); 
	}catch(ex){};
}


//crea cada Marker que es introducido en el MarkerManager
//band->bandera que indica el tipo de msg que queremos crear
function createMarker(lat,long,bubbleTitle,idLocalizacion) {
    //CODIGO PARA AGREGAR EL ICONO CUSTOM
    var tiny = new GIcon(G_DEFAULT_ICON);
    tiny.image = "./images/infoIcon.png";
    tiny.shadow = "";
    tiny.iconSize = new GSize(16, 16);
    tiny.iconAnchor = new GPoint(8, 16);

    

    var mkr = new GMarker(new GLatLng(lat, long), { icon: tiny });
    GEvent.addListener(mkr, 'click', function() {
        var html = "<div style='font-weight:bold;'>" + bubbleTitle + "</div>" +
        "<iframe frameborder='0' src ='popupPages/gMapDisplayPais.php?ID_Localizacion=" + idLocalizacion + "' style='width:310px; height:200px; border:0;' ><p>Your browser does not support iframes.</p></iframe>";
        //La Info windows se le abre al mapa no al marker
        var iwAnchor = mkr.getIcon().infoWindowAnchor;
        var iconAnchor = mkr.getIcon().iconAnchor;
        var offset = new GSize(iwAnchor.x - iconAnchor.x, iwAnchor.y - iconAnchor.y);
        map.openInfoWindow(mkr.getLatLng(), html, { pixelOffset: offset });
    });
	return mkr;
}