When I am printing google map; it does not print icons; how can I print complete google map
I am using google maps api v3 for javascript
There are several other questions addressing this issue:
How to print Google Map markers
The short, the Google Maps Javascript API doesn't print overlays (markers, lines) correctly or at all. You can use the Google Maps Static API, but you will be limited to the amount of overlays you draw on the map. This is, however, the best way to get a reliable print.
The long, the markers have the class 'gmnoprint', which disables them from showing up on the printed rendering. You can iterate through the markers and remove this class, which should allow them to be printed on the page. As far as I know, this will not work for the direction lines.
many days trying print the icons and routes, so finally i did it!!!!!!!!
i found a js script that convert html to canvas and i thought that will be the solution but unfortunately it wasn't at all.
if found that, when i use it and says to the browser to print the page finally show it!!!! but the canvas again doesn't show the icons ¿...?
so i just executed the script at the on load and append the result canvas into a div behind the map (if you put display:none don't work!). sorry by my english :)
here a bit code:
<div id="imprimir">
<h1><?php echo $direccion;?></h1>
<div id="distancia"></div>
<div id="map-canvas" style="margin: 0;padding: 0; height: 550px;z-index:10"></div>
<div id="captura" style="position:absolute;top:100px;left:50px;"></div>
</div>
//------------ ...
Google Map code here
//------------ ...
<script>
html2canvas($("#imprimir"), {
onrendered: function(canvas) {
$("#captura").html(canvas);
}
});
</script>
well, i hope this help you!!!
$("#btnPrint").click(function () {
var contents = $("#map_canvas").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
Related
This seems to be the easiest thing to do, but it's just not working. In a normal browser the .html and .js files works perfectly, but in the Chrome/Firefox extension the onClick function is not performing what it's supposed to do.
.js file:
function hellYeah(text) {
document.getElementById("text-holder").innerHTML = text;
}
.html file:
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">
ha
</div>
<br />
<a onClick=hellYeah("xxx")>
hyhy
</a>
</body>
</html>
So basically once the user clicks "hyhy", "ha" should change into "xxx". And again - it works perfectly in the browser but does not work in the extension. Do you know why? Just in case I'm attaching the manifest.json below as well.
manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
Chrome Extensions don't allow you to have inline JavaScript (documentation).
The same goes for Firefox WebExtensions (documentation).
You are going to have to do something similar to this:
Assign an ID to the link (<a onClick=hellYeah("xxx")> becomes <a id="link">), and use addEventListener to bind the event. Put the following in your popup.js file:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
hellYeah('xxx');
});
});
popup.js should be loaded as a separate script file:
<script src="popup.js"></script>
Reason
This does not work, because Chrome forbids any kind of inline code in extensions via Content Security Policy.
Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).
How to detect
If this is indeed the problem, Chrome would produce the following error in the console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
To access a popup's JavaScript console (which is useful for debug in general), right-click your extension's button and select "Inspect popup" from the context menu.
More information on debugging a popup is available here.
How to fix
One needs to remove all inline JavaScript. There is a guide in Chrome documentation.
Suppose the original looks like:
<a onclick="handler()">Click this</a> <!-- Bad -->
One needs to remove the onclick attribute and give the element a unique id:
<a id="click-this">Click this</a> <!-- Fixed -->
And then attach the listener from a script (which must be in a .js file, suppose popup.js):
// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-this").addEventListener("click", handler);
});
// The handler also must go in a .js file
function handler() {
/* ... */
}
Note the wrapping in a DOMContentLoaded event. This ensures that the element exists at the time of execution. Now add the script tag, for instance in the <head> of the document:
<script src="popup.js"></script>
Alternative if you're using jQuery:
// jQuery
$(document).ready(function() {
$("#click-this").click(handler);
});
Relaxing the policy
Q: The error mentions ways to allow inline code. I don't want to / can't change my code, how do I enable inline scripts?
A: Despite what the error says, you cannot enable inline script:
There is no mechanism for relaxing the restriction against executing inline JavaScript. In particular, setting a script policy that includes 'unsafe-inline' will have no effect.
Update: Since Chrome 46, it's possible to whitelist specific inline code blocks:
As of Chrome 46, inline scripts can be whitelisted by specifying the base64-encoded hash of the source code in the policy. This hash must be prefixed by the used hash algorithm (sha256, sha384 or sha512). See Hash usage for <script> elements for an example.
However, I do not readily see a reason to use this, and it will not enable inline attributes like onclick="code".
I had the same problem, and didn´t want to rewrite the code, so I wrote a function to modify the code and create the inline declarated events:
function compile(qSel){
var matches = [];
var match = null;
var c = 0;
var html = $(qSel).html();
var pattern = /(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/mg;
while (match = pattern.exec(html)) {
var arr = [];
for (i in match) {
if (!isNaN(i)) {
arr.push(match[i]);
}
}
matches.push(arr);
}
var items_with_events = [];
var compiledHtml = html;
for ( var i in matches ){
var item_with_event = {
custom_id : "my_app_identifier_"+i,
code : matches[i][5],
on : matches[i][3],
};
items_with_events.push(item_with_event);
compiledHtml = compiledHtml.replace(/(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/m, "<$2 custom_id='"+item_with_event.custom_id+"' $7 $8");
}
$(qSel).html(compiledHtml);
for ( var i in items_with_events ){
$("[custom_id='"+items_with_events[i].custom_id+"']").bind(items_with_events[i].on, function(){
eval(items_with_events[i].code);
});
}
}
$(document).ready(function(){
compile('#content');
})
This should remove all inline events from the selected node, and recreate them with jquery instead.
I decide to publish my example that I used in my case. I tried to replace content in div using a script. My problem was that Chrome did not recognized / did not run that script.
In more detail What I wanted to do: To click on a link, and that link to "read" an external html file, that it will be loaded in a div section.
I found out that by placing the script before the DIV with ID that
was called, the script did not work.
If the script was in another DIV, also it does not work
The script must be coded using document.addEventListener('DOMContentLoaded', function() as it was told
<body>
<a id=id_page href ="#loving" onclick="load_services()"> loving </a>
<script>
// This script MUST BE under the "ID" that is calling
// Do not transfer it to a differ DIV than the caller "ID"
document.getElementById("id_page").addEventListener("click", function(){
document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; ></object>'; });
</script>
</body>
<div id="mainbody" class="main_body">
"here is loaded the external html file when the loving link will
be clicked. "
</div>
As already mentioned, Chrome Extensions don't allow to have inline JavaScript due to security reasons so you can try this workaround as well.
HTML file
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">ha</div><br />
<a class="clickableBtn">
hyhy
</a>
</body>
</html>
<!doctype html>
popup.js
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
var clickedEle = document.activeElement.id ;
var ele = document.getElementById(clickedEle);
alert(ele.text);
}
}
Or if you are having a Jquery file included then
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
alert($(target).text());
}
}
So far I have this:
<div class="map col-xs-12">
<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
<sebm-map-polygon [paths]="paths"></sebm-map-polygon>
</sebm-google-map>
</div>
It gives me a square polygon on the map. But the idea is to have a map with clickable countries (that is, each country click will trigger an event and return some data).
I just started using the sebm google map for Angular 2, but it seems like the documentation is somewhat lacking in specifics.
I'm new to Angular and unsure how to approach this. Would you recommend using the sebm-map-polygon with the geojson data for all of the countries?
Sorry I know this is a general question, but figure it could be valuable in the context of Angular 2.
Try using Visualization: GeoChart
A geochart is a map of a country, a continent, or a region with areas identified in one of three ways:
The region mode colors whole regions, such as countries, provinces, or states.
The markers mode uses circles to designate regions that are scaled according to a value that you specify.
The text mode labels the regions with identifiers (e.g., "Russia" or "Asia").
A geochart is rendered within the browser using SVG or VML. Note that the geochart is not scrollable or draggable, and it's a line drawing rather than a terrain map; if you want any of that, consider a map visualization instead.
Here is the sample code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
You could also check the following for code implementation:
Use GeoCharts in Angularjs
Google Chart Tools AngularJS Directive Module
JSBin
angular2-google-chart
Angular 2 google chart
Hope this helps.
So I have a small issue with a map, particularly map style, from Mapbox that a designer has created for me to work with.
I have an access to her account and I can view the map as soon as I go in to account -> styles. So my question is, how can i reference her design in order to build up on top of this my custom markers and etc?
I have tried downloading a json file to find an ID there but no luck. Also tried to copy the stuff from URI when you click on the style, still no ID's. If you need more explanation I can do my best to provide you with one.
So far my HTML looks like this.
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'token';
var map = L.mapbox.map('map', 'ciltdxqbt00jef7m0y99qpkt2')
.setView([40, -74.50], 9);
</script>
</body>
</html>
Actually I found a solution myself. The reason I could not understand why I can get an ID of a map that has been created in editor and not the one that has been created using Visual Studio.
Silly Silly me!
So the only difference is very very small, its just the way you reference it!
Let me explain :)
The map that has been created using editor you would normally do something like this:
L.mapbox.accessToken = 'accesstoken;
// map refers to a <div> element with the ID map
// mapbox.streets is the ID of a map on Mapbox.com
var map = L.mapbox.map('map', 'mapbox.streets');
Here I am referencing a map with an id streets from mapbox, you can get an id when you create your map in editor from url at the very end, for example https://www.mapbox.com/editor/?id=*username*.ph8b3e4a#saved
the ph8b3e4a would be an id. So to make a map you do something like this
L.mapbox.accessToken = 'accesstoken;
// map refers to a <div> element with the ID map
// mapbox.streets is the ID of a map on Mapbox.com
var map = L.mapbox.map('map', *username*.ph8b3e4a');
But if the map is created in Mapbox Studio, its done like this.
L.mapbox.accessToken = 'accesstoken;
var map = L.mapbox.map('map')
.setView([38.97416, -95.23252], 15);
L.mapbox.styleLayer('mapbox://styles/*username*/*style*').addTo(map);
this can be copied from right hand side of your styles directory.
I hope this is helpful for anyone who struggles like me :)
I want to handle ondrop event for Google Docs with Apps Script AddOn.
I can see that Google Docs provide drag and drop functionality by which we can easily drag images from images.google.com to google doc. I want to handle this drop event by AddOn that I am developing.
Tried finding some inbuilt way to handle drop event but google don't provide it as of now. I had tried lot of other ways like HTML5 DnD etc but as addon renders as an iframe, it is unable to access the doc html. window.parent don't help.
Any help will be appriciated
I didn't run into the same issues using the drag and drop API. It might have to do with making sure you set <base target="_top">. The script below was written in a google doc. Just drag an image from google images and it will display in the dialog box.
code.gs
function onOpen() {
var menu = DocumentApp.getUi().createMenu("Get Image");
menu.addItem("Open Dialog", "openDialog").addToUi();
}
function openDialog(){
var html = HtmlService.createHtmlOutputFromFile('index');
DocumentApp.getUi().showModelessDialog(html, "drag n drop")
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
span {
display: inline-block;
}
img {
width: 100%;
}
</style>
</head>
<body>
Drag Image Here<br>
<span><img id="img" heigth=></span>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).on('dragover', function(e) {e.preventDefault();return false;});
$(document).on('drop', function(e) {
e.preventDefault();
e.originalEvent.dataTransfer.items[0].getAsString(function(url){
var parser = document.createElement('a');
parser.href = url;
if(parser.hostname === "www.google.com"){
var src = parser.search.split("?")[1].split("&")[0].split("=")[1];
$("#img").attr("src",src);
}else{
alert("please select an image from google images")
}
});
});
</script>
</html>
I'm in the process of converting a chrome extension from manifest v1 to manifest v2.
I've extracted most of the javascript code from the html files and put it in separate .js files.
I've a problem with a div element in a popup.
The current code in popup.html is:
<div onclick="PopupClick('SHOW')" id="blue">Show</div>
Apparently onclick="" is not allowed in html since v2, but how to replace it,
so that the user can click on the div and a function is executed?
popup.html:
<script src="popup.js" type="text/javascript"></script>
<div id="blue">Show</div>
popup.js:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("blue").addEventListener('click',
clickHandler); });
function clickHandler(e) { PopupClick('SHOW'); }
function PopupClick(str) {
//Do your thing here
}
Like Rob W said, it's clear in http://developer.chrome.com/extensions/contentSecurityPolicy.html#H3-1
I actually faced this problem and this code help me move from manifest v1 to v2.
Maybe events? Include something like <script src="js/my_script.js"> in head of your popup.html and then paste code in that js file.
var blueDiv = document.getElementById("blue");
blueDiv.addEventListener("click", function(){
PopupClick("SHOW");
}, false);
Or some specifics of your app doesn't allow you to do this? Or i don't understand the problem.