Calling Google Maps Api by ajax doesn't work

Question

I have some problems with that. In this website (http://hyp.altervista.org/home.html) i want to go on the page: location, and it should appear my google map, called by ajax function.

I have the getLocation.php called by AJAX:

 <?php echo '<div id="map-canvas"></div>'; ?>

Meanwhile the script that call:

window.onload = loadScript;
                $.ajax({
                method: "POST",
                //dataType: "json", //type of data
                crossDomain: true, //localhost purposes
                url: "../getLocation.php", //Relative or absolute path to file.php file
                success: function(response) {


                    $(".contenuti").html(" "+response);

                },
                error: function(request,error) 
                {
                    console.log("Error");
                }
            });

But i can't see the map. I put the script of google in home:

 function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644)
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
      }

      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
            '&signed_in=true&callback=initialize';
        document.body.appendChild(script);
      }

score 1 · Answer 1 · answered May 26 '15 at 07:15

1

Replace map div On

<div id='map-canvas' style="display:block;height:600px;"></div>

And on end of script write

initialize();

answered May 26 '15 at 07:15

Abrar Khan

175
10

thanks, but it appear: "Uncaught ReferenceError: google is not defined" on console. – Daniele Serra May 26 '15 at 07:50
I tried to put window.onload = loadScript(); instead of window.onload = loadScript; but sometimes works and sometimes said: Uncaught TypeError: Cannot read property 'offsetWidth' of null – Daniele Serra May 26 '15 at 07:51
http://stackoverflow.com/questions/14229695/google-maps-api-throws-uncaught-referenceerror-google-is-not-defined-only-whe – Abrar Khan May 26 '15 at 08:02

score 1 · Accepted Answer · answered May 26 '15 at 08:07

1

try move the loadScript() for google maps apis before the loadScript() of windows.onload, and remember to add the initialize(); at the end of the script

answered May 26 '15 at 08:07

ScaisEdge

131,976
10
91
107

Calling Google Maps Api by ajax doesn't work

2 Answers2