// --- get provinces with ajax and cache
var cache = {};
function getProvinces(countryId, callback) {
	// load provinces with ajax or from cache
	if(!cache[countryId]) {
        cache[countryId] = $.getJSON("?fn=getProvinces", 'selected='+countryId, "json").promise();
	}
	cache[countryId].done(callback);
}
// --- load provinces in select object, callback function
function loadProvinces(datos){
	if (datos['error']){
		//show error message
		alert(datos['error']);
	}
	else{
		//load provinces in select
		var provinces = datos['provinces'];
		$('#province').empty();
		for (var i=0; i<provinces.length; i++) {
		  $('#province').append('<option value="' + provinces[i].value + '">' + provinces[i].title + '</option>');
		}
		
		$('#province').prop('disabled', false);
		$('#province').prop('selectedIndex',0);
		$('#province').focus();
	}
		
}
	
$(function() {
	$('#country').on('change', function(){
    var selected = $(this).find("option:selected").val();
    if (selected=='ESP' || selected=='MEX'){
		$('#province').removeClass('hide');
		
		// load provinces with ajax
		getProvinces(selected, loadProvinces);
		
	}
	else{
		$('#province').prop('disabled', 'disabled');
		$('#province').prop('selectedIndex',0);
		$('#province').empty();
		$('#province').addClass('hide');
	}
  });
});

function initialize() {
  var myLatlng = new google.maps.LatLng(43.048939, -2.429982);
  
	var myStyles =[
		{
			featureType: "poi",
			elementType: "all",
			stylers: [
				{visibility: "off"}
			]
		}
	];
  
  var mapOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeControl: false,
    panControl: false,
    zoomControl: true,
    scaleControl: false,
    streetViewControl: true,
    scrollwheel: false,
    styles: myStyles 
  }
  
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
  var image = {
	  url: 'https://www.ulmaagricola.com/assets/img/contact/marker.png',
	  size: new google.maps.Size(35, 53),
	  origin: new google.maps.Point(0,0),
	  anchor: new google.maps.Point(17, 26)
	};
    
	var marker = new google.maps.Marker({
		position: map.getCenter(),
		icon: image,
		map: map
	});
	
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyD8hS-W3ISoBcw-adFpwycygXnWLTqW7sA' +
      '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;