JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://maps.googleapis.com/maps/api/js?sensor=true&amp;jsfiddler=.js"></script>
<body ng-app="app" ng-controller="appCtrl">

  <h3>Google地图</h3>

  <!-- search/go to current location -->
  <div class="text-right">
    <div class="input-append text-right">
      <input type="text" ng-model="search" />
      <button class="btn" type="button" ng-click="geoCode()" ng-disabled="search.length == 0" title="search">
        &nbsp;<i class="icon-search"></i>
      </button>
      <button class="btn" type="button" ng-click="gotoCurrentLocation()" title="current location">
        &nbsp;<i class="icon-home"></i>
      </button>
    </div>
  </div>

  <!-- map -->
  <app-map style="height:400px;margin:12px;box-shadow:0 3px 25px black;" center="loc" markers="airports" zoom=8>
  </app-map>

  <!-- current location -->
  <div class="text-info text-right">
    {{loc.lat | lat:0}}, {{loc.lon | lon:0}}
  </div>

  <!-- list of famous -->
  <div class="container-fluid">

    <div class="span3 btn" ng-repeat="a in airports" ng-click="gotoLocation(a.lat, a.lon)">
      <b>{{a.code}}</b>: {{a.name}}
    </div>
  </div>
</body>

JavaScript

var app = angular.module("app", []);

app.controller("appCtrl", function($scope) {

  // current location
  $scope.loc = {
    lat: 34.5,
    lon: 109
  };
  $scope.gotoCurrentLocation = function() {
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var c = position.coords;
        $scope.gotoLocation(c.latitude, c.longitude);
      });
      return true;
    }
    return false;
  };
  $scope.gotoLocation = function(lat, lon) {
    if ($scope.lat != lat || $scope.lon != lon) {
      $scope.loc = {
        lat: lat,
        lon: lon
      };
      if (!$scope.$$phase) $scope.$apply("loc");
    }
  };

  // geo-coding
  $scope.search = "西安葡萄城信息技术有限公司";
  $scope.geoCode = function() {
    if ($scope.search && $scope.search.length > 0) {
      if (!this.geocoder) this.geocoder = new google.maps.Geocoder();
      this.geocoder.geocode({
        'address': $scope.search
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var loc = results[0].geometry.location;
          $scope.search = results[0].formatted_address;
          $scope.gotoLocation(loc.lat(), loc.lng());
        } else {
          alert("Sorry, this search produced no results.");
        }
      });
    }
  };

  // some points of interest to show on the map
  // to be user as markers, objects should have "lat", "lon", and "name" properties
  $scope.airports = [{
    "name": "秦始皇兵马俑",
    "code": "BMY",
    "city": "临潼",
    "state": "陕西",
    "lat": 34.23,
    "lon": 109.16,
    "vol2011": 1
  }, {
    "name": "大雁塔",
    "code": "DYT",
    "city": "西安",
    "state": "陕西",
    "lat": 34.12,
    "lon": 108.57,
    "vol2011": 2
  }, ];
});

// formats a number as a latitude (e.g. 40.46... => "40°27'44"N")
app.filter('lat', function() {
  return function(input, decimals) {
    if (!decimals) decimals = 0;
    input = input * 1;
    var ns = input > 0 ? "N" : "S";
    input = Math.abs(input);
   ...