GoogleMaps API

8. Juni 2012 |

Autor: Volker

Wollte mich schon des längeren mal mit der API von GoogleMaps beschäftigen. Das aktuelle Projekt zum Einstieg soll – vornehmlich auf mobilen Endgeräten – den aktuellen Standort auf der Karte anzeigen und einen Marker drauf setzen, auf dem der aktuelle Leitstellenbereich und dessen BOS Kanal angezeigt wird. Hab damit mal angefangen und zumindest die Standortanzeige klappt schon mal.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px; }
  #map_canvas { height: 100%; border=2;}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true">		
</script>
<script>
        function initialize(coords) {
            var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
            var myOptions = {
                zoom: 13,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            
            var marker = new google.maps.Marker({
                position: latlng, 
                map: map, 
                title: "Hier bist du :)"
            }); 
        }
navigator.geolocation.getCurrentPosition(function(position){ 
            initialize(position.coords);
        }, function(){
document.getElementById('pos').innerHTML = 'Deine Position konnte leider nicht ermittelt werden';
        });
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Das da kommt dabei raus: Beispiel

So siehts momentan auf dem Handy aus:

So… den Regierungsbezirk konnte ich schon mal anhand einer mit JavaScript generierten URL auslesen:

&nbsp

function success(position) {
  		lat = position.coords.latitude; 
 		long = position.coords.longitude;  			
		document.write('Breitengrad: '+lat+'<br>Längengrad: '+long);
		document.write('<br>http://maps.google.com/maps/geo?output=xml&oe=utf-8&ll='+lat+','+long+'&key=asdad');

Rein theoretisch müsste man das ganze jetzt nur noch zusammensetzen, den Regierungsbezirk durch den Landkreis ersetzen und auf dem Marker in der Karte ausgeben.

Beispiel (Ausgabe des Längen- und Breitengrads; Generierung der URL)

Veröffentlicht in Neues |

Schlagworte: api, bos, googlemaps, javascript, Rettungsdienst

GoogleMaps API

Ähnliche Einträge

Kommentieren