Question

我有一个活动网站，其中使用网站管理部分中的网络应用程序创建活动。应用程序的一部分允许用户输入一个地址，然后用于创建事件位置的Google地图。我在页面上插入了以下代码：

<script src="https://maps.googleapis.com/maps/api/js?key=MY-KEY-IS-HERE-ON-THE-PAGE&callback=initMap"
async defer></script>

正确的API密钥位于页面上方的代码中 - 而不是上面的占位符。

我获得了一些代码，这些代码使用Web应用程序中的标记作为JavaScript代码的一部分，因此使用为事件键入的地址值来创建地图（例如。{tag_address1}，{ tag_address2}）下面的代码显示了我使用的内容。问题是代码还包括方向的功能等，但我不需要它们。

当我在浏览器中测试代码时，似乎是留下了地图应该去的空间，但是它没有渲染任何地图图块。

我想知道是否有人可以帮我解决问题？由于我没有使用代码的方向部分，我是否可以获得一些帮助来删除不需要的部分，因为我认为这可能会导致地图无法显示的问题。代码已经过时了，我想从2011年开始，所以我不确定它是否与v3 API兼容。

var map; //global map
var dRender; //global direction render

var _ADDRESS = "{tag_address1} {tag_address2} {tag_addresscity}, {tag_addressstate} {tag_addresszipcode}";
var _NAME = "{tag_name}";

//geocode the address of web app item and create map
$(function () {

  $("#js-map-to").val(_ADDRESS);

  var geo = new google.maps.Geocoder();
  var geoOpts = { address: _ADDRESS };
  geo.geocode(geoOpts, function (results, status) { createMap(results, status); });

  //setup input button to launch directions
  $("#js-map-submit").click(function (e) {
    e.preventDefault();
    getDirections();
  });

});

//callback from web app item address geocoding.
//creates the map
function createMap(results, status) {

  if (status === google.maps.GeocoderStatus.OK) {

    var myOptions = {
      zoom: 14,
      center: results[0].geometry.location,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    };
    map = new google.maps.Map(document.getElementById("js-map"), myOptions);

    dRender = new google.maps.DirectionsRenderer();
    dRender.setMap(map);

    var markerOpts = {
      position: myOptions.center,
      map: map,
      title: _NAME,
      animation: google.maps.Animation.DROP
    };
    var marker = new google.maps.Marker(markerOpts);

  }
  else {
    $("#js-map").text("Unable to render map, please check the address of this location.");
  }

}

