Embedding Google Map changes website font

I'm creating a contact page, and on that page I would like to have a map that points to my location.

The problem is that, once I embed the map, the font on the page changes (see for yourself by navigating through other pages of this domain). The embedding has 2 parts to it:

CODE BETWEEN THE HEAD TAGS

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   <style>#gmap_canvas img{max-width:none!important;background:none!important}</style>

CODE BETWEEN THE BODY TAGS

 <div style="overflow:hidden;height:400px;width:450px;">
             <div id="gmap_canvas" style="height:400px;width:450px;"></div>
             </div>
<script type="text/javascript"> 
function init_map(){
    var myOptions = {
        zoom:11,
        center:new google.maps.LatLng(46.0475235,20.096552599999995),
        mapTypeId: google.maps.MapTypeId.TERRAIN};
        
    map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
    marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(46.0475235, 20.096552599999995)});
    infowindow = new google.maps.InfoWindow({
        content:"<b>MEGA d.o.o.</b><br/>Nenada Valceva 39<br/>23330 Novi Knezevac" });
        google.maps.event.addListener(marker, "click", 
        function(){infowindow.open(map,marker);
    })
   ;}
    
    google.maps.event.addDomListener(window, 'load', init_map);
  </script>

By adding and removing the code, I found out that the script in the second part causes the problem. However, I don't have any idea how to correct this, and make the page display in nice, neat font, like the rest of 'em.

Solution

In your page you use the Webfont "Roboto", which will be loaded from:

http://fonts.googleapis.com/css?family=Roboto:300&amp;subset=latin-ext

The maps-API also loads this font, but with different settings:

https://fonts.googleapis.com/css?family=Roboto:300,400,500,700

...which will extend the @font-face's loaded from the first stylesheet.

For a unique Layout you have these options:

use another font in your page
use the same stylesheet as the maps-API does to load the font

remove the stylesheet which has been loaded by the maps-API:

//add this after the creation of the google.maps.Map
google.maps.event.addListenerOnce(map,'idle',function(){
  var font=document.querySelector('link[href$="//fonts.googleapis.com/css?family=Roboto:300,400,500,700"]');
  if(font){
    font.parentNode.removeChild(font);
  }
});

Demo:

function initialize() {

        return new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: 0,
          center: new google.maps.LatLng(0, 0)
        });

      }

      google.maps.event.addDomListener(window, 'load', function() {

        var btn = document.getElementById('foo');
        btn.innerHTML = 'click here to load the map<br/>(observe the changes in the appereance of the text above )';
        google.maps.event.addDomListenerOnce(btn, 'click', function() {
          btn.innerHTML = 'loading map, please wait';
          var map = initialize();
          google.maps.event.addListenerOnce(map, 'idle', function() {
            btn.innerHTML = 'you may have noticed some changes in the appereance of the text above.<br/>' +
              'click again to remove the stylesheet loaded by the maps-API ';
            google.maps.event.addDomListenerOnce(btn, 'click', function() {
              var font = document.querySelector('link[href$="//fonts.googleapis.com/css?family=Roboto:300,400,500,700"]');
              if (font) {
                font.parentNode.removeChild(font);
                btn.innerHTML = 'the stylesheet has been removed,<br/> the text above should be displayed correctly again';
              } else {
                btn.innerHTML = 'the stylesheet can\'t be localized';
              }
            });
          });
        });
      });

body {
  text-align: center;
}
h1 {
  font-family: Roboto;
}

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300&amp;subset=latin-ext" />
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<h1>test-text</h1>
<button type="button" id="foo"></button>
<div id="map_canvas"></div>