unknownprogrammer unknownprogrammer - 1 month ago 20
CSS Question

loading javascript in a div on <a tag click

i am practicing on java script,

i have 3 "a" tags and one div in my page.I want to load different java script file(which is for loading google map) in div on each "a" click,
this is my html page

<body>
<li><a href="#" >india</a></li>
<li><a href="#" >bangladesh</a></li>
<li><a href="#" >UAE</a></li>


<div id="loader"></div>




how can i load different javascript on each "a" click without page refresh

Answer

Hello Try the below code Hope you are looking for this

    jQuery(document).ready(function() {
    jQuery(document).on("click", ".button", function(e) {
    e.preventDefault();
    var latLng = jQuery(this).attr("data-latLng");          
    initialize(latLng);
    });

    function initialize(latLng) {
    latLng = latLng.split(",")
    var mapOptions = {
        center: new google.maps.LatLng(latLng[0],latLng[1]),
        zoom: 8
     };
    var map = new google.maps.Map(document.getElementById("map- 
    canvas"),  mapOptions);
     }
     });    

and the html

<a href="#" class="button" data-latLng="20.593684,78.962880">India</a>
<a href="#" class="button" data-latLng="23.684994,   
90.356331">Bangladesh</a>
<a href="#" class="button" data-latLng="23.424076,53.847818">UAE</a>

see the below Fiddle below For Details

Div map Load Fiddle