11 Replies Latest reply on Apr 6, 2009 10:50 AM by schlumsch

    GMap

    schlumsch

      Well, hello again,

      maybe this thread doesnt really match with this forum ... hope someone will hepl me anyhow.

      Is someone skilled in using GMap-Component? Im using this component within a jsf-page and need a function to reset the map, in detail i like to delete all markers i`ve added earlier. Ive already tried to implement this, without effort. So if someone knows how to do id posst some parts of my code, whould be very nice. Thanx a lot

      lg schlumsch

        • 1. Re: GMap
          ilya_shaikovsky

          use var to have access to gmap object. all the API should be taken from original google map documentation.

          • 2. Re: GMap
            schlumsch

            Well, i dont get it. There is an example on http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/google_northamerica_offices.html, showing how to delete. If i try this, nothing happens.
            So maybe u could have a look at this please? :

            [CODE]
            var map;
            var mgr;
            baseIcon.shadow = "http://server11117.isdg.de/images/mapicons/shadow50.png";
            baseIcon.iconSize = new GSize(20, 34);
            baseIcon.shadowSize = new GSize(37, 34);
            baseIcon.iconAnchor = new GPoint(9, 34);
            baseIcon.infoWindowAnchor = new GPoint(9, 2);

            function load() {
            alert('load');
            map = new GMap2(document.getElementById("gmCapture"));
            mgr = new MarkerManager(map, {trackMarkers:true});
            }
            function clearMarkers() {
            alert('try2clear');
            mgr.clearMarkers();
            }
            function showAnderesHotel(data) {
            var point = new GLatLng(data.lat,data.lon);
            mapCapture.setCenter(point);
            var marker = createMarker(point,data.name);
            mapCapture.setZoom(16);
            mapCapture.addOverlay(marker);
            }
            function createMarker(point,html) {
            var marker = new GMarker(point);
            GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
            });
            return marker;
            }

            [/CODE]

            [CODE]
            <rich:gmap id="gmCapture" ...
            gmapVar="mapCapture"
            oninit="load()">
            </rich:gmap>
            [/CODE]








            • 3. Re: GMap
              schlumsch

              Well, how to access the map in javascript by using var?
              The codes and examples of original google map are plausible, but they acces the map using code like

              map = new GMap2(document.getElementById("gmCapture"));
              ...

              • 4. Re: GMap
                nbelaevski

                Use gmapVar attribute.

                • 5. Re: GMap
                  schlumsch

                  Hmm, i can use gmapVar to acces the attributes of the component, like shown in the example at exadel-page. No Problemwith this. But, for example, hor to add a Markermanager like in the above posted code funktion load()? U got an example where i can see how it works?

                  • 6. Re: GMap
                    nbelaevski

                    I've tried Weather Map example - works ok (navigate to Europe to see markers):

                    <script>
                     //<![CDATA[
                     var IMAGES = [ "sun", "rain", "snow", "storm" ];
                     var ICONS = [];
                     var mgr;
                     function setupMap() {
                     if (GBrowserIsCompatible()) {
                     itsMap.addControl(new GLargeMapControl());
                     itsMap.setCenter(new GLatLng(41, -98), 4);
                     window.setTimeout(setupWeatherMarkers, 0);
                     }
                     }
                    
                     function getWeatherIcon() {
                     var i = Math.floor(IMAGES.length*Math.random());
                     if (!ICONS) {
                     var icon = new GIcon();
                     icon.image = "http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/"
                     + IMAGES + ".png";
                     icon.iconAnchor = new GPoint(16, 16);
                     icon.infoWindowAnchor = new GPoint(16, 0);
                     icon.iconSize = new GSize(32, 32);
                     icon.shadow = "images/"
                     + IMAGES + "-shadow.png";
                     icon.shadowSize = new GSize(59, 32);
                     ICONS = icon;
                     }
                     return ICONS;
                     }
                    
                     function getRandomPoint() {
                     var lat = 48.25 + (Math.random() - 0.5)*14.5;
                     var lng = 11.00 + (Math.random() - 0.5)*36.0;
                     return new GLatLng(Math.round(lat*10)/10, Math.round(lng*10)/10);
                     }
                     function getWeatherMarkers(n) {
                     var batch = [];
                     for (var i = 0; i < n; ++i) {
                     batch.push(new GMarker(getRandomPoint(), { icon: getWeatherIcon() }));
                     }
                     return batch;
                     }
                    
                     function setupWeatherMarkers() {
                     mgr = new MarkerManager(itsMap);
                     mgr.addMarkers(getWeatherMarkers(20), 3);
                     mgr.addMarkers(getWeatherMarkers(200), 6);
                     mgr.addMarkers(getWeatherMarkers(1000), 8);
                     mgr.refresh();
                     }
                    
                     //]]>
                     </script>
                    
                     <rich:gmap oninit="setupMap()" gmapVar="itsMap" zoom="#{gmBean.zoom}"
                     style="width:400px;height:400px" gmapKey="#{gmBean.gmapkey}"
                     id="gmap" />
                    
                     <script
                     src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script>


                    • 7. Re: GMap
                      schlumsch

                      hmmm, are u sure it works? I see no markers, even if i copy your whole code.

                      • 8. Re: GMap
                        nbelaevski

                        Ok, let me post it once again:

                        <script>
                         //<![CDATA[
                         var IMAGES = [ "sun", "rain", "snow", "storm" ];
                         var ICONS = [];
                         var mgr;
                         function setupMap() {
                         if (GBrowserIsCompatible()) {
                         itsMap.addControl(new GLargeMapControl());
                         itsMap.setCenter(new GLatLng(41, -98), 4);
                         window.setTimeout(setupWeatherMarkers, 0);
                         }
                         }
                        
                         function getWeatherIcon() {
                         var i = Math.floor(IMAGES.length*Math.random());
                         if (!ICONS) {
                         var icon = new GIcon();
                         icon.image = "http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/"
                         + IMAGES + ".png";
                         icon.iconAnchor = new GPoint(16, 16);
                         icon.infoWindowAnchor = new GPoint(16, 0);
                         icon.iconSize = new GSize(32, 32);
                         icon.shadow = "images/"
                         + IMAGES + "-shadow.png";
                         icon.shadowSize = new GSize(59, 32);
                         ICONS = icon;
                         }
                         return ICONS;
                         }
                        
                         function getRandomPoint() {
                         var lat = 48.25 + (Math.random() - 0.5)*14.5;
                         var lng = 11.00 + (Math.random() - 0.5)*36.0;
                         return new GLatLng(Math.round(lat*10)/10, Math.round(lng*10)/10);
                         }
                         function getWeatherMarkers(n) {
                         var batch = [];
                         for (var i = 0; i < n; ++i) {
                         batch.push(new GMarker(getRandomPoint(), { icon: getWeatherIcon() }));
                         }
                         return batch;
                         }
                        
                         function setupWeatherMarkers() {
                         mgr = new MarkerManager(itsMap);
                         mgr.addMarkers(getWeatherMarkers(20), 3);
                         mgr.addMarkers(getWeatherMarkers(200), 6);
                         mgr.addMarkers(getWeatherMarkers(1000), 8);
                         mgr.refresh();
                         }
                        
                         //]]>
                         </script>
                        
                         <rich:gmap oninit="setupMap()" gmapVar="itsMap" zoom="#{gmBean.zoom}"
                         style="width:400px;height:400px" gmapKey="#{gmBean.gmapkey}" id="gmap" />
                        
                         <script
                         src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script>


                        • 9. Re: GMap
                          nbelaevski

                          I've duplicated code here: http://pastebin.com/m40c80c49

                          • 10. Re: GMap
                            schlumsch

                            ok, sorry, it works, thanx a lot

                            • 11. Re: GMap
                              schlumsch

                              hmmm, i thought ive written that it works now... maybe i posted to another thread :) ... so let me tell u that it works fine, thanx a lot