I am trying to display a map in my webpage to get coordinates from it. It works fine, I can drag and drop a marker and get coordinates in input boxes.

But my problem comes when I load the webpage. Everything is well displayed but the map, here you can see how the map is displayed:

But if in this moment I resize the webpage, I mean, if it was full screen, put it half. Or make it a little big bigger or smaller if it was just a part of the screen. Then, You will see the correct map:

(It is not the same place, I know. I took the image from 2 reloads)

I create the webpage in HTML but I call it as if they were distinct webpages. When you load the index, you get a button with this

href:<a href=#openMap>

And, the part showed will be:

<div data-role=page  id=openMap data-theme=e>

<div data-role=header data-id=fixedNav data-position=fixed>

    blablabla

    <div data-role=content>

        <form action=>

            <div id=map_canvas style=width:500px; height:300px></div>

            blablabla

And all divs, forms... properly closed. I have many input boxes and fields which I haven't put them here.

Then, in my google map script I have this:

var map;

function initializeNewMap() {

  var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009);



  var myOptions = {

     zoom: 14,

     center: myLatlng,

     mapTypeId: google.maps.MapTypeId.ROADMAP

  }

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



  var marker = new google.maps.Marker({

      draggable: true,

      position: myLatlng, 

      map: map,

      title: Your location

  });



}

But I have no idea why I need to resize. Is it a way to solve it?

EDIT: I add more info:

I call the part of the webpage which has the map this way:

$(document).on(pageinit, '#openMap', function() {

I tried to put

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

just after it but nothing happens.

SOLUTION:

I found the solution in other question (Google Maps v3 load partially on top left corner, resize event does not work, Ian Devlin post):

As one user said here, I need to resize map. But just that line didn't work. I added this code at the end of the initialize function:

google.maps.event.addListenerOnce(map, 'idle', function() {

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

});

So it is just called after the map is shown.