Run a javascript function from another function dynamically

Question

I want embed google maps dynamically using javascript. But I keep getting the error: Google is not defined. I am calling the map function from another function.

This is what I have tried.

//The below if statement is run by a send function which sends a POST statement and gets MAP as data on success 
if (res == 'MAP')
                {
                  $('#map_class').prepend('<div class="col2 column1 first" id="mapy"><div class="sec2map" style="overflow:hidden;height:550px;width:100%;"><div id="map"></div><script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script></div></div>');
                   init();
                }

function init() {

    var mapOptions = {
    // How zoomed in you want the map to start at (always required)
    zoom: 11,

    // disable UI
    disableDefaultUI: true,

    // The latitude and longitude to center the map (always required)
    center: new google.maps.LatLng(40.6700, -73.9400), // New York

    // How you would like to style the map.
    // This is where you would paste any style found on Snazzy Maps.
     styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}] };

// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');

// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);

// Let's also add a marker while we're at it
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(40.6700, -73.9400),
        map: map,
        title: 'Snazzy!'
    });
}

When I try to call init(); from the console the map appended but when I try to run from another function I get an error;

I would use https://api.jquery.com/jquery.getscript/ on your google script and in the success, do your prepend (minus the script tag) and init — Pete, Jan 08 '19 at 16:49

score 1 · Answer 1 · answered Jan 08 '19 at 16:46

As far I can understand your issue is that, before google map library is loaded properly you are calling the init() function.

if you are using jquery

surround your code in

    $(function(){
        // code here
    });

and in js surround the code in a document.load function

Run a javascript function from another function dynamically

1 Answers1