Can you load Google Maps API v3 via Google AJAX API loader

Question

Some time ago I used the regular method of loading Google Maps API like this:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true">

Later I switched to Google AJAX APIs to load Google Maps API. This was because a couple of "widgets" on my website needed the Google Ajax API loader so I chose to be consistent and used the AJAX APIs to load Google Maps as well:

<script type="text/javascript" src="http://www.google.com/jsapi?key=abcdef"></script>
<script type="text/javascript">
  google.load("maps", "2", {"other_params": "sensor=true"});
</script>

Now that I have finally decided to use Google Maps API v3, this page does not list API v3 in the available version list. None of the examples on API v3 documentation show the use of AJAX APIs as well. Is is possible (and supported) to load Google Maps API v3 via AJAX API loader?

score 24 · Accepted Answer · edited Jan 17 '18 at 11:16

24

It's undocumented, but it works.

google.load("maps", "3", {other_params:'key=YOUR_API_KEY', callback: function(){
  var map; // initialize your map in here
}});

[EDIT] The documentation now requires the use of an API key that is passed to the loader as a "key" parameter. I've removed 'sensor=false' as a parameter because it is now explicitly not required and throws a warning when provided.

edited Jan 17 '18 at 11:16

Nilpo

4,675
1
25
39

answered Mar 14 '11 at 17:16

HChen

2,141
13
12

1

Does "undocumented" mean it may (not) work as expected or it may (not) work in the future? – Salman A Mar 15 '11 at 06:00
3

@Salman Well, turns out it's [documented](http://code.google.com/apis/maps/faq.html#loadasync), just hidden deep inside the FAQ, rather than the documentation. – HChen Mar 15 '11 at 17:39
Right... seems like v3 api still has a long way to go. – Salman A Mar 16 '11 at 06:48
This is a great answer! Just wanted to let you know you're missing a } at the end. You need to close the callback function and the .load function. `}});` – Sam Thornton Apr 15 '13 at 07:04
1

Just to add clarification to how the call would look if you setup your map in a separate function: google.load('maps', '3', {other_params:'sensor=true', "callback" : yourFunctionName}); – MattC May 29 '13 at 16:33
2

how do you add your API key? i keep getting this warning on firebug `Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys util.js (line 210)` – user2636556 Sep 15 '16 at 10:11
@user2636556 I have updated the answer to address this issue. – Nilpo Jan 17 '18 at 11:17

score -1 · Answer 2 · edited Jan 17 '18 at 11:18

this example work perfectly.

//Set google Api
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
//Initialize General
<script type="text/javascript">
    //Add Jquery, if you need
    google.load("jquery", "1.7.1");
    //Initialize Map, with option sensor=false
    google.load("maps", 3, {other_params:"key=YOUR_API_KEY"});
    //Initialize Map's
    google.setOnLoadCallback(function() {
            var options = {
                  zoom: 10,
                  center: new google.maps.LatLng(-34.616507,-58.409463),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById('map_canvas'), options);
    });


</script>

I've updated this answer with currently working code. Love it when Google changes things without warning. — Nilpo, Jan 17 '18 at 11:19

Can you load Google Maps API v3 via Google AJAX API loader

2 Answers2

Linked