嵌入谷歌地图改变网站字体

Question

我正在创建一个联系页面，在该页面上我想要一张指向我所在位置的地图。看这里！

问题是，一旦我嵌入了地图，页面上的字体就会发生变化（通过浏览该域的其他页面来亲自查看）。嵌入有 2 个部分

：头部标签之间的代码

<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>

身体标签之间的代码

 <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>

通过添加和删除代码，我发现第二部分中的脚本导致了问题。但是，我不知道如何纠正这个问题，并使页面以漂亮、整洁的字体显示，就像其他人一样。

Answer 1

在您的页面中，您使用 Webfont “Roboto”，它将从以下位置加载：

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

maps-API 也加载这个字体，但有不同的设置：

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

...这将扩展@font-face从第一个样式表加载的 。

对于独特的布局，您有以下选项：

• 在页面中使用另一种字体
• 使用与 maps-API 相同的样式表来加载字体
• 删除已由 maps-API 加载的样式表：

  //在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"]');
    如果（字体）{
      font.parentNode.removeChild(font);
    }
  });

演示：

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

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

//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);
  }
});