This is a migrated thread and some comments may be shown as answers.

Google map in html page

18 Answers 354 Views

AppBuilder Windows client

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Audrey asked on 15 Feb 2013, 07:47 AM

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 ?

18 Answers, 1 is accepted

answered on 15 Feb 2013, 09:18 AM

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...

answered on 28 Feb 2013, 01:12 PM

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;
      }

answered on 23 Feb 2015, 01:35 PM

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>

answered on 23 Feb 2015, 01:41 PM

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);

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Google map in html page

18 Answers, 1 is accepted