谷歌地图未呈现正确的位置答案

【问题标题】：Google Map Not Rendering Correct Location谷歌地图未呈现正确的位置
【发布时间】：2012-10-25 18:08:21
【问题描述】：

我们在 DotNetNuke 6.0 皮肤中使用以下代码：

<iframe width="310" height="226" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?  f=d&amp;source=s_d&amp;saddr=Howell+Sand+Co+INC++2300+East+Hastings+Avenue+Amarillo,+TX+79108,+United+State+of+America+(806)+383-1721&amp;daddr=&amp;hl=en&amp;geocode=&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=49.624204,79.013672&amp;mra=ls&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=49.624204,79.013672&amp;t=m&amp;iwloc=ddw0&amp;output=embed">
</iframe>
<br />
<small><a href="http://maps.google.com/maps?f=d&amp;source=embed&amp;saddr=Howell+Sand+Co+INC++2300+East+Hastings+Avenue+Amarillo,+TX+79108,+United+State+of+America+(806)+383-1721&amp;daddr=&amp;hl=en&amp;geocode=&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=49.624204,79.013672&amp;mra=ls&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=49.624204,79.013672&amp;t=m&amp;iwloc=ddw0"
style="color: #0000FF; text-align: left">View Larger Map</a></small>

在当前状态下，地图会在页面上呈现。但是，它呈现的位置不是正确的地址。请查看当前行为here

我进一步阅读了静态地图 API，想知道是否应该重写以上内容以调用该 API？或者，我们应该采取不同的方法吗？

更新：我重写了javascript如下：

function initialize() {

var mapOptions = {
    center: new google.maps.LatLng(35.249369, -101.807561)
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
GEvent.addListener(marker, "mouseover ", function() {
    marker.openInfoWindowHtml(" < html > < body style = \"font-size: 8px;\"><table><tr><td align='left'><b>Company:</b> </td><td>Howell Sand Co Inc.<br/></td></tr>" + "<tr><td style=\"vertical-align:top;\"><b>Address:</b> </td><td>2300 East Hastings Avenue,<br/> Amarillo, TX 79108 (806) 383-1721 </td>" + "</tr></body></html>");
});
map.addOverlay(marker);
}

$(document).ready(function() {
initialize();
});

很遗憾，此时地图根本不会渲染。必须做些什么来修改上面的代码来渲染正确的地图和位置？

【问题讨论】：

“地址不正确”是什么意思？如果我输入 URL into my browser，它看起来对我来说是正确的（虽然我没有去过德克萨斯州的阿马里洛，所以我不能肯定地说）。
对不起，应该更清楚。地图呈现，但未正确绘制地址。也就是说，地图以完全不同的状态绘制地址。
它在什么状态下绘制什么地址？
请看新增的链接。

标签： google-maps dotnetnuke

【解决方案1】：

that page 上的地图与您发布的代码无关。它是 Google Maps API v2 地图（尽管它需要 v1）。代码如下。标记正是代码将其放置在 Latitude = "37.0625", Longitude = "-95.677068" 的位置，即somewhere in Kansas。请注意，v2 API 已弃用，最早可能会在 2013 年 5 月停止工作。

 <script src="http://maps.google.com/maps?file=api&v=1&key=AIzaSyCsOdhbicIzYAIw7446dYmhHBGjmpZiS48"
    type="text/javascript"></script>
<script type="text/javascript">
    function initialize() {

        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById('map_canvas'));
            map.setCenter(new GLatLng(37.4419, -122.1419), 12);

            map.setUIToDefault();

            var baseIcon = new GIcon(G_DEFAULT_ICON);
            baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
            baseIcon.iconSize = new GSize(20, 34);
            baseIcon.shadowSize = new GSize(37, 34);
            baseIcon.iconAnchor = new GPoint(9, 34);
            baseIcon.infoWindowAnchor = new GPoint(9, 2);


            var myLatitude = "37.0625";
            var myLongitude = "-95.677068";
            var strStorename = "Howell Sand Co Inc";
            var strAddress1 = "2300 East Hastings Avenue, Amarillo, TX 79108 (806) 383-1721";
            var strURL = document.getElementById('dnn_hdfStoreURL').value;


            var URL = "";
            if (strURL != "") {
                URL = "<tr><td><b>URL:</b></td><td><a href=\"" + strURL + "\">" + strURL + " </a></td></tr>";
            }
            var point = new GLatLng(myLatitude, myLongitude);

            map.setCenter(point, 12);


            var letteredIcon = new GIcon(baseIcon);
            letteredIcon.image = "images/howellsandpointer.png";

            // Set up our GMarkerOptions object
            markerOptions = { icon: letteredIcon };
            var marker = new GMarker(point, markerOptions);

            GEvent.addListener(marker, "mouseover", function() {
                marker.openInfoWindowHtml(
                                           "<html><body style=\"font-size: 8px;\"><table><tr><td align='left'><b>Company:</b> </td><td>Howell Sand Co Inc.<br/></td></tr>" +
                                                    "<tr><td style=\"vertical-align:top;\"><b>Address:</b> </td><td>2300 East Hastings Avenue,<br/> Amarillo, TX 79108 (806) 383-1721 </td>" +
                                                    "</tr></body></html>");
            });
            map.addOverlay(marker);
        }

    }

    $(document).ready(function() {
        initialize();
    }); 
</script>

【讨论】：

感谢收看这个。在您上面的代码修复中，我应该删除 myLatitude 和 myLongitude 语句吗？如何连接它以在我的地图 div 中呈现？
假设您希望标记位于2300 Hastings Ave, Amarillo, TX，您可能希望将它们设置为 35.249369,-101.807561
在您的地图声明中，如果我想在 class= map 的 div 中渲染地图，我是否应该将 getElementById 设置为 'map'？
该代码来自您的页面。它不是我的。 div 的类是什么并不重要。重要的是 id，它需要匹配。

【解决方案2】：

URL 中有多余的空格。删除它。

<iframe width="310" height="226" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?  f=d&amp;source=s_d&amp;saddr=Howell+Sand+Co+INC++2300+East+Hastings+Avenue+Amarillo,+TX+79108,+United+State+of+America+(806)+383-1721&amp;daddr=&amp;hl=en&amp;geocode=&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=49.624204,79.013672&amp;mra=ls&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=49.624204,79.013672&amp;t=m&amp;iwloc=ddw0&amp;output=embed">
</iframe>


<iframe width="310" height="226" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?f=d&amp;source=s_d&amp;saddr=Howell+Sand+Co+INC++2300+East+Hastings+Avenue+Amarillo,+TX+79108,+United+State+of+America+(806)+383-1721&amp;daddr=&amp;hl=en&amp;geocode=&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=49.624204,79.013672&amp;mra=ls&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=49.624204,79.013672&amp;t=m&amp;iwloc=ddw0&amp;output=embed">
</iframe>

【讨论】：