CODEWITHSUNDEEP
javascriptgoogle-geocoder
james
james

Reputation: 307

How to dynamically change the script src?

I'm trying to dynamically change the region depends on what I select in a dropdown field.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?region=DK"></script>

Can someone help me figure this out?

Upvotes: 7

Views: 25955

Answers (4)

Amit
Amit

Reputation: 61

You can use below code:

    <script id="map1" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?region=DK"></script>

const scriptTag = document.getElementById('map1');
const value="newvalue";
    if (scriptTag) {
        const newScript = document.createElement('script');
        [...scriptTag.attributes].forEach(attr => {
            newScript.setAttribute(attr.name, attr.value);
        });
        newScript.src = "https://maps.googleapis.com/maps/api/js?region=" + value;
        // Remove the old script and append the new one
        const parent = scriptTag.parentNode;
        parent.removeChild(scriptTag);
        parent.appendChild(newScript);
    }

Upvotes: 0

henrik
henrik

Reputation: 1618

You can load JavaScript dynamically after page has loaded, but remember: once you've loaded it, you can't unload JavaScript in an active page. It is stored in the browsers memory pool. You can reload a page, which will clear the active scripts, and start over. Alternatively you could override the functions that you've got set.

With this said. Here's how to change the script after page load with javascript:

<select onChange="changeRegion(this.value);">
    <option value="-">Select region</option>
    <option value="SE">Sweden</option>
    <option value="DK">Denmark</option>
</select>

<div id="output">
    <script id="map" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?region=DK"></script>
</div>

<script type="text/javascript">
function changeRegion(value)
{
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://maps.googleapis.com/maps/api/js?region=" + value;
    s.innerHTML = null;
    s.id = "map";
    document.getElementById("output").innerHTML = "";
    document.getElementById("output").appendChild(s);
}
</script>

Upvotes: 6

Ted Nyberg
Ted Nyberg

Reputation: 7401

You should avoid loading the Google Maps API more than once. If possible you should consider leaving out that script tag and instead add it through JavaScript once the dropdown (region) selection has been made.

EDIT:

Let's say you have a dropdown like this:

<select id="regionSelector" onchange="loadGoogleMaps()">
  <option value="">Select region to use Google Maps:</option>
  <option value="DK">Denmark</option>
  <option value="SE">Sweden</option>
</select>

Adding the script would be something like:

function loadGoogleMaps() { 

    var selectedRegion = document.getElementById("regionSelector").value;

    if(selectedRegion === '') {
       return;
    }

    var head= document.getElementsByTagName('head')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= 'https://maps.googleapis.com/maps/api/js?region=' + selectedRegion;
    head.appendChild(script);
}

More info on async loading of the Google Maps API: https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

Upvotes: 1

Deenadhayalan Manoharan
Deenadhayalan Manoharan

Reputation: 5444

Try this..

<html>
 <head>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
 </head>
 <body>
  <h1>Google Maps Autocomplete Search Sample</h1>
  <div align="left">
   <input type="text" value="" id="searchbox" style=" width:800px;height:30px; font-size:15px;">
  </div>
  <div align="left" id="map" style="width:800px; height: 600px; margin-top: 10px;">

  </div>

 </body>
</html>
<script type="text/javascript">
 $(document).ready(function(){

  var mapOptions = {
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       center: new google.maps.LatLng(41.06000,28.98700)
     };

  var map = new google.maps.Map(document.getElementById("map"),mapOptions);

  var geocoder = new google.maps.Geocoder();  

     $(function() {
         $("#searchbox").autocomplete({

           source: function(request, response) {

          if (geocoder == null){
           geocoder = new google.maps.Geocoder();
          }
             geocoder.geocode( {'address': request.term }, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {

                  var searchLoc = results[0].geometry.location;
               var lat = results[0].geometry.location.lat();
                  var lng = results[0].geometry.location.lng();
                  var latlng = new google.maps.LatLng(lat, lng);
                  var bounds = results[0].geometry.bounds;

                  geocoder.geocode({'latLng': latlng}, function(results1, status1) {
                      if (status1 == google.maps.GeocoderStatus.OK) {
                        if (results1[1]) {
                         response($.map(results1, function(loc) {
                        return {
                            label  : loc.formatted_address,
                            value  : loc.formatted_address,
                            bounds   : loc.geometry.bounds
                          }
                        }));
                        }
                      }
                    });
            }
              });
           },
           select: function(event,ui){
      var pos = ui.item.position;
      var lct = ui.item.locType;
      var bounds = ui.item.bounds;

      if (bounds){
       map.fitBounds(bounds);
      }
           }
         });
     });   
 });
</script>

Upvotes: 0

Related Questions