JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://reactive-extensions.github.com/rxjs-html/rx.min.js"></script>
<script src="http://reactive-extensions.github.com/rxjs-html/rx.jquery.js"></script>
<h2>Geolocation + RxJS sample</h2>

<form>
  <select id="mapOpts">
    <option class="typeopt" value="roadmap">Road Map</option>
    <option class="typeopt" value="satellite">Satellite</option>
    <option class="typeopt" value="terrain">Terrain</option>
    <option class="typeopt" value="hybrid">Hybrid</option>
  </select>
</form>
<p>
<img id="mapImage" />

JavaScript

var getCurrentPosition = function(opts) {
  opts = opts || {};
ba  var subject = new Rx.AsyncSubject();

  // Our callbacks will just OnNext the Subject, similar to how FromAsyncPattern
  // works.
  navigator.geolocation.getCurrentPosition( function(pos) { 
      subject.onNext([pos.coords.latitude, pos.coords.longitude]); 
      subject.onCompleted(); 
  }, function(err) { 
      subject.onError(err.code); 
  }, opts);

  return subject;
};

var mapChangeObservable = $('#mapOpts').onAsObservable('change').select(function (ev) {
   var opt = ev.currentTarget;
   return opt[opt.options.selectedIndex].value;   
}).startWith('roadmap');

var currentMapUrl = mapChangeObservable.selectMany(function (mapType) {
    
    var mapPos = getCurrentPosition().catchException(Rx.Observable.returnValue([40.714728, -73.998672]));
    
    return mapPos.select(function (pos) {
        return [mapType, pos]; 
    });

}).select(function (typeAndPos) {
    var mapType = typeAndPos[0], coords = typeAndPos[1];

    // Our selector will return the URL of the Google Static Maps image
    return "http://maps.googleapis.com/maps/api/staticmap?zoom=12&size=400x400&sensor=true" 
        + "&maptype=" + mapType
        + "&center=" + coords[0] + "," + coords[1];
});

currentMapUrl.subscribe(function (url) {
    $("#mapImage").attr("src", url);
});