Question

i have a div which i fill dynamically with the .load() method.
I have a function to display a google map in this div on a click of a link in my menu.

function ShowGmap() {
  var myLatlng = new google.maps.LatLng(41.905, 12.710);
    var mapOptions = {
      center: myLatlng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mb"),
        mapOptions);
    var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title:"----"

mb is the ID of the div I fill everytime. What i want is that each button on my menu will fill this div with different content.
The problem is: when I click on a second button to change the content of that div, the map flash( sometimes it keep beeing drawed on the div like a background ) for a second. I am not sure if this is a cache problem.
This is the code for the click action on the home button

$("#bt_home").click(function(){
    event.preventDefault();
    click_btdove=false; //this make the button clickable only once
     $("#mb").removeAttr('style');
     $('#mb').load('main_page.html #home');

the removeAttr is needed because the div has a grey background after the loading of the map (checked with ‘inspect element’ on chrome.

Thanks for the help.

edit:
this is a pic of what i mean: img of the problem

edit #2 this is my project: check out what happened when u click on ” dove siamo ” button

Answer 1

try with this one:

 $("#bt_home").click(function(event){
     event.preventDefault();
     click_btdove=false; //this make the button clickable only once
     $("#mb").css({"background":"none"}); // <-----add this to remove the background color
     $('#mb').load('main_page.html #home');
 });

As i see your code tries to prevent the default behavior of the link but you have not passed that in the function.

see this if helps.