8 Replies Latest reply: Mar 6, 2014 11:40 AM by user8058501 RSS

    How to create a marker on a Google map displayed in APEX 4.x

    user8058501

      Hi,

       

      I have an APEX (4.x) application that can display a Google map in a given region.

      Does someone know how I can create my own markers for this card?

      Markers are then defined with a given latitude/longitude.

      Probably this can be achieved with a JavaScript code, but I was unable to find such a code.

       

      Does someone has such experience? Can someone explain me how to get this?

       

      Thanks by advance for any indication and reference.

       

      Kind Regards

        • 2. Re: How to create a marker on a Google map displayed in APEX 4.x
          user8058501

          Hi,

           

           

          The first link is OK. I had already the map from Google.

           

          But I do not understand the second link.

           

          There is first that piece of code:

           

          marker = new google.maps.Marker({

              map:map,

              icon: "#APP_IMAGES#beachflag.png",

              animation: google.maps.Animation.DROP,

              position: new google.maps.LatLng(59.327383, 18.06747)

          });

           

          Where should I put this piece of code inside the APEX page definition?:

          What is beachflag.png? and where can I get it?

           

          Just below, there is that other piece of code:

           

          var iw = new google.maps.InfoWindow();

           

          google.maps.event.addListener(marker,'click',function(){

              iw.open(map,marker);

              iw.setOptions({content: "Hello World!"});

          });

           

           

          What is function()? To what does it refers?

           

           

          Can someone explain me how it works?

           

          Thanks by advance.

          • 3. Re: How to create a marker on a Google map displayed in APEX 4.x
            Jeff E

            user8058501 wrote:

             

            Hi,

             

             

            The first link is OK. I had already the map from Google.

             

            But I do not understand the second link.

             

            There is first that piece of code:

             

            marker = new google.maps.Marker({

                map:map,

                icon: "#APP_IMAGES#beachflag.png",

                animation: google.maps.Animation.DROP,

                position: new google.maps.LatLng(59.327383, 18.06747)

            });

             

            Where should I put this piece of code inside the APEX page definition?:

            You could put it after the code you used to create the map (Page Definition->JavaScript).

             

            What is beachflag.png? and where can I get it?

             

            Search for it and upload it to your shared components application images.  It can be any image you want to use for your pin.  You can leave the "icon:" line out all together if you want to use google's default pin.

            Just below, there is that other piece of code:

             

            var iw = new google.maps.InfoWindow();

             

            google.maps.event.addListener(marker,'click',function(){

                iw.open(map,marker);

                iw.setOptions({content: "Hello World!"});

            });

             

             

            What is function()? To what does it refers?

            JavaScript/Anonymous Functions - Wikibooks, open books for an open world

             

            It's basically defining the code to execute when a marker is clicked by the user.

            • 4. Re: How to create a marker on a Google map displayed in APEX 4.x
              user8058501

              Hi,

               

              Thanks for your reaction.

              It still does not work.

              Here is whole code that I have:

               

              [JavaScript]

               

              File URLs:

              https://maps.googleapis.com/maps/api/js?sensor=false

               

              Function and Global Variable Declaration:

              function initialize() {

                  var latlng = new google.maps.LatLng(43.5927635,1.433291);

                  var myOptions = {

                      zoom: 20,

                      center: latlng,

                      mapTypeId: google.maps.MapTypeId.ROADMAP

                  };

                  var map = new google.maps.Map(document.getElementById("map"),myOptions)

              }

               

              marker = new google.maps.Marker({

                  map:map,

                  animation: google.maps.Animation.DROP,

                  position: new google.maps.LatLng(43.5927635,1.433291)

              });

               

               

              var iw = new google.maps.InfoWindow();

              google.maps.event.addListener(marker,'click',function(){

                  iw.open(map,marker);

                  iw.setOptions({content: "Hello World!"});

              });

               

              Execute when Page Loads:

              initialize()

               

              I get the map like before, but I do not see any marker on the map.

              What is wrong with that code?

               

              Thanks by advance.

              • 5. Re: How to create a marker on a Google map displayed in APEX 4.x
                Jeff E

                You have a curly brace misplaced.  Move the closing curly brace that is above the "marker = new google...." line to the bottom of all your code.  You need all the code to be part of the initialize() function.

                • 6. Re: How to create a marker on a Google map displayed in APEX 4.x
                  user8058501

                  Hi,

                   

                   

                  Thanks for your verey fast answer.

                  Yes, like this it works.

                  I misunderstood all everything worked. The complete rendereing is done inside the JavaScript function at the moment it is called.

                   

                  Yet, before to close this thread, I am unable to get the icon of my choice on the map:

                   

                      - I have an icon called beachflag2.png in Shared Components -> Images

                      - I have changed the definition of the marker as:

                      marker = new google.maps.Marker({

                          map:map,

                          icon: "#APP_IMAGES#beachflag2.png",

                          animation: google.maps.Animation.DROP,

                          position: new google.maps.LatLng(43.5927635,1.433291)

                   

                  But I am now unable to see that new icon on the map.

                  Under Images or Shared Components, it is defined as #IMG_ALT#.

                   

                  What's wrong with the definition in my code?

                   

                   

                  Thanks by advance.

                  • 7. Re: How to create a marker on a Google map displayed in APEX 4.x
                    Jeff E

                    Maybe you didn't assign the image to an application?  If the image isn't assigned an application you would need to use "#WORKSPACE_IMAGES#beachflag2.png"

                    • 8. Re: How to create a marker on a Google map displayed in APEX 4.x
                      user8058501

                      Hi,

                       

                      Indeed, it works like this!!

                      Thanks again.

                       

                      Kind Regards