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

    GMap

    bronk horst Newbie

      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 Master

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

          • 2. Re: GMap
            bronk horst Newbie

            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
              bronk horst Newbie

              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
                Nick Belaevski Master

                Use gmapVar attribute.

                • 5. Re: GMap
                  bronk horst Newbie

                  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
                    Nick Belaevski Master

                    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
                      bronk horst Newbie

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

                      • 8. Re: GMap
                        Nick Belaevski Master

                        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
                          Nick Belaevski Master

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

                          • 10. Re: GMap
                            bronk horst Newbie

                            ok, sorry, it works, thanx a lot

                            • 11. Re: GMap
                              bronk horst Newbie

                              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