6 Replies Latest reply: Apr 19, 2012 9:39 AM by jcajun RSS

    Google Map API Issue

    jwellsnh
      Google Map API experts, I had a page running yesterday on apex.oracle.com that has since stopped working. The application is running Theme 23 with some custom templates. From what I can tell; my Google API Key is valid. Below is the code from the HTML page; can anyone help in debugging the page why the map no longer renders?

      HTML Header
      <!DOCTYPE html>
      <html>
        <head>
          <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
          <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map_canvas { height: 100% }
          </style>
          <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=&API_KEY.&sensor=true">
          </script>
          <script type="text/javascript">
      
            function initialize() {
              var myOptions = {
                center: new google.maps.LatLng(43.6953512,-71.6306325),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.HYBRID
              };
              var map = new google.maps.Map(document.getElementById("map_canvas"),
                  myOptions);
            }
          </script>
      
        </head>
      </html>
      Page HTML Body Attribute
      <body onload="initialize()">
      
      <div id="map_canvas" style="width:100%; height:100%"></div>
      
      </body>
      Jeff

      Edited by: jwellsnh on Feb 26, 2012 9:23 AM
        • 1. Re: Google Map API Issue
          jwellsnh
          Bump; does anyone have experience that they can share on this topic?

          Jeff
          • 2. Re: Google Map API Issue
            197888
            Version 3 of the API no longer requires a key.

            I don't know much about v2.

            I added this instead in the html header:
               
            <link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
            <script type="text/javascript" src="http://www.google.com/jsapi"></script>
            And this in the Jascript function section:
            function initialize() {
                    var myOptions = {
                      center: new google.maps.LatLng(43.6953512,-71.6306325),
                      zoom: 8,
                      mapTypeId: google.maps.MapTypeId.HYBRID
                    };
                    var map = new google.maps.Map(document.getElementById("map_canvas"),
                        myOptions);
                  }
            initialize(); in the execute before page load section

            And then I have a region with no template like this:
            <div id="map_canvas" style=" height : 600px; width :  400px ;"></div>
            I can't get the height;600px; width:400px to display in the style tag above, but that's what's there

            And the map displays ok for me.

            Check out
            http://apex.oracle.com/pls/apex/f?p=18507:29:1551211846028601:::::

            Edited by: jholoman on Feb 26, 2012 10:34 PM
            • 3. Re: Google Map API Issue
              jwellsnh
              Jeff,

              Thank you for the reply; your code still did not work in my application but leads to believe that my toying with some other templates the other day is the root of my problem. I will rebuild this application later today and I am positive that your solution will execute. Thanks for the tip about not needing the key in V3.

              Jeff
              • 4. Re: Google Map API Issue
                user208208
                Jeff, Jeff and others,

                I'm trying to integrate google maps with apex, but so far no luck.
                (apex version 4.1 - theme 23 or 22 - linux - problem can be reproduced on apex.oracle.com

                Apparently, I'm running into the same problem as Jeff.

                I've tried to make the set-up as easy as possible, but the google-map won't show up at all.

                Probably something small I've missed, but I don't see it...

                The scenario i did follow to reproduce it on apex.oracle.com (4.1) :

                - create new database application
                - create a new page, set the page to be public
                - added links to the google-maps api (attempts with and without specifying a key) in the html-header section of the page
                (e.g. same code as in the previous posts)
                - created a function initialize (in the javascript function and global variable declaration, also tried it to place in the HTML Header)
                (e.g. same code as in the previous posts)
                - made sure the function initialize is called (tried both in the execute when page loads-section (intialize() )
                and in the Page HTML Body Attribute (onload="initialize()")
                (function is called - javascript alert if added pops up)
                - Created a region (type HTML text) with a div-element that is referenced in the intialize-function:
                <div id="map_canvas" style="width:100%; height:100%"></div>

                When running the page: The map is not visible on the page.
                [http://apex.oracle.com/pls/apex/f?p=50599:1::::::]

                Any suggestions?
                Anyone that
                Dave

                Edited by: Dave M. on 30-mrt-2012 6:36

                Edited by: Dave M. on 30-mrt-2012 6:36 - Added link to apex.oracle.com
                • 5. Re: Google Map API Issue
                  user208208
                  Update on this issue :

                  The issue Jef reported may be a different issue.

                  My issue is linked with the rendering (CSS) of the page.

                  Apparently, if you now create a DIV within a page region (and then populate it with a google map when the page loads), the google-map is not visible at all.

                  If you add however the DIV in the "HTML Header" or "javascript function and global variable declaration", the map is visible (but the normal page lay-out is, of course, messed up completely).

                  Any ideas on how to to display a google-map in a particular region?
                  (issue can be simulated on apex.oracle.com)

                  Update : Issue solved.
                  The style-attribute has to be added to the div-tag to display :
                  <div id="map" style="width: 600px; height: 400px"></div>

                  Edited by: Dave M. on 3-apr-2012 14:40 - Solution added
                  • 6. Re: Google Map API Issue
                    jcajun
                    T H A N K S ! ! !

                    I've been searching for three days to find out why my map wouldn't render. Your answer fixed my problem.

                    Again, T H A N K S ! ! !