Sitefinity和嵌入式谷歌地图 - 如何使标记居中?

时间:2013-06-11 17:08:14

标签: google-maps sitefinity

我正在尝试为Sitefinity中的活动生成Google地图。我使用的是嵌入式Google iframe代码,我使用<%# Eval("Street") %><%# Eval("City") %>以及<%# Eval("State") %>从我的Sitefinity事件自定义字段中提取事件的位置,以输出html。

所以我的代码看起来像这样:

<iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=<%# Eval("Street") %>+<%# Eval("City") %>+<%# Eval("State") %>&amp;aq=0&amp;oq=<%# Eval("Street") %>+<%# Eval("City") %>+<%# Eval("State") %>&amp;ie=UTF8&amp;hq=&amp;hnear=<%# Eval("Street") %>+<%# Eval("City") %>+<%# Eval("State") %>&amp;z=14&amp;output=embed&iwloc=near'></iframe>

现在地图正在为事件生成,一切正常,但地图上的标记没有居中。如何使标记居中?

1 个答案:

答案 0 :(得分:1)

以下是包含三张地图的示例HTML。通过检查Developer Tools中的HTML,确保Sitefinity中的参数返回您所期望的内容。还要确保地址,城市和州之间有空格或逗号。此外,如果您使用Sitefinity 6,他们现在内置了Google Maps

   <html>
    <head></head>
    <body>
    <iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=510 W Main St Fort Wayne IN&amp;aq=0&amp;oq=510 W Main St Fort Wayne IN&amp;ie=UTF8&amp;hq=&amp;hnear=510 W Main St Fort Wayne IN&amp;z=14&amp;output=embed&iwloc=near'></iframe>
    <iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=1770 Apple Glen Blvd Fort Wayne IN&amp;aq=0&amp;oq=1770 Apple Glen Blvd Fort Wayne IN&amp;ie=UTF8&amp;hq=&amp;hnear=1770 Apple Glen Blvd Fort Wayne IN&amp;z=14&amp;output=embed&iwloc=near'></iframe>
    <iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=1600 Amphitheatre Pkwy, Mountain View, CA&amp;aq=0&amp;oq=1600 Amphitheatre Pkwy, Mountain View, CA&amp;ie=UTF8&amp;hq=&amp;hnear=1600 Amphitheatre Pkwy, Mountain View, CA&amp;z=14&amp;output=embed&iwloc=near'></iframe>
    </body>
    </html>

使用Google Maps V3 API。粘贴javascript&amp;在sitefiniy中的小部件内映射div,使用&lt;%#Eval(“address”)%&gt;作为传递给GetLatLong()函数的字符串

<html html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEYHERE&sensor=false"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
    var geocoder = new google.maps.Geocoder();
    var marker;
    var map;
    $(document).ready(function(){
        initialize();
    });

    function initialize() {
          var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(39.8282, -98.5795),//US Center as Default
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        GetLatLong("201 W Main St Fort Wayne IN");//Use your <%#Eval("Address")%> here Like
        //GetLatLong('<%#Eval("Street")%> <%#Eval("City")%> <%#Eval("State")%> ');
    }
    function GetLatLong(address){
        if (geocoder)
        {
            geocoder.geocode({ 'address': address }, function (results,status) {
                if (status == google.maps.GeocoderStatus.OK)
                {
                    var l = results[0].geometry.location;
                    map.setCenter(l);
                    var marker = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map,
                            title: address
                            });
                }
                else
                {

                }
            });
        }
    }
</script>
</head>
<body>
    <div id="map-canvas" style="height:500px;width:500px;"></div>
</body>
</html>