google maps remove interactions with unneeded elements - google-maps-api-3

I am working on application which uses google maps.
When I zoom the map closer, a lot of useless (for the purpose of my app) appears. Here is the example:.
Not only I do not need any of the Casa Salvador, Liquid, Valeria Peluqueros things, they are also interactive (the mouse is changing on hover, you can click and popup appears).
I thought that I can easily disable them through google maps options, where I can disable default user interface and a lot of other things, but I failed to find any option related to my needs.
Does anyone have an idea how to:
completely remove the elements I listed
make them visible but not interactive

I have been going through the same problem.
1. To remove them you have apply custom styles to your map.
var styleArray = [
{
featureType: "poi.business",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: styleArray});
This will remove all the business labels. For more help:
https://developers.google.com/maps/documentation/javascript/styling#creating_a_styledmaptype
exactly your answer I guess: http://jsfiddle.net/mrak/dHWVM/
Regards
Suyash

Related

When I use the JavaScript On Screen Menu example, the button of OnScreenMenuButtonType doesn't show the icon

I don't know why, the example in the document can display the icon, but the one I wrote does not display
enter image description here
this.SpecChart.addOnScreenMenu(
[
[
// Default buttons
OnScreenMenuButtonType.ZoomInX,
OnScreenMenuButtonType.ZoomOutX,
OnScreenMenuButtonType.ZoomInY,
OnScreenMenuButtonType.ZoomOutY,
OnScreenMenuButtonType.ZoomToFit,
OnScreenMenuButtonType.ToggleAnimations,
// cusrom button
{
dimensions: { rows: 1, columns: 1 },
label: "Show Heatmap",
opacity: "1",
color: "blue",
shape: OnScreenMenuButtonShape.RoundedRectangle,
action: this.show,
},
],
],
OnScreenMenuButtonShape.RoundedRectangle
);
Probably this is caused by LightningChart not having access to its resources folder. The OnScreenMenu pictures are distributed in a resources folder along with the library, but the library itself doesn't know where it is located.
Here's a link to the related item in API documentation to learn more: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/interfaces/lightningchartoptions.html#resourcesbaseurl
A quick and dirty fix you can try is the following code snippet which tells LightningChart to look for the resources folder from a CDN service - this is super slow and I would not advise to do this in any long term solution.
const chart = lightningChart({
resourcesBaseUrl: "https://cdn.jsdelivr.net/npm/#arction/lcjs#3.4.0/dist/resources",
}).ChartXY();
// ... add OnScreenMenu inside the chart ...
For a long term solution, you'll have to download the resources folder to your project, setup a file server and supply the URL to the file server with resourcesBaseUrl option.
You have set: this.show. Is it not just show. And by the way. Where is your icon property by custom button?
The last one is a custom button. My question is that the first few yellow buttons do not display icons.I know custom button can set icon url
as you can see in the image

How do I change markdown heading color by heading level in VS Code editor?

My question is similar to this one but the answer given there is for Vim and I need one for VS Code. I'm a real newbie, and I tried to solve this myself, but these attempts failed me:
Markdown Preview GitHub Styling - Says it allows user-defined custom css, but it styles html preview, not the text in the editor
Markdown Theme Kit - Points to custom .css files, but the included ones don't tell me how to do it differently for different heading levels
Markdown Header Coloring - Claims to do exactly this, but when I try to put in user-defined css to give each heading level a different color, I still get color changes between headings of the same level, even after closing/restarting VS Code.
Help is very appreciated.
There is a built-in way to style text, including Markdown headings, in the editor without an extension, using VSCode's Colour Theme settings:
Open your settings.json (~/.config/Code/User/settings.json) or Ctrl+p "settings", and between the top-level {} insert for example:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#9cecfb",
"fontStyle": "bold",
}
},
{
"scope": "heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#83a4d4",
}
}
]
}
I faced the same issue and find a way with the VSCode extension "Markdown header coloring"
Basically you have to
install the extension
set some custom settings in settings.json. You can find examples of custom settings in the section "User defined header coloring"
do not forget to reload the window after each modification: open Command Palette → type Reload window
Cheers

Anonymous script firing with each pageload gtm.js and seems like a hack

