Geolocation Overlay mit Googles Location API und jQuery

Vor kurzem habe ich ein neues Projekt fertiggestellt (http://www.sae-alumni.org) welches anfangs nur für Deutschland, Österreich und die Schweiz ausgeliefert werden soll. Alle anderen Länder bekommen ein Overlay, wie bei den Lightboxes, zu sehen und können dann auf Ihre lokalisierte Version wechseln.

Das ganze ging mit jQuery und Googles Location API sehr schnell und einfach!

Für das Overlay habe ich das jQuery-Plugin Simplemodal verwendet, mit diesem kann man einfach Overlays erzeugen.
Sollte noch kein jQuery eingebunden sein empfehle ich den Weg über Googles “Contend Delivery Service” und die jsapi. Außerdem binde ich gleich Simplemodal mit ein, den Pfad muss man natürlich anpassen.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
<script type="text/javascript" src="jquery.simplemodal-1.3.3.min.js"></script>

Zum testen könnt Ihr folgendes CSS von SimpleModal verwenden und dann anpassen:

 /* Overlay */
#overlay {background-color:#000; cursor:wait;}
 
/* Container */
#container {width:580px; height:400px; font-family:Verdana, Arial; font-size:16px; text-align:left;background: #000;text-align:center;}
#container .contact-content {background-color:#333; color:#ddd; height:40px;}
#container a:link,
#container a:active,
#container a:visited,
#container a:hover{color:#fff;}
#container a.modal-close,
#container a.modal-close:link,
#container a.modal-close:active,
#container a.modal-close:visited {text-decoration:none; font-weight:bold; font-size:1.2em; position:absolute; top:-4px; right:6px; color:#999;}
#container a.modal-close:hover {color:#9bb3b3;}

Jetzt noch das Javascript mit Googles Location-API einbinden. In meinem Fall habe ich geprüft, ob der Client nicht aus DE, AT oder CH kommt. Zur Abfrage können alle ISO-3166-1 Codes verwendet werden.

$(document).ready(function() {
   if (google.loader.ClientLocation) {
     var loc = google.loader.ClientLocation;
     var countryCode = loc.address.country_code;
     if(countryCode != "DE" && countryCode != "AT" && countryCode != "CH"){
        $('body').append("<div id="overlay">Visible for other Countries</div>");
        $("#overlay").modal({
            closeHTML: "<a class="modal-close" title="Close" href="#">x</a>",
            position: ["15%",],
            opacity:80,
            overlayId: 'overlay',
            containerId: 'container',
            onClose: container.close
        });
     }
   }
 });
 
var container = {
	close: function(dialog){
		$("#overlay").remove();
		$("#container").remove();
	}
}