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 OverflowVideos
» npm install @googlemaps/js-api-loader
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.
//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.