Google Street View
Jak pewnie słyszeliście Google udostępniło widok street view dla większych polskich miast. Zainspirowało mnie to do zapoznania się z API Street View Service.
Jak używać Street View w swoich skryptach?
Jeśli wstawimy na stronę mapę google mamy do dyspozycji ikonkę tzw. Pegmana (żółtego ludzika), którego możemy przeciągnąć w dowolne miejsce mapy aby przełączyć się do widoku street view. Dodatkowo obszary, które zostały sfotografowane na potrzeby street view są podświetlane na niebiesko w trakcie przeciągania ludziaka. Możemy również wykorzystywać api do tworzenia ciekawszych rzeczy. Przykładowo stwórzmy dwa divy - w jednym będzie mapa w standardowym widoku, a w drugim automatycznie będzie pojawiać się panorama ze street view (zintegrowana z mapą po lewej). Poniżej kod html
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="mapa" style="width:300px;height:200px;"></div> <div id="street_view" style="width:300px;height:200px;"></div>
<script type="text/javascript">
var fenway = new google.maps.LatLng(42.345573,-71.098326), mapadiv = document.getElementById("mapa");
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapadiv, mapOptions), panoramadiv = document.getElementById("street_view");
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(panoramadiv, panoramaOptions);
map.setStreetView(panorama);
</script>
</body>
</html>
Pomiędzy znacznikami script umieścimy wszystkie skrypty.
Do konstruktora obiektu StreetViewPanorama przekazujemy div, w którym panorama ma być umieszczona oraz dodatkowe opcje.
Pierwszą z nich jest pozycja (ustawiamy taką samą wartość jak dla zwykłej mapy z diva po lewej). Kolejną jest pov (obiekt StreetViewPov). Właściwości tego obeiktu to:
- heading - kąt obrotu wokół aparatu (domyślnie 0),
- pitch - kąt odchylenia w górę lub w dół aparatu od pozycji początkowej (która jest często choć nie zawsze płasko pozioma)
- zoom - określa stopień powiększenia (0 oznacza w pełni pomniejszony).
Dokumentacja