Close

Kodexempel för att fånga latitud och longitud

Utökad version av jquery.ui.mapHar byggt vidare på min kollega Johan Säll Larssons jQuery-plugin för hantering av kartor, se bild intill.

Så här funkar exemplet:

  1. Klicka på kartan där du vill sätta ut en markör.
  2. 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:

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 »

För att få din egen version att fungera måste du skaffa en API-nyckel här »

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="https://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="https://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: 
            <select id="category">
            	<option selected value=""> - pick a category - </option>
                <option value="code">Name</option>
            </select><br />
            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>

Leave a Reply

Your email address will not be published. Required fields are marked *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.