unknownprogrammer unknownprogrammer - 6 months ago 52
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

<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


Hello Try the below code Hope you are looking for this

    jQuery(document).ready(function() {
    jQuery(document).on("click", ".button", function(e) {
    var latLng = jQuery(this).attr("data-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,   
<a href="#" class="button" data-latLng="23.424076,53.847818">UAE</a>

see the below Fiddle below For Details

Div map Load Fiddle