Har byggt vidare på min kollega Johan Säll Larssons jQuery-plugin för hantering av kartor, se bild intill.
Så här funkar exemplet:
- Klicka på kartan där du vill sätta ut en markör.
- Dubbelklicka på markören så kommer formuläret med geodata fram, först då ställs geocoding-frågan till Google.
Den geocoding-data du får från Google om punktens är:
- Landskod, enligt standarden ISO 3166.
- Locality, alltså län eller nivå under land.
- Latitud i decimalform.
- Longitud i decimalform.
Koden är inte hundraprocentig men kan tjäna som inspiration att jobba vidare med exempelvis om man i ett publiceringsverktyg vill låta användarna fånga in geodata. Det som jag är medveten om att det strular är:
- Inte alltid Google returnerar landets kod, bl. a. så anses Gotland ibland vara ett eget land och Norges landsbygd fungerar inte alltid.
- Funktionen pluginet har för att zooma in kartan där användaren befinner sig funkar nästan aldrig om användaren inte kör Safari som webbläsare.
Har sparat debug-koden i kodexemplet för lite tips på hur man spårar saker och ting. För dig som aldrig debuggat jQuery/Javascript så installera Firebug-tillägget och skriv console.log(UTDATA_DU_VILL_KOLLA_PÅ) på delar du vill spåra.
Provkör mitt kodexempel » webbstrategiforalla.se/upload/Exempelprojekt/google_maps/index.html
[För att få din egen version att fungera måste du skaffa en API-nyckel här » (code.google.com/intl/sv-SE/apis/loader/signup.html)
Kodexempel för Google Maps via jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery.ui.map - basic example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://jquery-ui-map.googlecode.com/svn-history/r64/trunk/demos/css/main.css" />
<script src="http://www.google.com/jsapi?key=ABQIAAAAp3SStC2eaRzLMhLBZ1UcvRRhHLjSGuD1YyMRJjkEmJ33iXo9BxQ0oivi5mRZ5rWJQvx93vriLYeAOw" type="text/javascript"></script>
<script type="text/javascript">
//<!\[CDATA\[
google.load("maps", "3", {'other\_params':'sensor=true'});
google.load("jquery", "1.4");
google.load("jqueryui", "1.8");
//\]\]>
</script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn-history/r64/trunk/ui/jquery.ui.map.min.js"></script>
</head>
<body>
<script type="text/javascript">
//<!\[CDATA\[
var geocoder;
var gmap;
var infowindow = new google.maps.InfoWindow();
var marker;
$(document).ready(function() {
$('#map\_canvas').gmap({'center': getLatLng(), 'zoom': 12, 'callback': init});
function init() {
//$('#map\_canvas').gmap('addMarker', {'position': getLatLng(), 'title': 'A title'});
$('#map\_canvas').gmap('getCurrentPosition');
geocoder = new google.maps.Geocoder();
}
function getLatLng() {
if ( google.loader.ClientLocation != null ) {
return new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
}
return new google.maps.LatLng(59.3426606750, 18.0736160278);
}
// placing position
google.maps.event.addListener($('#map\_canvas').gmap('getMap'), 'click', function(event) {
//alert(event.latLng);
//$('#map\_canvas').gmap('clearMarkers');
$('#map\_canvas').gmap('addMarker', {'position': event.latLng, 'title': 'A title'}, function(map,marker){
google.maps.event.addListener(marker, 'dblclick', function() {
//console.log(marker.getPosition());
var pos = marker.getPosition().toString();
var splitPos = pos.indexOf(', ');
var posLat = pos.substring(1, splitPos);
var posLng = pos.substring(splitPos + 2);
posLng = posLng.substring(0, posLng.length - 1)
var pLat = parseFloat(posLat);
var pLng = parseFloat(posLng);
//alert(posLat);
$('#saveMarker').show();
$('#lat').val(pLat.toFixed(6));
$('#lng').val(pLng.toFixed(6));
$('#geoTitle').val('');
codeLatLng(pLat, pLng);
marker.setMap(null); // removes the marker
});
});
//console.log('Lat: ' + event.latLng.xa);
//console.log('Longit: ' + event.latLng.za);
//$('#lat').val(event.latLng.xa.toFixed(5));
//$('#lng').val(event.latLng.za.toFixed(5));
//placeMarker(event.latLng);
});
});
function codeLatLng(lat, lng) {
// var input = document.getElementById("latlng").value;
//var latlngStr = mark.split(",",2);
//var lat = parseFloat(markLat);
//var lng = parseFloat(markLat);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results\[1\]) {
//console.log(results\[1\].address\_components\[results\[1\].address\_components.length -2\].long\_name);
//console.log(results\[1\].address\_components\[results\[1\].address\_components.length -1\].short\_name);
//console.log(results\[1\]);
// get locality
//if (results\[1\].address\_components\[i\].types != null && results\[1\].address\_components\[i\].types.length == 2 ) {
var locality = '';
for ( i=0; i<results\[1\].address\_components.length; i++ ) {
if (results\[1\].address\_components\[i\].types\[0\] == "administrative\_area\_level\_1") {
locality = results\[1\].address\_components\[i\].long\_name;
}
}
if(locality.length != 0) {
$('#locality').val(locality);
} else {
$('#locality').val('');
}
//}
// get country
var country = '';
for ( i=0; i<results\[1\].address\_components.length; i++ ) {
//if (results\[1\].address\_components\[i\].short\_name != null && results\[1\].address\_components\[i\].short\_name.length == 2 ) {
//$('#cc1').val(results\[1\].address\_components\[i\].short\_name);
if (results\[1\].address\_components\[i\].types\[0\] == "country") {
country = results\[1\].address\_components\[i\].short\_name;
}
}
if(country.length != 0) {
$('#cc1').val(country);
} else {
$('#cc1').val('');
}
//$('#cc1').val(results\[1\].address\_components\[results\[1\].address\_components.length -1\].short\_name);
//$('#locality').val(results\[1\].address\_components\[results\[1\].address\_components.length -2\].long\_name);
//console.log(results\[1\].address\_components);
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
//\]\]>
</script>
<h1><a href="http://code.google.com/p/jquery-ui-map/">jQuery.ui.map plugin</a> demo</h1>
<div id="map\_canvas"></div>
<div id="saveMarker" style="display:none;">
<form>
Title: <input id="geoTitle" type="text" /><br />
category: Övrigt
Country: <input type="text" id="cc1" /><br />
Locality: <input type="text" id="locality" /><br />
Latitude: <input type="text" id="lat" /><br />
Longitude: <input type="text" id="lng" />
</form>
</div>
</body>
</html>