I seem to be experiencing an issue where a random third party script keeps executing with each pageload on my site. I have a lot of pageview and event tracking in place and all of that is managed via GTM.
Script --
setTimeout(function(){var a=document.createElement("script"),b=document.getElementsByTagName("script")[0];a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0017/9988.js?"+Math.floor((new Date).getTime()/36E5);a.async=!0;a.type="text/javascript";b.parentNode.insertBefore(a,b)},1);
The above third party script is injecting an empty document inside the header tag. The body and the header of the doc is completely empty.The query parameter in the injected doc keeps changing.
Has anyone else has experienced this issue in the past? Any ideas what this could be?
I also have a lot of customjs variables in GTM - I wanted to see if I could search for this piece of code in one of the custom js variables - anyone knows if there is an easy way to search through all variables without going into each one at a time?
Any help is greatly appreciated.
You can Export your container as JSON file:
In Google Tag Manager, navigate to the desired container.
In the top navigation, go to Admin and then Export Container.
Select the desired container version from the selector.
Preview and confirm your export file and click Download.
(link to source: https://support.google.com/tagmanager/answer/6106997?hl=en)
Once you donwlaod the JSON file open it in any text editor and search for the code, or simply search just for the specific domain in the tag e.g. "dnn506yrbagrg.cloudfront.net". The name name of the Tag or Variable will appear in the corresponding object.
For example you should see something like this (if the code is in html tag):
...
"tag": [
{
"accountId": "001",
"containerId": "123",
"tagId": "3",
"name": "THIS IS THE NAME OF YOUR TAG",
"type": "html",
"parameter": [
{
"type": "TEMPLATE",
"key": "html",
"value": "setTimeout(function(){var a=document.createElement("script"),b=document.getElementsByTagName("script")[0];a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0017/9988.js?"+Math.floor((new Date).getTime()/36E5);a.async=!0;a.type="text/javascript";b.parentNode.insertBefore(a,b)},1);"
},
...
According to this documentation this seems to be the tracking code for Crazy Egg (heat maps and scroll maps) - the cloudfront URL matches. The parameter keeps changing because it's a random number generated by javascript to prevent caching.
This is obviously not part of GTM. Either you have configured this yourself in GTM or somewhere in your website, or you include a marketing tag (via custom HTML) that load Crazy Egg (which without a contract and a data processing agreement would be unethical and in many jurisdictions illegal).

Creating Custom User CSS

I am trying to create custom user CSS for someone to use, that will remove all the extra stuff on a website they are viewing, except the body content. I figured I could use chromes inspect to get the sites CSS code, then edit it and use a custom user css extension on chrome to implement it. However the site has over 7000 lines of code in their CSS and I am still very new to CSS. Is there any simple way to make this work without having to go through 7000 lines of code?
Here is just a quick, bare-minimum, "prove of concept"-type starter of how you can achieve what you want using Firefox browser, just to get you going.
Create two files: manifest.json and RemoveStuff.js.
Put this inside manifest.json
{
"manifest_version": 2,
"name": "RemoveStuff",
"version": "1.0",
"content_scripts": [
{
"matches": ["*://*.google.com/*"],
"js": ["RemoveStuff.js"]
}
]
}
and put this inside RemoveStuff.js
document.getElementById("lga").outerHTML='';
Now using Firefox browser navigate to about:debugging, click Load Temporary Add-on and select RemoveStuff.js. Now go to google and you shouldn't see google's logo (or whatever picture/animation they have there).
You can start learning about Firefox extensions here, or Chrome here

hide local listings from google maps api

When using google maps api to display something google has started adding local restaurants/hotels into the map.
How can I hide them from appearing. I checked the same locations on sites that use maps (like yelp) and they successfully hide the local hotels/restaurants.
I've been looking for layers/overlays but can't figure out how I remove this default behavior.
example
These things are appearing on my maps. is it possible to hide these bubbles and names?
edit
https://developers.google.com/maps/documentation/javascript/releases#36
says that 3.6 introduces business icons on by default. So setting v=3.5 as a parameter will hide the "Business icons".
bounty
Is there a way of hiding the business messages without sticking with an older version of the api?
you can set them invisible by setting the map style properly. See
http://code.google.com/apis/maps/documentation/javascript/styling.html
and
http://code.google.com/intl/pl/apis/maps/documentation/javascript/reference.html#MapTypeStyleFeatureType
sth like that should do the trick (though not tested):
var noPoi = [
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: noPoi});

Resources