Loading the google map using ajax

Question

I am trying to implement google maps in to my page. I couldn't able to acheive it. I am just getting an empty container. I am doing something wrong here ?

 <div class="container">
 <div class="map">
 <div id="map-container" class="z-depth-1-half map-container" style="height: 500px;"></div>
 </div>
 </div>

These are the script files

<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script>
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    }
</script>

You talk about php and ajax in your question but the code provided shows neither. Can you be more specific? — F.Almeida
– F.Almeida, Commented Feb 19, 2018 at 15:18
Change this line to: map = new google.maps.Map(document.getElementById('map-container'). — F.Almeida
– F.Almeida, Commented Feb 19, 2018 at 15:22

Jorge Nunes · Accepted Answer · 2018-02-19 15:21:06Z

4

Simple: Your script must be: <script async defer src="//maps.googleapis.com/maps/api/js?key=YourApiKey&callback=initMap"></script>

If necessary, post an screen on your console web.

To know more.

answered Feb 19, 2018 at 15:21

Jorge Nunes

2481 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

cantona_7 Over a year ago

hallo..,it loads for a minute but suddenly "oops,something went wrong" this page didnt load google maps..this is the error

Jordi Castilla Over a year ago

@yuvii_10 maybe API keys??

Jorge Nunes Over a year ago

You need get an key. Acess the site and press "GET KEY"

Jorge Nunes Over a year ago

@JordiCastilla exact!

Jordi Castilla Over a year ago

I guessed so @Jorge but IMHO, this is already a new question :P

|

Collectives™ on Stack Overflow

Loading the google map using ajax

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related