1

Sitefinity でイベント用の Google マップを生成しようとしています。私は埋め込まれた Google iframe コードを使用しており、 and を使用<%# 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>

現在、マップはイベント用に生成されており、マップ上のマーカーが中央に配置されていないことを除いて、すべてが正常に機能しています。マーカーを中央に配置するにはどうすればよいですか?

4

1 に答える 1

1

以下は、3 つのマップを含むサンプル HTML です。開発者ツールで HTML を調べて、Sitefinity からの引数が期待どおりに返されていることを確認します。また、住所、都市、州の間にスペースまたはカンマがあることを確認してください。また、Sitefinity 6 を使用している場合は、Google マップが組み込まれています。

   <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 マップ V3 API を使用します。JavaScript を貼り付けて、sitefiniy のウィジェット内に div をマップし、<%#Eval("address")%> を 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>
于 2013-06-11T18:18:01.490 に答える