Author: bleathem Date: 2014-01-15 21:25:08 -0500 (Wed, 15 Jan 2014) New Revision: 23279 Modified: branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/java/org/richfaces/demo/gmap/Bean.java branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/webapp/richfaces/gmap/examples/mapUsage.xhtml branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/webapp/richfaces/gmap/usage.xhtml branches/enterprise/3.3.1.SP4/ui/gmap/src/main/resources/org/richfaces/renderkit/html/script/gmap.js branches/enterprise/3.3.1.SP4/ui/gmap/src/main/templates/gmap.jspx Log: RF-13459: Updated the gmap component to use the v3 maps API. Also update the API key used in the showcase demo Modified: branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/java/org/richfaces/demo/gmap/Bean.java =================================================================== --- branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/java/org/richfaces/demo/gmap/Bean.java 2014-01-13 19:45:07 UTC (rev 23278) +++ branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/java/org/richfaces/demo/gmap/Bean.java 2014-01-16 02:25:08 UTC (rev 23279) @@ -91,10 +91,11 @@ private String createKey() { HashMap hosts = new HashMap(); - hosts.put("localhost", "ABQIAAAAxU6W9QEhFLMNdc3ATIu-VxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRkrpOGzxH8_ud3inE9pG1845-FCA"); - hosts.put("localhost:8080", "ABQIAAAAxU6W9QEhFLMNdc3ATIu-VxTwM0brOpm-All5BF6PoaKBxRWWERTHxF5cK19oAMu3MP89kWdchuCH6w"); - hosts.put("livedemo.exadel.com", "ABQIAAAAxU6W9QEhFLMNdc3ATIu-VxRl-RYVoXwacweAQq3rWvtlmS78MhRst9EH2cahrIp0_HHi_U1Zn7o1Fg"); - + hosts.put("localhost", ""); + hosts.put("localhost:8080", ""); + hosts.put("showcase3-richfaces.rhcloud.com", "AIzaSyBEIKdYnmr76M_Hs1rDGFEt4E7WfxSdo9Q"); + hosts.put("http://showcase-rf3.richfaces.org/";, "AIzaSyBEIKdYnmr76M_Hs1rDGFEt4E7WfxSdo9Q"); + ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext(); String host = (String)ec.getRequestHeaderMap().get("host"); String key = (String)hosts.get(host); Modified: branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/webapp/richfaces/gmap/examples/mapUsage.xhtml =================================================================== --- branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/webapp/richfaces/gmap/examples/mapUsage.xhtml 2014-01-13 19:45:07 UTC (rev 23278) +++ branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/webapp/richfaces/gmap/examples/mapUsage.xhtml 2014-01-16 02:25:08 UTC (rev 23279) @@ -10,14 +10,25 @@ .optionList { height:30px; } - </style> + </style> + <script type="text/javascript"> + function showMapControls(map, toggle) { + map.setOptions({disableDefaultUI: toggle, + scaleControl: toggle, + mapTypeControl: toggle, + panControl: toggle, + zoomControl: toggle, + streetViewControl:toggle + }); + } + </script> <h:panelGrid columns="2"> - <rich:gmap gmapVar="map" zoom="#{gmBean.zoom}" style="width:400px;height:400px" gmapKey="#{gmBean.gmapkey}" id="gmap"/> + <rich:gmap gmapVar="map" zoom="#{gmBean.zoom}" style="width:400px;height:400px" gmapKey="#{gmBean.gmapkey}" id="gmap" enableDoubleClickZoom="true"/> <h:panelGroup> <h:form> <a4j:jsFunction name="showPlace" data="#{gmBean.currentPlace}" reRender=":zoom" - oncomplete="map.setCenter(new GLatLng(data.lat, data.lng),data.zoom)"> + oncomplete="map.setCenter(new google.maps.LatLng(data.lat, data.lng)); map.setZoom(data.zoom);"> <a4j:actionparam name="id" assignTo="#{gmBean.currentId}"></a4j:actionparam> </a4j:jsFunction> @@ -26,8 +37,8 @@ <h:panelGrid columns="2" columnClasses="optionList"> <h:outputText value="Controls:" /> <h:panelGroup> - <a href="javascript: void 0" onclick="map.hideControls()">Hide</a> - <a href="javascript: void 0" onclick="map.showControls()">Show</a><br/> + <a href="javascript: void 0" onclick="showMapControls(map, false)">Hide</a> + <a href="javascript: void 0" onclick="showMapControls(map, true)">Show</a><br/> </h:panelGroup> <h:outputText value="Zoom:" /> @@ -37,9 +48,9 @@ <h:outputText value="Map Type:" /> <h:panelGroup> - <a href="javascript: void 0" onclick="map.setMapType(G_NORMAL_MAP)">Normal</a> - <a href="javascript: void 0" onclick="map.setMapType(G_SATELLITE_MAP)">Satellite</a> - <a href="javascript: void 0" onclick="map.setMapType(G_HYBRID_MAP)">Hybrid</a><br/> + <a href="javascript: void 0" onclick="map.setMapTypeId(google.maps.MapTypeId.ROADMAP)">Normal</a> + <a href="javascript: void 0" onclick="map.setMapTypeId(google.maps.MapTypeId.SATELLITE)">Satellite</a> + <a href="javascript: void 0" onclick="map.setMapTypeId(google.maps.MapTypeId.HYBRID)">Hybrid</a><br/> </h:panelGroup> </h:panelGrid> Modified: branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/webapp/richfaces/gmap/usage.xhtml =================================================================== --- branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/webapp/richfaces/gmap/usage.xhtml 2014-01-13 19:45:07 UTC (rev 23278) +++ branches/enterprise/3.3.1.SP4/samples/richfaces-demo/src/main/webapp/richfaces/gmap/usage.xhtml 2014-01-16 02:25:08 UTC (rev 23279) @@ -12,8 +12,8 @@ <p>The Richfaces Gmap component is a wrapper for the standard Google Map widgets. You can use the whole set of functionality Google Map API provides for you. - See <a target="_blank" href="http://www.google.com/apis/maps/documentation/"> - Google Maps API Version 2 Documentation</a> for Google Map API features. + See <a target="_blank" href="https://developers.google.com/maps/documentation/javascript/re... + Google Maps Javascript API V3 Reference</a> for Google Map API features. </p> <p> Gmap has built-in Ajax capability. You do not need to uptade the component using reRender to see Modified: branches/enterprise/3.3.1.SP4/ui/gmap/src/main/resources/org/richfaces/renderkit/html/script/gmap.js =================================================================== --- branches/enterprise/3.3.1.SP4/ui/gmap/src/main/resources/org/richfaces/renderkit/html/script/gmap.js 2014-01-13 19:45:07 UTC (rev 23278) +++ branches/enterprise/3.3.1.SP4/ui/gmap/src/main/resources/org/richfaces/renderkit/html/script/gmap.js 2014-01-16 02:25:08 UTC (rev 23279) @@ -1,56 +1,53 @@ - function __addLoadEvent(func) { -Event.observe(window, "load", func ); + Event.observe(window, "load", func); } function __addUnLoadEvent(func) { -Event.observe(window, "unload", func ); + Event.observe(window, "unload", func); } -function __initGmapdiv(mapVar, clid,warningMessage ) { -var mapdiv = document.getElementById(clid); -if (GBrowserIsCompatible()) { -window[mapVar] = new GMap2(mapdiv); -mapdiv.map = window[mapVar]; -} else { - mapdiv.innerHTML=warningMessage; +function __initGmapdiv(mapVar, clid, warningMessage, options) { + var mapdiv = document.getElementById(clid); + window[mapVar] = new google.maps.Map(mapdiv, options); + mapdiv.map = window[mapVar]; } -} -function __applyGmapparam(gmapVar,lat,lng,zoom,mapType,enableDragging,enableInfoWindow, -enableDoubleClickZoom,enableContinuousZoom,isGMapType,isGScale,isGLarge) - { - if (GBrowserIsCompatible()) { +function __applyGmapparam(mapVar, enableInfoWindow) { + if (!enableInfoWindow) { // v3 + window[mapVar].setOptions({styles: [ -window[gmapVar].setCenter(new GLatLng(lat, lng), zoom, mapType); -if (enableDragging) - window[gmapVar].enableDragging(); -else - window[gmapVar].disableDragging(); - -if (enableInfoWindow) - window[gmapVar].enableInfoWindow(); -else - window[gmapVar].disableInfoWindow(); - -if (enableDoubleClickZoom) - window[gmapVar].enableDoubleClickZoom(); -else - window[gmapVar].disableDoubleClickZoom(); - -if (enableContinuousZoom) - window[gmapVar].enableContinuousZoom(); -else - window[gmapVar].disableContinuousZoom(); - -if (isGMapType) - window[gmapVar].addControl(new GMapTypeControl()); - -if (isGScale) -window[gmapVar].addControl(new GScaleControl()); - -if (isGLarge) -window[gmapVar].addControl(new GLargeMapControl()); + { + featureType: "poi.business", + elementType: "labels", + stylers: [ + { visibility: "off" } + ] + } + ]}); + } } +function __v3mapType(mapType) { + // v2: G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP v3: HYBRID, ROADMAP, SATELITE, TERRAIN + var v3mapType; + switch (mapType) { + case 'HYBRID': + case 'ROADMAP': + case 'SATELITE': + case 'TERRAIN': + v3mapType = google.maps.MapTypeId[mapType]; + break; + case 'G_NORMAL_MAP': + v3mapType = google.maps.MapTypeId.ROADMAP; + break; + case 'G_SATELLITE_MAP': + v3mapType = google.maps.MapTypeId.SATELLITE; + break; + case 'G_HYBRID_MAP': + v3mapType = google.maps.MapTypeId.HYBRID; + break; + default: + v3mapType = google.maps.MapTypeId.SATELITE; + } + return v3mapType; } \ No newline at end of file Modified: branches/enterprise/3.3.1.SP4/ui/gmap/src/main/templates/gmap.jspx =================================================================== --- branches/enterprise/3.3.1.SP4/ui/gmap/src/main/templates/gmap.jspx 2014-01-13 19:45:07 UTC (rev 23278) +++ branches/enterprise/3.3.1.SP4/ui/gmap/src/main/templates/gmap.jspx 2014-01-16 02:25:08 UTC (rev 23279) @@ -31,13 +31,25 @@ <div id="#{clientId}" class="dr-gmap rich-gmap #{component.attributes['styleClass']}" x:passThruWithExclusions="id,class,styleClass"> -<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=#{... /> +<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.9&amp;key=#{key}... <script type="text/javascript"> //<![CDATA[ -function __initGMap() { __initGmapdiv("#{map}","#{clientId}", "#{warningMessage}"); - __applyGmapparam("#{map}",#{lat}, #{lng},#{zoom},#{mapType},#{enableDragging},#{enableInfoWindow},#{enableDoubleClickZoom},#{enableContinuousZoom},#{isGMapType},#{isGScale},#{isGLarge}); - var userfunc = function(event) { #{oninit} }; userfunc();};__addLoadEvent(__initGMap);__addUnLoadEvent(GUnload); +function __initGMap() { __initGmapdiv("#{map}","#{clientId}", "#{warningMessage}", { + center: new google.maps.LatLng('#{lat}', '#{lng}'), + zoom: #{zoom}, + mapTypeId: __v3mapType('#{mapType}'), + disableDoubleClickZoom: ! #{enableDoubleClickZoom}, + draggable: #{enableDragging}, + animatedZoom: #{enableContinuousZoom}, // v3.9 + mapTypeControl: #{isGMapType}, + scaleControl: #{isGScale}, + zoomControlOptions: { + style: #{isGLarge} ? google.maps.ZoomControlStyle.LARGE : google.maps.ZoomControlStyle.SMALL + } +}); + __applyGmapparam("#{map}", #{enableInfoWindow}); + var userfunc = function(event) { #{oninit} }; userfunc();};__addLoadEvent(__initGMap); //]]> </script> </div>