javascript - angularJS:谷歌地图未加载地点API

Question

伙计们!

我正在尝试集成谷歌地图并使用 Places API。 我有一个文本框和一个谷歌地图(由于一些奇怪的原因没有加载)，我试图在地方 API 的帮助下绘制谷歌地图中文本框中输入的地址。

但是，谷歌地图没有加载，也没有在控制台中抛出任何错误。 Places API 工作正常，我可以搜索地址，也可以取回坐标，但我无法看到谷歌地图或向该位置添加标记。

这是我的 HTML 代码:

<div ng-app="myApp" ng-controller="myMap">
<div class="form-group"  >
  <label for="source_point">
    <h2>Address</h2></label>
  <input type="text" id="source_point" name="source_point" class="form-control" placeholder="Enter your pick up address here">

  <p id="pickup_location"></p>
  <input type="text" id="src_lat" name="src_lat" placeholder="latitude">
  <input type="text" id="src_long" name="src_long" placeholder="longitude">
</div>
<!-- Map div -->
<div id="source_map"></div>
</div>

这是我的 Controller :

angular.module('myApp', []).
controller('myMap', function() {

  var map;
  var marker;
  var latLngC;

  function initialize() {
    latLngC = new google.maps.LatLng(14.5800, 121.0000);
    var mapOptions = {
      center: latLngC,
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    map = new google.maps.Map(document.getElementById('source_map'),
      mapOptions);

    var marker = new google.maps.Marker({
      position: latLngC,
      map: map,
      draggable: true
    });

    //Add marker upon clicking on map
    //google.maps.event.addDomListener(map, 'click', addMarker);
    google.maps.event.addDomListener(map, 'click', function() {
      addMarker(map);
    });

    var places1 = new google.maps.places.Autocomplete(document.getElementById('source_point'));
    google.maps.event.addListener(places1, 'place_changed', function() {
      var place1 = places1.getPlace();

      var src_addr = place1.formatted_address;
      var src_lat = place1.geometry.location.lat();
      var src_long = place1.geometry.location.lng();

      var mesg1 = "Address: " + src_addr;
      mesg1 += "\nLatitude: " + src_lat;
      mesg1 += "\nLongitude: " + src_long;
      //alert(mesg1);

      document.getElementById('src_lat').value = src_lat;
      document.getElementById('src_long').value = src_long;
      document.getElementById('pickup_location').innerHTML = src_lat + ' , ' + src_long;
    });
    //Add marker upon place change          
    google.maps.event.addDomListener(places1, 'place_changed', function() {
      addMarker(map);
    });

  }
  google.maps.event.addDomListener(window, 'resize', initialize);
  google.maps.event.addDomListener(window, 'load', initialize);

  //Function to add marker upon clicking on a location in map
  function addMarker(map) 
  {
    var lat = document.getElementById('src_lat').value;
    var loong = document.getElementById('src_long').value;
    if (!lat || !loong) return;

    var coordinate = new google.maps.LatLng(lat, loong);
    if (marker) 
    {
      //if marker already was created change positon
      marker.setPosition(coordinate);
      map.setCenter(coordinate);
      map.setZoom(18);
    } 
    else 
    {
      //create a marker
      marker = new google.maps.Marker({
        position: coordinate,
        map: map,
        draggable: true
      });
      map.setCenter(coordinate);
      map.setZoom(18);
    }
  }

});

我还创建了一个 fiddle 来展示这个东西是如何工作的:从here看看它.

Answer 1

您正在使用#gmap而不是source_map。看看here

这是你的固定CSS:

#source_map {
  width: 450px;
  height: 450px;
}