All geek questions in one place

Google Maps visual update - how to disable Roboto font in InfoWindow

Just try the new google.maps.visualRefresh = true option in the new version 3.12 of the javascript google maps API. Although the new look of the map is great, now the text in my InfoWindows uses Roboto's font size.

New InfoWindow Content CSS:

 font-family: Roboto, Arial, sans-serif; font-size: 13px; font-weight: 300;

This was not the case, and it does not work with the design of my site. Any idea how I can remove it to use the default font that defines in my body ?

+4
source share
4 answers

You can use your own font in InfoWindow. Just provide HTML content instead of plain text, and you can style it in any way using the built-in CSS or stylesheet. An example in this fiddle :

 var infowindow = new google.maps.InfoWindow({ map: map, position: center, content: '<div class="myinfo">Computer History!</div>' });

using this CSS:

 .myinfo { font-family:Georgia,serif; font-size:18px; }
+7
source

Use HTML content and configure it as suggested in this answer .

However, you need a CSS rule with higher specificity. See fiddle (forked from Michael Gearys fiddle ):

 #mapbox .myinfo { font-family:Georgia,serif; font-size:18px; }
+1
source

If you are quite lazy, like me, you can not specify Google, increasing them. Just redefine your own vile style applied to your body definition.

~ I use SASS in the example, but you can roll your own CSS vanilla by discarding def to root and sticking to "on the body". here and there ~

 html, body { font-family: Helvetica, Arial, sans-serif; # steal/borrow their own styles to be used against them. # in this example I have set the font to 'comical' size. .gm-style div, .gm-style span, .gm-style label, .gm-style a { font-family:Helvetica,Arial,sans-serif;font-size:200px;font-weight:2000}.gm-style div, .gm-style span, .gm-style label{text-decoration:none}.gm-style a, .gm-style label{display:inline}.gm-style div{display:block}.gm-style img{border:0;padding:0;margin:0} }

This approach approaches fragility, but it will definitely fix your elusive quickedy splix fonts. This answer is probably not worth mentioning as anything more than hackshop 3.1.

+1
source

When using your'e maps with javascript, you can solve this with a javascript listener. Paste this snippet into the <script> tags somewhere before the output of the html MAP file in the source code (for example, in the <head> section, like me):

 var head = document.getElementsByTagName('head')[0]; var insertBefore = head.insertBefore; head.insertBefore = function (newElement, referenceElement){ if(newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) { console.info('Prevented Roboto font from loading!'); return; } // intercept style elements for modern browsers if(newElement.tagName.toLowerCase() === 'style' && newElement.innerHTML.indexOf('.gm-style') > -1){ console.info('Prevented .gm-style from loading!'); return; } insertBefore.call(head, newElement, referenceElement); };

It will not “bite” all dynamically loaded calls into the header, since the Google methods used in different view updates are different. This applies only to the head.insertBefore method.

/ Only in modern browsers, like 2017, not ie8 (but with mods it will be). It works for our cases , but I do not know if this method supports other material.

0
source

Source: https://habr.com/ru/post/1481421/

More articles:


All Articles