
<div dir="ltr">Hi,<div><br></div><div>I want to create a custom widget in Fusion that opens in Task pane on clicking. The widget is to implement Google Places search on the map. I found a result on the mailing list that involves changing the Taskpane.html file. But that opens in the task pane instants rather than as a widget. </div><div><br></div><div>The code for the Taskpane.html is: </div><div><br></div><div><div><!DOCTYPE html></div><div><html></div><div><head></div><div><br></div><div><script type="text/javascript" src="<a href="https://maps.googleapis.com/maps/api/js?sensor=false">https://maps.googleapis.com/maps/api/js?sensor=false</a>"></script></div><div><script type="text/javascript" src="proj4js-1.1.0/lib/proj4js-compressed.js"></script> </div><div> </div><div><SCRIPT LANGUAGE="JavaScript"></div><div>//Proj4js.defs["EPSG:4326"]="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"</div><div>var source = new Proj4js.Proj('EPSG:4326'); </div><div>Proj4js.defs["EPSG:3857"]="+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs"</div><div>var dest = new Proj4js.Proj('EPSG:3857');</div><div><br></div><div>var geocoder = new google.maps.Geocoder();</div><div><br></div><div>function extraire_xy_geocode() </div><div>{</div><div>  </div><div>  var address = window.document.getElementById("adresse_google_texte").value;</div><div><br></div><div>  if (address == "")</div><div>  {</div><div>    alert("Erreur : Veuillez fournir une adresse dans la case à cette fin!");</div><div>  }</div><div>  else</div><div>  {</div><div>    geocoder.geocode</div><div>   ( {'address': address}, function(results, status) </div><div>        { </div><div><span class="" style="white-space:pre">           </span> </div><div>          if ((status == google.maps.GeocoderStatus.OK) && (results.length == 1))</div><div>          {</div><div><span class="" style="white-space:pre">             </span>  </div><div><span class="" style="white-space:pre">        </span>    var map = parent.Fusion.getWidgetById('Map');</div><div>            var coordll = results[0].geometry.location;</div><div>            var lat = coordll.lat();</div><div>            var lng = coordll.lng();</div><div>   <span class="" style="white-space:pre">     </span>    var p = new Proj4js.Point(lng,lat);</div><div>            Proj4js.transform(source, dest, p);</div><div>   <span class="" style="white-space:pre"> </span>    var pt = new parent.OpenLayers.LonLat(p.x,p.y);</div><div>            if  (window.document.forms["origine"].elements["radio_ech_larg"].item(0).checked == true)</div><div><span class="" style="white-space:pre">       </span>        {</div><div><span class="" style="white-space:pre">      </span>          // selon échelle (scale of map)</div><div>                  map.oMapOL.setCenter(pt,map.oMapOL.getZoom(),false,false);</div><div><span class="" style="white-space:pre">        </span>          map.oMapOL.zoomToScale(parseInt(window.document.forms["origine"].elements["txt_echelle"].value),false);</div><div><span class="" style="white-space:pre"> </span>        }<span class="" style="white-space:pre">     </span></div><div><span class="" style="white-space:pre">   </span></div><div><span class="" style="white-space:pre">   </span>    else</div><div><span class="" style="white-space:pre"> </span></div><div><span class="" style="white-space:pre">   </span>    {<span class="" style="white-space:pre">   </span></div><div><span class="" style="white-space:pre">   </span>      // selon largeur (width of map)</div><div><span class="" style="white-space:pre">   </span>      map.oMapOL.setCenter(pt,map.oMapOL.getZoom(),false,false);</div><div>  <span class="" style="white-space:pre">     </span>      var largeur = parseInt(window.document.forms["origine"].elements["txt_echelle"].value);</div><div><span class="" style="white-space:pre">       </span>      var centreXY = map.oMapOL.getCenter();</div><div><span class="" style="white-space:pre">    </span>      var fenetre = new parent.OpenLayers.Bounds (centreXY.lon - (largeur / 2.0), centreXY.lat - (largeur / 2.0), centreXY.lon + (largeur / 2.0), centreXY.lat + (largeur / 2.0));</div><div><span class="" style="white-space:pre">      </span>      map.oMapOL.zoomToExtent(fenetre,false);</div><div><span class="" style="white-space:pre">   </span>    }</div><div><br></div><div>       <span class="" style="white-space:pre">        </span>var olMap = map.oMapOL;</div><div>        var oldmarkers = olMap.getLayersByName ( "Markers" );</div><div>        if (oldmarkers[0] != undefined) {olMap.removeLayer(olMap.getLayer(oldmarkers[0].id))};</div><div>        var markers = new parent.OpenLayers.Layer.Markers( "Markers" );</div><div>       <span class="" style="white-space:pre">  </span>olMap.addLayer(markers);</div><div>       <span class="" style="white-space:pre">        </span>var size = new parent.OpenLayers.Size(21,25);</div><div>       <span class="" style="white-space:pre">   </span>var offset = new parent.OpenLayers.Pixel(-(size.w/2), -size.h);</div><div>       <span class="" style="white-space:pre"> </span>var icon = new parent.OpenLayers.Icon('<a href="http://www.openlayers.org/dev/img/marker.png">http://www.openlayers.org/dev/img/marker.png</a>', size, offset);</div><div>       <span class="" style="white-space:pre">   </span>markers.addMarker(new parent.OpenLayers.Marker(pt,icon));</div><div>       <span class="" style="white-space:pre">       </span>markers.addMarker(new parent.OpenLayers.Marker(pt,icon.clone()));</div><div>        }</div><div>       else</div><div>       {</div><div><span class="" style="white-space:pre">     </span>    if (results.length > 1) </div><div>              alert("Le géocodage a échoué, car plus d'un résultat.");</div><div>            else</div><div><span class="" style="white-space:pre">      </span>      alert("Le géocodage a échoué pour la raison suivante :  " + status);</div><div>          }</div><div>        }</div><div>    );</div><div>  }    </div><div>}</div><div><br></div><div></SCRIPT></div><div><br></div><div><style type="text/css"></div><div>    @import url(TaskPane.css);</div><div></style></div><div><br></div><div><br></div><div></head></div><div><br></div><div><BODY ></div><div><br></div><div><P></div><div><STRONG><EM>Zoom centre:</EM></STRONG></div><div></P></div><div><br></div><div><br></div><div><P></div><div><FORM  name='googleform' action="javascript:extraire_xy_geocode()" ></div><div><INPUT  type=submit value="Adresse Google" style="line-height: 22px; width: 110px "  /> </div><div><input  autocomplete="on" id="adresse_google_texte" name="adresse_google_texte" type="text" style="WIDTH: 150px; HEIGHT: 22px; TEXT-ALIGN: left" /></div><div></FORM></div><div></P></div><div><br></div><div><FORM autocomplete="on" name='origine' style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: red; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: red; COLOR: red; BORDER-TOP-COLOR: red; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: red"    ></div><div><br></div><div><P></div><div><INPUT type=radio value="echelle" name="radio_ech_larg"  CHECKED> Echelle</INPUT></div><div><br></div><div><INPUT type=radio value="largeur" name="radio_ech_larg"> Largeur</INPUT></div><div><br></div><div><INPUT id=txt_echelle style="HEIGHT: 22px; TEXT-ALIGN: right" size=5 value=2000 name=echelle title=Echelle vrml=""></INPUT></div><div></P></div><div></FORM></div><div></P></div><div><br></div><div><br></div><div><br></div><div></BODY></div><div></html></div></div><div><br></div><div>How can i convert this to a widget that i can attach to a toolbar an work with only when needed ? </div><div><br></div><div><br></div></div>