2013-06-11 2 views
1

Я пытаюсь создать карту Google для своих событий в Sitefinity. Я использую встроенный код iframe Google, и я использую <%# Eval("Street") %> и <%# Eval("City") %> и <%# Eval("State") %>, чтобы вытащить местоположение моих событий из пользовательских полей событий Sitefinity для вывода html.Sitefinity и встроенная карта Google. Как центрировать маркер?

Так что мой код выглядит следующим образом:

<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

Ниже приведен пример HTML с тремя картами. Убедитесь, что аргументы из Sitefinity возвращают то, что вы ожидаете, проверяя HTML в инструментах разработчика. Также убедитесь, что между адресом, городом и штатом есть пробелы или запятые. Также, если вы используете 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> 

Использование API карт Google Maps V3. Вставить яваскрипт & карту DIV внутри виджета в sitefiniy, используйте <% # Eval ("адрес")%>, как строка передается функция 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> 
+0

Джона, спасибо. Я дважды проверял сгенерированный код, проверяя HTML-код в инструменте разработчика, как вы предложили. Сгенерированный HTML выглядит хорошо, и когда я тестирую его как HTML-файл, он отлично работает и маркер центрирован. Маркер просто не центрируется в Sitefinity. здесь [ссылка] (http://jsfiddle.net/faramarz/YxYGd/). Я использую Sitefinity 6, но встроенная карта работает только как настраиваемое поле, когда вы используете построитель настраиваемого модуля. Я хочу сделать это для модуля Events, который является существующим модулем и не является обычным. – Marz

+0

Готовы ли вы использовать API Карт Google (JavaScript)? –

+0

Джон, я возвращаюсь к этому проекту после долгого времени, ваше решение работает, но я не могу заменить GetLatLong ('201 W Main St Fort Wayne IN'); адрес по умолчанию с <% # Eval («Адрес»)%> или <% # Eval («Улица»)%> и т. д. Я вставил JavaScript в нижней части моего шаблона виджета и выглядел как код JS не понимает C# Eval code, когда я это делаю: GetLatLong ('<% # Eval («Улица»)%><% # Eval («Город»)%><% # Eval («State»)%>'); – Marz

Смежные вопросы