google maps api v3 not fully charged

Question

I am working on a page where I have a google-powered map (just like the one you find on maps.google.com. It works just fine in chrome and FireFox (of course), but in IE not.

only happens in IE (<9). the map is within a tab.

This is the code I use to generate the map:

    <!-- Estilos para el contenedor del mapa -->
<style type="text/css">  
    #datosMap
    {
        width: 20%;
    }
    #datosMap, #map
    {
        display: inline-block;
        vertical-align: top;
    }
    #map{
        height: 500px;
        width: 70%;
    }   
    #subtabMapa
    {
        margin: 16px;
    }
</style>

$(document).ready(function(){   
//Funcion para cargar el mapa
    function cagarMapa(latitud,longitud,zoom){
        //Se carga el mapa
        var latlng = new google.maps.LatLng(latitud, longitud);
        var myOptions = {
              zoom: zoom,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
            };
        var map = new google.maps.Map(document.getElementById("map"),myOptions);    

        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });     


         google.maps.event.trigger(map, 'resize');
    }//Fin funcion cargar
    //------------------------------------

    //latitud y longitud de colombia
    var latitud = 4.214495;
    var longitud = -74.341861;
    var zoom = 5;

    cagarMapa(latitud,longitud,zoom);//Se carga el mapa en las coordenadas y el zoom indicados

});//Fin ready


<div id="map"><!--MAP HERE--></div> <div id="datosMap"><!-- here is a form --></div>

looks like this: https://i.stack.imgur.com/uSLQR.png

anyone can give me a hand

possible duplicate of [Google Maps loading strangely](http://stackoverflow.com/questions/4340975/google-maps-loading-strangely) — Dr.Molle, Feb 28 '13 at 22:04

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

Not sure if it will help but this post suggests removing the var from in front of the map.

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

becomes

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

edited May 23 '17 at 12:14

Community

1
1

answered Feb 28 '13 at 22:30

Rafe

793
6
15

score 0 · Answer 2 · answered Mar 01 '13 at 09:52

0

The problem is your trailing comma on the last item here. IE doesn't like this and it will cause a JS error:

mapTypeId: google.maps.MapTypeId.ROADMAP,

answered Mar 01 '13 at 09:52

duncan

31,401
13
78
99

score 0 · Answer 3 · answered Mar 01 '13 at 17:03

duncan, Rafe thanks. I tried using your solutions but the problem continues.

I solved the problem this way: loading the map when clicking in the tab.

Here's my code:

$(document).on("ready",init);
function init()
{
  $("#tabmapa").on("click",mapainicial)
}
function mapainicial()
{
  //latitud y longitud de colombia
  var latitud = 4.214495;
  var longitud = -74.341861;
  var zoom = 5;
  cagarMapa(latitud,longitud,zoom);//Se carga el mapa en las coordenadas y el zoom        indicados
}

Thanks for your help (Y). PD: Mods, can you mark this as solved please?

google maps api v3 not fully charged

3 Answers3