使用subgurim.net的GMap仅显示灰色框，求解决方案

我目前用Subgurim GMap开发的代码可以正常从数据库获取经纬度数据，运行没有报错，数据也正确，但界面上只显示带有“powered by subgurim”的灰色框，地图完全加载不出来。以下是我的代码，麻烦帮忙看看需要添加什么配置才能让地图正常显示？

GLatLng mainLocation = new GLatLng(20.300000099999997, 50.4000000);
GMap1.setCenter(mainLocation, 15);
XPinLetter xpinLetter = new XPinLetter(PinShapes.pin_star, "S", Color.Blue, Color.White, Color.Chocolate);
GMap1.Add(new GMarker(mainLocation, new GMarkerOptions(new GIcon(xpinLetter.ToString(), xpinLetter.Shadow()))));

GeoLocationDB objLocationDB = new GeoLocationDB();
GeoLocationList objLocationList = new GeoLocationList();
DateTime dt1 = new DateTime();
dt1 = new DateTime(Convert.ToInt32(txtDatePicker.Text.Split('/')[2].ToString()), Convert.ToInt32(txtDatePicker.Text.Split('/')[1].ToString()), Convert.ToInt32(txtDatePicker.Text.Split('/')[0].ToString()));
DateTime dt2 = new DateTime();
dt2 = new DateTime(Convert.ToInt32(txtDatePicker1.Text.Split('/')[2].ToString()), Convert.ToInt32(txtDatePicker1.Text.Split('/')[1].ToString()), Convert.ToInt32(txtDatePicker1.Text.Split('/')[0].ToString()));

objLocationList = objLocationDB.GetListBySearch(txtStaff.Text,dt1,dt2);

PinIcon p;
GMarker gm;
GInfoWindow win;
foreach (var i in objLocationList)
{
    p = new PinIcon(PinIcons.car, Color.Cyan);
    gm = new GMarker(new GLatLng(i.Longitude), new GMarkerOptions(new GIcon(p.ToString(), p.Shadow())));
    win = new GInfoWindow(gm, i.ShopName + " <a href='" + i.Address + "'>Address...</a>", false, GListener.Event.mouseover);
    GMap1.Add(win);
}

核心问题与解决方案 #

这种灰色框的情况，绝大多数是因为缺少Google Maps API密钥配置，或者密钥未正确启用相关服务。下面是具体的解决步骤：

1. 配置Google Maps API密钥

Subgurim GMap依赖Google Maps JavaScript API来加载地图资源，现在Google要求必须使用有效的API密钥才能访问这些资源：

• 首先去Google Cloud Platform申请一个API密钥，并且启用Maps JavaScript API（这是核心，必须启用）
• 然后通过两种方式配置密钥：

方式一：在Web.config中全局配置

在你的项目Web.config里添加以下配置节：

<configuration>
  <configSections>
    <sectionGroup name="Subgurim">
      <section name="GMap" type="Subgurim.Controles.GMapConfig, Subgurim.Controles"/>
    </sectionGroup>
  </configSections>
  <Subgurim>
    <GMap ApiKey="你的Google Maps API密钥" />
  </Subgurim>
</configuration>

方式二：在后台代码中设置

在页面的Page_Load方法里直接给GMap控件设置密钥：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GMap1.ApiKey = "你的Google Maps API密钥";
        // 你的其他初始化代码...
    }
}

2. 检查经纬度顺序是否正确

注意GLatLng的构造函数参数顺序是纬度在前，经度在后，但你的循环代码里写的是：

gm = new GMarker(new GLatLng(i.Longitude), ...);

这里明显只传了经度，缺少纬度参数，而且顺序可能搞反了！正确的写法应该是：

gm = new GMarker(new GLatLng(i.Latitude, i.Longitude), ...);

如果经纬度错误，即使地图加载成功，也可能显示在无人的海域，看起来像灰色框，这个细节一定要检查。

3. 排查浏览器控制台错误

打开浏览器的开发者工具（F12），切换到Console标签，查看是否有以下错误：

• 403 Forbidden：说明密钥无效、未启用对应API，或者密钥的IP/域名限制设置错误
• 脚本加载失败：可能是Subgurim控件生成的Google Maps脚本URL不正确，这时候需要确认密钥配置是否生效

4. 确认Subgurim控件版本兼容性

如果你的Subgurim GMap版本比较旧，可能和新版Google Maps API不兼容，建议更新到最新版本的Subgurim.Controles包（通过NuGet安装）。

内容的提问来源于stack exchange，提问作者NAJEEB