Google map in html page

19 posts, 0 answers
  1. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 15 Feb 2013 Link to this post

    Hello,
    I come today to ask your help. Indeed, yesterday I tried all the day to insert a map in a div in a part of my page, but it failed....
    When I pu the map on all the page (both height & width to 100%), it worked. But I don't want to display it on all the surface, I'd like to display it in a div 300x400 or something like that... But when I reduice the size, the div stayed empty...

    I used the code from Google's website, modifying it a little :

    <!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="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
        </script>
      
      </head>
      <body>
    <div id="localisation" class="bloc">
                <div class="entete">Localisation</div>
            </div>

    <script type="text/javascript">
    //Things doing
    if (Reponse.Latitude != null &&
    Reponse.Latitude != "" && Reponse.Latitude != undefined
    && Reponse.Longitude != null && Reponse.Longitude != ""
    && Reponse.Longitude != undefined) {
                    $(" <div id="map_canvas"></div>").appendTo("#localisation");
                    initialize();
    }
          function initialize() {
            var mapOptions = {
              center: new google.maps.LatLng(-34.397, 150.644),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                mapOptions);
          }
        </script>
      </body>
    </html>


    Do you have any idea ?
  2. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 15 Feb 2013 Link to this post

    Does this work for you:

    #localisation, #map_canvas { width: 300px; height: 400px; padding: 0; }

  3. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 15 Feb 2013 Link to this post

    Hi,
    Thanks for reply. I did what you said but it doesn't work... The page keeps being empty...
  4. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 15 Feb 2013 Link to this post

    It tryed this code :
    <!DOCTYPE html>
    <html lang="fr">
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>[GoogleMaps API V3] Insertion d'une Carte</title>
        <style type="text/css">
          #div_carte {
            height : 400px; /* IMPERATIF */
            width : 90%;
            margin : auto;
            border : 1px solid #888;
          }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          function initCarte(){
            // création de la carte
            var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
              'center' : new google.maps.LatLng( 46.80, 1.70),
              'zoom' : 6,
              'mapTypeId' : google.maps.MapTypeId.ROADMAP
            });
          }
          // init lorsque la page est chargée
          google.maps.event.addDomListener( window, 'load', initCarte);
        </script>
      </head>
      <body>
        <h1>Titre de la carte</h1>
        <div id="div_carte"></div>
      </body>
    </html>


    On iOS, it works, but on Android the bloc is still white... I can just see the border...
  5. Kristian D. Dimitrov
    Admin
    Kristian D. Dimitrov avatar
    68 posts

    Posted 18 Feb 2013 Link to this post

    Hi Audrey,

    I pasted your code in a blank project but was unable to reproduce your issue on 2.3.3, 2.3.6, 4.0.4 and 4.1.1 Android devices. Could you please share the model and Android version of the device that you are testing your code on?

    Regards,
    Kristian D. Dimitrov
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  6. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 25 Feb 2013 Link to this post

    Yes, it's a Samsung Galaxy Note GT-N7000 on Android 4.1.2
  7. Kristian D. Dimitrov
    Admin
    Kristian D. Dimitrov avatar
    68 posts

    Posted 25 Feb 2013 Link to this post

    Hi Audrey,

    We tested your code on Galaxy Note II GT-N7100 with Android 4.1.2 and manage to reproduce it when Internet connection is down. Please let us know is that your case?

    Greetings,
    Kristian D. Dimitrov
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  8. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 25 Feb 2013 Link to this post

    Hello,
    No I had the Internet connected...
  9. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 27 Feb 2013 Link to this post

    No more idea ?
  10. Kristian D. Dimitrov
    Admin
    Kristian D. Dimitrov avatar
    68 posts

    Posted 28 Feb 2013 Link to this post

    Hello Audrey,

    We could not reproduce this issue on any of our testing devices.

    It would be great, if you could try on a different device on the same network and on the  Galaxy Note GT-N7000 on different network.

    If you find the source of the problem, please share it with us.

    Kind regards,
    Kristian D. Dimitrov
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  11. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 28 Feb 2013 Link to this post

    Hi,
    Well I don't know how but now it works fine...
  12. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 28 Feb 2013 Link to this post

    But now I have another problem : I integrated the map in my div which displays my map but it doesn't display it completly.

    I let you see below :
    http://nsa29.casimages.com/img/2013/02/28/130228114426592636.jpg

    And even if i move the map in the div, it hide a part of it.
  13. Jan-Dirk
    Jan-Dirk avatar
    327 posts
    Member since:
    Jun 2012

    Posted 28 Feb 2013 Link to this post

    How did you configure the div (or canvas) where you put the map in?
  14. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 28 Feb 2013 Link to this post

    This is the function which configure the map <div id=\"div_carte\"></div>

    function initCarte(Lat, Lng) {
                var latlng = new google.maps.LatLng(Lat, Lng);
                var map = new google.maps.Map(document.getElementById('div_carte'), {
                    'center': latlng,
                    'zoom': 16,
                    'mapTypeId': google.maps.MapTypeId.ROADMAP
                });
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
            }

    The div of the map is generate by the Javascript :

    if (Reponse.Latitude != null && Reponse.Latitude != "" && Reponse.Latitude != undefined && Reponse.Longitude != null && Reponse.Longitude != "" && Reponse.Longitude != undefined) {
                    $("<p class=\"description\">Latitude : " + Reponse.Latitude + "</p>"
                        + "<p class=\"description\">Longitude : " + Reponse.Longitude + "</p>"
                            + "<br/><div id=\"div_carte\"></div>").appendTo("#LocCop");
                    initCarte(Reponse.Latitude, Reponse.Longitude);
                }

    And below the CSS :

    #div_carte {
            height : 200px; /* INDISPENSABLE */
            width : 90%;
            margin : auto;
            border : 1px solid #888;
          }
  15. Audrey
    Audrey avatar
    52 posts
    Member since:
    Jan 2013

    Posted 01 Mar 2013 Link to this post

    And the problem is the same on both Android and iOS
  16. Kristian D. Dimitrov
    Admin
    Kristian D. Dimitrov avatar
    68 posts

    Posted 05 Mar 2013 Link to this post

    Hi Audrey,

    We couldn't reproduce this behavior of the map even with code snippets you provided.

    However I've had similar problem with Google maps, when changing orientation of the device and the solution was to trigger the "resize" event of  the map.

    Try adding the following line of code at the end of your "initCarte" function:

    google.maps.event.trigger(map, 'resize');
    Greetings,
    Kristian D. Dimitrov
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  17. Vasil
    Vasil avatar
    2 posts
    Member since:
    Feb 2015

    Posted 23 Feb 2015 Link to this post

    Hi All,

    Audrey, you could easily amend the code like this:

    <!DOCTYPE html>
    <html lang="fr">
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Sofia Map</title>
        <style type="text/css">
          #div_map {
            height : 500px;
            width : 100%;
            margin : auto;
            border : 1px solid #888;
          }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
      document.addEventListener("deviceready", initCart, false); // you need to add this line in the JavaScript, once the App is loaded it will compile the code
          function initCart(){        
            var oMap = new google.maps.Map( document.getElementById( 'div_map'),{
              'center' : new google.maps.LatLng( 42.70, 23.33),
              'zoom' : 15,
              'mapTypeId' : google.maps.MapTypeId.ROADMAP
            });
            
            google.maps.event.trigger(map, 'resize');

          }
          
          google.maps.event.addDomListener( window, 'load', initCart);
        </script>
      </head>
      <body>
        <h1>Sofia Map</h1>
        <div id="div_map"></div>
      </body>
    </html>
  18. Vasil
    Vasil avatar
    2 posts
    Member since:
    Feb 2015

    Posted 23 Feb 2015 in reply to Vasil Link to this post

    Here this directly you can paste it to the AppBuilder, I separated add HTML and JavaScript like in the AppBuilder:

    HTML:
    <!DOCTYPE html>
    <html lang="fr">
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Sofia Map</title>
        <style type="text/css">
          #div_map {
            height : 400px;
            width : 100%;
            margin : auto;
            border : 1px solid #888;
          }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="scripts/app.js"></script>
      </head>
      <body>
        <h1>Sofia Map</h1>
        <div id="div_map"></div>
      </body>
    </html>

    JavaScript:

      document.addEventListener("deviceready", initCart, false);
      function initCart() {
          var oMap = new google.maps.Map(document.getElementById('div_map'), {
              'center': new google.maps.LatLng(42.70, 23.33),
              'zoom': 15,
              'mapTypeId': google.maps.MapTypeId.ROADMAP
          });

          google.maps.event.trigger(map, 'resize');

      }

      google.maps.event.addDomListener(window, 'load', initCart);
  19. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 25 Feb 2015 Link to this post

    Hi Vasil,

    Thank you for sharing this with the community.

    As a small token of gratitude, I have added some Telerik points to your account. Please, keep up the good work.

    Regards,
    Kaloyan
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top