jQuery + google maps + Elevation
playing with google maps v3 events, jQuery, icons from http://google-maps-icons.googlecode.com
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://rangy.googlecode.com/svn/trunk/currentrelease/uncompressed/rangy-core.js"></script>
<script src="https://rangy.googlecode.com/svn/trunk/currentrelease/uncompressed/rangy-selectionsaverestore.js"></script>
<div id="map"></div>
<div id="keyIn" contenteditable="true"></div>
CSS
#map{
width: 450px;
height: 400px;
z-index: 0;
}
#keyIn {
position: absolute;
top: 100px;
left: 100px;
background: white;
width: 100px;
height: 100px;
z-index: 100;
}
JavaScript
var userMap = new google.maps.LatLng(38.573333,-109.549167);
var mapOptions = {
center: userMap,
keyboardShortcuts: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map"), mapOptions);
var panoramaOptions = {
position: userMap,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("map"), panoramaOptions);
map.setStreetView(panorama);
var $keyIn = $('#keyIn');
var savedSel;
$keyIn.bind('keydown mouseup', function(){
savedSel = rangy.saveSelection();
})
$('#map').bind('mouseup', function(){
rangy.restoreSelection(savedSel);
savedSel = rangy.saveSelection();
$keyIn.focus();
});
$keyIn.focus();