I am using the Google Maps custom control (http://www.openntf.org/catalogs/a2cat.nsf/topicThread.xsp?action=openDocument&documentId=068D8F976D87B29E852578B200259707) in a mobile XPages application. This worked in 8.5.3 - but after an upgrade of the server to 9.0 it does not work any more.
I have now tried to narrow down the issue and this is where I am:
- Create a single XPage and add the custom control - it works
- Create a single XPage with the mobile prefix with a single page app control and a single app page. Add the custom control to the app page - and it doesn't work....
When I look at the source of the two the first contains some client side JS to run onClientLoad. For the mobile page this seems not to be the case... :-/
Any ideas as to how to solve this?
Update with solution: If anyone else ends up in this situation I have edited my question to include the appPage with the code working (and the ccGoogleMaps code commented out). This should lead you in the right direction - and perhaps even come up with a better solution ;-)
> <xe:appPage id="appPage4" pageName="map" resetContent="true">
> <xe:djxmHeading id="djxmHeading3" label="">
> <xe:this.back><![CDATA[<<]]></xe:this.back>
> <xe:this.moveTo><![CDATA[#{javascript:"place&documentId=" + viewScope.currentPlaceUnid +
> "&action=openDocument"}]]></xe:this.moveTo> </xe:djxmHeading>
> <xp:panel styleClass="container">
> <xp:this.data>
> <xp:dominoDocument var="document1" formName="Place" action="openDocument"
> documentId="#{javascript:viewScope.currentPlaceUnid}">
> <xp:this.postOpenDocument><![CDATA[#{javascript:var v:java.util.Vector = document1.getItemValue("Address"); var addr = "";
> for(var i=0; i<v.size(); i++) { if(i>0) addr += "," addr +=
> v.elementAt(i) } viewScope.address =
> addr;}]]></xp:this.postOpenDocument>
> </xp:dominoDocument>
> </xp:this.data>
> <div id="div1"></div> <!-- <xc:ccGoogleMaps map_height="400" map_width="320" map_width_measurement="px" map_height_measurement="px"
> map_zoom="10" map_type="ROADMAP" map_center_type="Address" map_center_address="#{javascript:viewScope.address}">
> <xc:this.marker>
> <xc:marker location_type="Address" animation="DROP"
> location_address="#{javascript:viewScope.address}">
> <xc:this.infotext><![CDATA[#{javascript:var info = "<b>" + document1.getItemValueString("Name") + "</b></br/>";
> var v:java.util.Vector = document1.getItemValue("Address");
> for(var i=0; i<v.size(); i++) {
> if(i>0) info += "<br/>"
> info += v.elementAt(i)
> }
> return info;}]]></xc:this.infotext>
> <xc:this.title><![CDATA[#{javascript:document1.getItemValueString("Name")}]]></xc:this.title>
> </xc:marker>
> </xc:this.marker>
> </xc:ccGoogleMaps> --> <div id="map_canvas" style="width:320px; height:400px"> </div> <xp:scriptBlock id="scriptBlock1">
> <xp:this.value><![CDATA[var geocoder; // 2013.11.01/Jda - Need to use code directly here instead of from Custom Control - and add
> require at the bottom... function initialize(){
>
> geocoder = new google.maps.Geocoder(); var myOptions = {
> zoom: 10,
> mapTypeId: google.maps.MapTypeId.ROADMAP
> };
> map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var mapcentertype = "Address"; if(mapcentertype ==
> "Coordinates"){
> var map_center_latitude = document.getElementById("#{id:hdnMapCenterLatitude}").value;
> var map_center_longitude = document.getElementById("#{id:hdnMapCenterLongitude}").value;
> centerMap = new
> google.maps.LatLng(parseFloat(map_center_latitude),parseFloat(map_center_longitude));
> map.setCenter(centerMap); }else if(mapcentertype == "Address"){
> var address = "#{javascript:viewScope.address}";
> geocoder.geocode( {'address': address}, function(results, status) {
> if(status == google.maps.GeocoderStatus.OK){
> map.setCenter(results[0].geometry.location);
> }else{
> alert("Geocode center was not successful for the following reason: " + status + " -> " + address); }; }); }else{ alert("You
> forgot to set the property map_center_type."); } codeAddress();
> }
>
> function codeAddress(){ var valueTitle =
> '#{javascript:document1.getItemValueString("Name")}'; var valueLayer
> = 0; var valueInfotext = '#{javascript:var info = "<b>" + document1.getItemValueString("Name") + "</b></br/>";
> var v:java.util.Vector = document1.getItemValue("Address");
> for(var i=0; i<v.size(); i++) {
> if(i>0) info += "<br/>"
> info += v.elementAt(i)
> }
> return info;}'; var valueIcon = ''; var valueAddress = "#{javascript:viewScope.address}"; var valueAnimation = "DROP"; var
> valueLocation_type = "Address"; var valueLocation_longitude = 0.0;
> var valueLocation_latitude = 0.0; showMap(valueAddress,
> valueAnimation, valueLayer, valueIcon, valueInfotext, valueTitle,
> valueLocation_type, valueLocation_longitude,
> valueLocation_latitude); }
>
> function showMap(address, marker_animation, marker_zindex,
> marker_icon, marker_infowindow_text, marker_title,
> marker_location_type, marker_location_longitude,
> marker_location_latitude) { // Create Marker
> var marker = new google.maps.Marker({map: map}); if(marker_location_type=="Coordinates"){
> var myLatLng = new google.maps.LatLng(parseFloat(marker_location_latitude),
> parseFloat(marker_location_longitude));
> marker.setPosition(myLatLng);
> }else{ geocoder.geocode( {'address': address}, function(results, status){
> if (status == google.maps.GeocoderStatus.OK) {
> marker.setPosition(results[0].geometry.location);
> } else {
> alert("Geocode was not successful for the following reason: " + status + " -> " + address);
> }
> });
> }
>
> // Set the title of the marker
> if(marker_title != ""){
> marker.setTitle(marker_title);
> };
> // Set the icon of the marker
> if(marker_icon != ""){
> marker.setIcon(marker_icon.replace("/",""));
> }; // Set the z-index of the marker if(marker_zindex != ""){ marker.setZIndex(parseInt(marker_zindex)); }; // Set the animation
> of the marker if(marker_animation != ""){
> if(marker_animation == "BOUNCE"){
> marker.setAnimation(google.maps.Animation.BOUNCE); }else
> if(marker_animation == "DROP"){
> marker.setAnimation(google.maps.Animation.DROP); }else{ //
> does not exist }; }; // Set the infowindow and
> text of the marker console.log("marker_infowindow_text=" +
> marker_infowindow_text); if(marker_infowindow_text != ""){ var
> infowindow = new google.maps.InfoWindow({content:
> marker_infowindow_text}); google.maps.event.addListener(marker,
> 'click', function() { infowindow.open(map,marker); }); }; }
>
> function showCircle(center_type, center_address, center_latitude,
> center_longitude, radius, fillColor, fillOpacity, strokeColor,
> strokeOpacity, strokeWeight, visible, zIndex) {
>
> if(visible == "false"){ visible = false; }else{ visible =
> true; }; //Create Circle var circle_options = { map: map,
> //center: center, radius: parseInt(radius), fillColor:
> fillColor.toString(), fillOpacity: fillOpacity, strokeColor:
> strokeColor.toString(), strokeOpacity: strokeOpacity,
> strokeWeight: strokeWeight,
> visible: visible,
> zIndex: zIndex }; var circle = new google.maps.Circle(circle_options); if(center_type ==
> "Coordinates"){ circle.setCenter(new
> google.maps.LatLng(parseFloat(center_latitude),
> parseFloat(center_longitude))); }else{ geocoder.geocode(
> {'address': center_address}, function(results, status) {
> if (status == google.maps.GeocoderStatus.OK) {
> circle.setCenter(results[0].geometry.location);
> } else {
> alert("Geocode of the circle was not successful for the following reason: " + status + " -> " + address);
> } });
>
> }; }
>
> require(["dojo/domReady"], function(){ initialize(); });
> ]]></xp:this.value> </xp:scriptBlock> </xp:panel>
> </xe:appPage>
I appologize that I had to use a combination of "blockquote" and "Code sample" to make XPage as well as JS look reasonable...
