среда, 6 августа 2014 г.

Интеграция Google Maps в Oracle ADF

Добрый день, друзья.
В наше время мало какой сайт  может обойтись без интеграции Google  технологий. Я постараюсь рассказать как интегрировать в ADF  Google maps. Приступим. Сделаем  страничку на которой можно найти место на карте, введя его в input text





Для этого :
1. Создайте ADF приложение в JDeveloper  и создайте пустую jspx страницу( если вы незнаете как это делать, прочитайте статью http://www.oracle-adf.info/2013/01/adf-jdeveloper.html )

2.Добавьте на страницу panelSplitter(слева будет поле куда вводить город и кнопка подтверждения,а справа карта)

3. В левую часть добавьте af:inputtext и  af:commandButton( в  нем установите свойство partialSubmit="true" и добавьте внутрь кнопки af:clientListener для вызова метода по клику) и "оберните их в panelGroupLayout. в итоге должен получиться следующий код в <f:facet name="first">:

<af:panelGroupLayout layout="scroll" id="pgl1">
                            <af:inputText id="it1" />
                            <af:commandButton text="Ок" id="cb2" partialSubmit="true" >
                              <af:clientListener method="codeAddress" type="click"/>
                            </af:commandButton>
                        </af:panelGroupLayout>



4.В правую часть добавьте следующий код:


  <af:group>
                  <div id="map" style="width: 800px; height: 800px"></div>
    </af:group>


5.Добавьте в код jspx страницы между  </af:form> и </af:document>  скрипты для работы  с google map:


  <f:facet name="metaContainer">
        <af:resource type="javascript" source="https://www.google.com/jsapi"/>
          <af:resource type="javascript">
          google.load("maps", "3",{other_params:"sensor=false"}); // это строка обозначает необходимо загрузить API Google Карт 3-ей версии (самая последняя на данный момент) 
          var map;
          var marker;
          var geocoder;
          function initialize()
            {
            geocoder=new google.maps.Geocoder();
            var myLatlng = new google.maps.LatLng(52.071213, 23.754115); //установка координат(широта,долгота) по умолчанию( место которое будет загружаться при запуске страницы)
            var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map"), myOptions);
            }
            google.setOnLoadCallback(initialize);
          </af:resource>
        <af:resource type="javascript">
          function codeAddress(evt)
          {
          var addressIt=document.getElementById("it1::content"); //извлечение места которого нужно найти по id inputext-а
          var address=addressIt.value;
          geocoder.geocode({'address':address},function(results,status){
              if(status==google.maps.GeocoderStatus.OK)
              {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker(
                {
                map: map,
                position: results[0].geometry.location
                }
              );
          }
          });
          }
        </af:resource>
        </f:facet>
   
Можно запускать : )


Это простой пример. Не забывайте, что при  помощи af:clientAttribite и   команды document.getElementById с формы можно брать не только место поиска, но и например масштаб (в скрипте zoom). : )

Комментариев нет:

Отправить комментарий