Google Map javascript api key

Question

I am using a cordova application and have a browser key for map.

<script async defer

        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHJxzPHD_egYnhxntqcvfem35YRjruzAg&callback=initMap">
</script>

but I want to take my key from server , I took and I store this key as

localStorage.getItem("MapCode")

this locastorage gives

"https://maps.googleapis.com/maps/api/js?key=AIzaSyBHJxzPHD_egYnhxntqcvfem35YRjruzAg&callback=initMap"

so I want to write this to src but I couldn't do it.

<script async defer

            src=localStorage.getItem("MapCode")>
    </script>

How can I solve this?Thanks in advance

xomena · Accepted Answer · 2019-09-21 15:20:41Z

5

You can load Google Maps JavaScript API dynamically. For this purpose you can create the following code:

function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = localStorage.getItem("MapCode");
    document.body.appendChild(script);
}

window.onload = loadScript;

Please look at the sample code http://jsbin.com/carobun/edit?html,output

code snippet:

var map;

function initialize() {
    var c = new google.maps.LatLng(54.8867537,-1.557352);
    var mapOptions = {
        zoom:7,
        center: c
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
 
function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3' +
        '&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initialize';
    document.body.appendChild(script);
}

window.onload = loadScript;

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="map-canvas"></div>

edited Sep 21, 2019 at 15:20

answered Jun 9, 2016 at 20:13

xomena

32.3k6 gold badges97 silver badges125 bronze badges

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

1 Comment

C RICH Over a year ago

I do not see any mention of the async and defer keywords the solution. Are these accounted for in any way or are they assumed to not be important in the answer? Asking to learn. Thank you!

Collectives™ on Stack Overflow

Google Map javascript api key

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related