One option is to use the "Exported KML" from custom My Maps to render the data on a Google Maps Javascript API v3 KmlLayer.

Description of how to get the KML link from MyMaps in my answer here

code snippet: (data from this MyMap)

var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var layer = new google.maps.KmlLayer({
    // url: "http://www.google.com/maps/d/kml?mid=zNPjLbo835mE.k3TvWfqGG-AU",
    url: "http://www.google.com/maps/d/kml?forcekml=1&mid=1-mpfnFjp1e5JJ1YkSBjE6ZX_d9w",
    map: map
  })

}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
Answer from geocodezip on Stack Overflow
🌐
Google
developers.google.com › google maps platform › web › maps javascript api › overview
Overview | Maps JavaScript API | Google for Developers
Get started with the Google Maps JavaScript API. View a simple example, learn the concepts, and create custom maps for your site.
🌐
Google
developers.google.com › google maps platform › web › maps javascript api › set up the maps javascript api
Set up the Maps JavaScript API | Google for Developers
To create an API key, navigate ... be done via the console or Cloud SDK by setting application and API restrictions. Finally, include the API key in every Maps JavaScript API request.\n"]]...
🌐
W3Schools
w3schools.com › graphics › google_maps_intro.asp
Google API Tutorial
An API is a set of methods and tools that can be used for building software applications. This example creates a Google Map in HTML: <!DOCTYPE html> <html> <body> <h1>My First Google Map</h1> <div id="googleMap" style="width:100%;height:400px;"></div> <script> function myMap() { var mapProp= { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script> </body> </html> ❮ Previous Next ❯ ·
🌐
npm
npmjs.com › package › @googlemaps › js-api-loader
@googlemaps/js-api-loader - npm
Wrapper for the loading of Google Maps JavaScript API script in the browser. Latest version: 2.0.2, last published: 2 months ago. Start using @googlemaps/js-api-loader in your project by running `npm i @googlemaps/js-api-loader`. There are 398 ...
      » npm install @googlemaps/js-api-loader
    
Published   Oct 29, 2025
Version   2.0.2
🌐
MichaelMinn
michaelminn.net › tutorials › google-maps-api
Introduction to JavaScript and the Google Maps API
The parameter to this method is the id for the desired element, in this case, the name of the <div> we are going to use for the map. The method returns an object that allows that element to be changed by the Google maps API code. Note that in JavaScript (unlike some other programming languages ...
🌐
Google Groups
groups.google.com › g › google-maps-js-api-v3 › c › PmzaUNE8TQA
google maps API, how to start
Also, when importing the API in the SCRIPT tag, please include the following attribute to be sure to get the latest v3 release ; the sensor parameter can be set to false, unless your web application is run from a device with a GPS (not likely for a PC, but if the application is devised for a mobile phone, that's possible). script type="text/javascript" src="http://maps...
Find elsewhere
🌐
Perficient Blogs
blogs.perficient.com › 2020 › 08 › 06 › step-by-step guide on calling google map javascript api for beginners 2020
Step-by-step Guide On Calling Google Map Javascript API For Beginners 2020
August 7, 2020 - Hit “Enable.” · Go to APIs & Services > Credentials under the Navigation Bar. Hit “+Create Credentials” and select the “API key.” · A modal containing your API key would pop up, and you can copy that key into your clipboard.
🌐
Google
developers.google.com › google maps platform › web › maps javascript api › maps
Maps JavaScript API | Google for Developers
Access by calling const {MapElement} = await google.maps.importLibrary("maps"). See Libraries in the Maps JavaScript API.
🌐
Google
developers.google.com › google maps platform › web › maps javascript api › simple map
Simple Map | Maps JavaScript API | Google for Developers
<html> <head> <title>Simple Map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once.
🌐
React Map GL
visgl.github.io › interacting with the google maps javascript api
Interacting with the Google Maps JavaScript API | React Google Maps
The Maps JavaScript API has a lot of additional libraries for things like geocoding, routing, the Places API, Street View, and a lot more. These libraries are not loaded by default, which is why this module provides a hook useMapsLibrary() to handle dynamic loading of those libraries. For example, if you want to write a component that needs to use the google.maps.places.PlacesService class, you can implement it like this: import {useMapsLibrary} from '@vis.gl/react-google-maps'; const MyComponent = () => { const map = useMap(); // triggers loading the places library and returns the API Object
🌐
Medium
medium.com › @ben.j.marum › google-maps-api-in-javascript-672543d62e9d
Google Maps API in JavaScript. Two years ago I tried and failed to… | by Ben M | Medium
May 24, 2023 - In the above example my google map ID is saved in the variable googleMap. The other optional properties will give us a max zoom roadmap view using my custom map colors. I recommend this tutorial to become more familiar with the options available and how to place custom map markers https://www.youtube.com/watch?v=CdDXbvBFXLY&t=46s. In it the instructor uses the maps API to create a Mario world map.
🌐
GitHub
github.com › googlemaps › google-maps-services-js
GitHub - googlemaps/google-maps-services-js: Node.js client library for Google Maps API Web Services
For other environments, try the Maps JavaScript API, which contains a comparable feature set, and is explicitly intended for use with client-side JavaScript. ... Below is a simple example calling the elevation method on the client class. Import the Google Maps Client using TypeScript and ES6 module:
Starred by 3K users
Forked by 655 users
Languages   TypeScript
🌐
Google Support
support.google.com › code › answer › 67818
Can I use the Maps JavaScript API with my map module? - Google Developers Help
Can I use the Maps JavaScript API with my map module? Yes, you can call the getMap() API method to get the native maps object which you can then use to call the Maps API methods. However, in GME's current implementation, some usage of the Maps API methods will break the default event handling ...
Top answer
1 of 4
13

I tried this solution of mine and it worked.

Run the script on dom ready using jquery.

basically instead of using your function initialize like this :

function initialize(){
/*You code */
}

do this:

$(function(){
/*You code */
})

And no need for google.maps.event.addDomListener(window, 'load', initialize);

Anymore.


Edit #1 : I am currently facing some familiar problem to yours, and I think I have a better solution to you now.

in your JS file, after your initialize function , put this function:

var ready: // Where to store the function

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

What it basically does is that it calls for the map loader first, and then calls for the map after the loader is ready.
And afterwards make use of you what just wrote with this

In your html page :

<script>
    $.getScript("You js file path",function(){
          $(document).ready(ready);
    });
</script>

And this gets the script so you can use its variables, and then call the variable you need ready after the DOM is ready and finished loading.

I recommend putting this at the bottom of your html page,after the body closes.

2 of 4
4

//Using jQuery's getScript function

$.getScript('[js containing the initialize function]',function(){
    $.getScript('https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize');
}); 

Explanation:

First load your external script containing the initialize function and upon callback, load the google map API with callback equals to initialize.

🌐
Apidog
apidog.com › blog › how-to-integrate-google-http-apidog-com-blog-how-to-integrate-google-maps-api-maps-api
How to Integrate Google Maps API: A Step-by-Step Guide
July 31, 2025 - Copy the API key and keep it safe, ... into your web page, you will need to include the Maps JavaScript API script in your HTML file and create a <div> element with an ID to hold the map....
🌐
Google
developers.google.com › google maps platform › web › maps javascript api › code samples
Code Samples | Maps JavaScript API | Google for Developers
This page provides a comprehensive list of sample applications showcasing the features of the Maps JavaScript API.
🌐
Nordic APIs
nordicapis.com › getting-started-with-google-maps-javascript-api
Getting Started With Google Maps Javascript API | Nordic APIs |
May 11, 2023 - Learn how to use the powerful Google Maps JavaScript API to create custom maps and projects! We walk through getting started here.
🌐
Google Cloud
console.cloud.google.com › apis › library › maps-backend.googleapis.com
Maps JavaScript API – APIs and services
Google Cloud Console has failed to load JavaScript sources from www.gstatic.com. Possible reasons are:www.gstatic.com or its IP addresses are blocked by your network administratorGoogle has temporarily blocked your account or network due to excessive automated requestsPlease contact your network ...