//directions "Go" button event handler. 
function getDirections() {

  var from = $("#js-map-from").val();
  if (from != "") {
    var to = _ADDRESS;
    var dService = new google.maps.DirectionsService();

    var dOpts = {
      destination: to,
      origin: from,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    dService.route(dOpts, function (result, status) { renderDirections(result, status); });
  }

}

//callback for direction routing async call
function renderDirections(result, status) {

  if (status === google.maps.DirectionsStatus.OK) {
    var dDiv = $("#js-directions");
    dRender.setDirections(result);
    dRender.setPanel(dDiv[0]);

    var diagOpts = {
      width: 500,
      height: 500,
      title: "Directions To: " + result.routes[0].legs[0].end_address
    };
    dDiv.dialog(diagOpts);
  }
  else {
    alert("Unable to map directions");
  }

}

更新

由于我无法在评论中添加代码（时间太长），因此我会粘贴我在下面使用的更新代码：

var map; //global map

var _ADDRESS = "{tag_address1} {tag_address2} {tag_addresscity},     {tag_addressstate} {tag_addresszipcode}";
var _NAME = "{tag_name}";

//geocode the address of web app item and create map
function startGeocoding(){

 var geo = new google.maps.Geocoder();
 var geoOpts = { address: _ADDRESS };
geo.geocode(geoOpts, function (results, status) { createMap(results,   status); });

}

 //callback from web app item address geocoding.
 //creates the map
 function createMap(results, status) {

 if (status === google.maps.GeocoderStatus.OK) {

  var myOptions = {
  zoom: 14,
  center: results[0].geometry.location,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false
};
map = new google.maps.Map(document.getElementById("js-map"), myOptions);

var markerOpts = {
  position: myOptions.center,
  map: map,
  title: _NAME,
  animation: google.maps.Animation.DROP
};
var marker = new google.maps.Marker(markerOpts);

}
else {
  $("#js-map").text("Unable to render map, please check the address   of this location.");
}

}

使用上面的代码时，我收到了我在上次评论中提到的错误。你知道为什么吗？

Answer 1

如果您只想根据地址显示带有标记的地图，则可以使用此代码。我摆脱了与方向相关的所有部分，因为你不想展示它们。

警告：我已将您的_ADDRESS和_NAME注释掉，以显示实际位置的示例，但在您的情况下，您会取消注释并删除我的示例位置。也！！你不需要行google.maps.event.addDomListener(window, 'load', startGeocoding);我只是为了演示而添加它，在你的应用程序中你会有：

<script src="https://maps.googleapis.com/maps/api/js?key=MY-KEY-IS-HERE-ON-THE-PAGE&callback=的 startGeocoding " async defer></script>

所以代码：

var map; //global map //var _ADDRESS = "{tag_address1} {tag_address2} {tag_addresscity}, {tag_addressstate} {tag_addresszipcode}"; //var _NAME = "{tag_name}"; //for purpose of example let's put some real address here var _ADDRESS = "164-166 E 2nd St New York, NY 10009"; var _NAME = "Example Location"; //geocode the address of web app item and create map function startGeocoding(){ var geo = new google.maps.Geocoder(); var geoOpts = { address: _ADDRESS }; geo.geocode(geoOpts, function (results, status) { createMap(results, status); }); } //callback from web app item address geocoding. //creates the map function createMap(results, status) { if (status === google.maps.GeocoderStatus.OK) { var myOptions = { zoom: 14, center: results[0].geometry.location, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false }; map = new google.maps.Map(document.getElementById("js-map"), myOptions); var markerOpts = { position: myOptions.center, map: map, title: _NAME, animation: google.maps.Animation.DROP }; var marker = new google.maps.Marker(markerOpts); } else { $("#js-map").text("Unable to render map, please check the address of this location."); } } google.maps.event.addDomListener(window, 'load', startGeocoding);

<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script> <div id="js-map" style="height:300px;width:100%"></div> </body>

最后一件事：要正确显示，地图div必须以某种方式设置宽度和高度。

Answer 2

var map; //global map

//var _ADDRESS = "{tag_address1} {tag_address2} {tag_addresscity}, {tag_addressstate} {tag_addresszipcode}";
//var _NAME = "{tag_name}";

//for purpose of example let's put some real address here
var _ADDRESS = "164-166 E 2nd St New York, NY 10009";
var _NAME = "Example Location";

//geocode the address of web app item and create map
function startGeocoding(){

  var geo = new google.maps.Geocoder();
  var geoOpts = { address: _ADDRESS };
  geo.geocode(geoOpts, function (results, status) { createMap(results, status); });

}

//callback from web app item address geocoding.
//creates the map
function createMap(results, status) {

  if (status === google.maps.GeocoderStatus.OK) {

    var myOptions = {
      zoom: 14,
      center: results[0].geometry.location,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    };
    map = new google.maps.Map(document.getElementById("js-map"), myOptions);

    var markerOpts = {
      position: myOptions.center,
      map: map,
      title: _NAME,
      animation: google.maps.Animation.DROP
    };
    var marker = new google.maps.Marker(markerOpts);

  }
  else {
    $("#js-map").text("Unable to render map, please check the address of this location.");
  }

}

google.maps.event.addDomListener(window, 'load', startGeocoding);

<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
  <div id="js-map" style="height:300px;width:100%"></div>
</body>

使用谷歌地图与Web应用程序显示标记

2 个答案:

使用谷歌地图与We​​b应用程序显示标记

2 个答案:

使用谷歌地图与Web应用程序显示标记