How to include a google map in an application

StackOverflow https://stackoverflow.com/questions/15016486

  •  10-03-2022
  •  | 
  •  

Question

This question is specific to the design. I have an application that displays positions on a map all works "fine". But now I need to design the user interface, that goes beyond the map (buttons, forms, etc.) these will be located on one side of the map, but under any reason the map is displayed once change some of the CSS page.

I'm a bit desperate since neither my own CSS, or bootstrap (2.3.0), foundation (3.2.5) works. The map simply not displayed, in the console there are no errors. Event in the better case the map is displayed but with graphics glitchs (zoom controls messed, bad markers position, etc) That may be happening and how I can fix this. Will I have to use an iframe? or is there a better solution?

I've readed about max-width: none fix but this is solving nothing. To clarify that I am using the maps are not static.

I can get work perfectly the maps if try with a simple markup and styles

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My App</title>

        <link rel="stylesheet" href="/css/styles.css" media="all">
    </head>
    <body>
        <div id="map" class="map_canvas"></div>
        <script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
        <script src="/js/app.js"></script>
    </body>
</html>

styles.css

html, body, .map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}

app.js

google.maps.event.addDomListener(window, 'load', function() {

    options = {
        zoom: 15,
        center: new google.maps.LatLng(10.472937,-73.262308),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), options);    
});

But obviously it'snt enough for build the application.

Was it helpful?

Solution

A solution that includes the use of iframes, since it seems that is the only way that the map is not affected by the rest of the CSS

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My App</title>    
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3"></div>
            <div class="span9">
                <iframe id="map_container" src="/map.html" frameborder="0"></iframe>
            </div>
        </div>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?&v=3.exp&sensor=false"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="/js/app.js"></script>
    </body>
</html>

map.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mapa</title>
    <link rel="stylesheet" href="/css/map-styles.css" media="all">
</head>
<body>
    <div id="map" class="map_canvas"></div>
</body>
</html>

map-styles.css

html, body, .map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}

app.js

google.maps.event.addDomListener(window, 'load', function() {

    var options = {
            zoom: 15,
            center: new google.maps.LatLng(10.472937,-73.262308),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        $iframe = $('#map_container'),
        map_el = $iframe.contents().find('#map')[0],
        map = new google.maps.Map(map_el, options);

        // Match iframe size to parent
        $iframe.width($iframe.parent().width());
        $iframe.height($iframe.parent().height());
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top