I am using jspdf to convert a html page to pdf. My page has a google map displayed on it.
I am confused as to how to display that map on the pdf. Can anybody help?
Thanks
Try using the new addHTML() function.
This function will canvas the HTML DOM (In your case a DIV) and convert it to an Image using anopther library called html2canvas and add that image (in you case the Google Map) to your PDF.
Example codes are available in GitHub.
Or alternatively you can attach an image of your Google map (if it points out a stable place) to your PDF.
Related
I am trying to import the json file to Google maps from mapbox studio but nothing changes, the colors are not changing at all. Do you know if I did something wrong?
Part 1 : Getting the .json file
If you go to mapbox, you can customize the style of you map in the studio.
Once it's done, you can click on the "share" button on top right corner of the page.
This open a modal, on this modal, on the left column, you have 5 tabs under Developer Resources.
With the Web tab selected (doesn't matter), you can download a .zip file, which contains a json file.
This is the styling code for the map.
Part 2 : Trying to set this style to a google map
On the Google Maps Platform, on the left side menu, the last link of the list is Map Styles.
When you click on this link, you can create a new map style.
And then you can choose To create your own style with google maps, or Import Json.
So I clicked on import json, and paste the whole json file inside, but the map preview don't look like my custom map.
Maybe mapbox and google maps json styling file are not compatible?
Maybe I do something wrong.
If you would have checked the JSON style specification from Google Maps and the JSON style specification from Mapbox you would have seen they have only in common the word JSON, so the answer is NO, each one have their own definition for styling their maps.
i am an Brasilian Web Developer, and i am making an report of phone calls geolocation in an virtual PABX ( asterisk ), already working fine with google maps API V3.
OBJECTIVE Export this report into a PDF or Excel, so i am thinking in turn the map into a image, to export after:
What i already try:
Create a Static Map dont solve my problem because i have a marker for each calls, and i am clustering markers with MarkerClusterer
I converted my map in Canvas using html2canvas, after my html turned in canvas i used canvas2image to create an <img> element, for simple html this solution works perfect, but in case of google maps the result is that:
Unfortunately i cannot post images because i have no reputation, i always visit StackOverflow but its my first time making a question, but i can describe that the image generated from the canvas have just the gray google maps background and the number of markers of the markerclusterer.
You can see the image here to understand better:
I am thinking in something like take a screenshot of the page and crop to just pick map region, but any sugestions that can solve the problem or give me a way will be very welcome.
Is there a way to center the pop up window (info window) on a google map iFrame to make sure that it does not get cut off?
WOuld it be easier for me to use the Google Map API instead of iFrame? If so, is there an API call that would give me the same information by default on a the infoWIndow?
Note: I have tried using Google Map API and I prefer this over using iFrame. The only downside is that I do not get the extra information that comes with using google map iFrame. It looks like I need to populate this window with HTML by myself.
Btw here's a good example of how to create a custom InfoWindow.
https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
You can use any html such as custom headers, divs and links
And here's the Placed API with Google Maps:
https://developers.google.com/maps/documentation/javascript/places
i'm parsing some html data which has google maps embedded (displaying just one certain point) and i was wondering:
how can i find out the exact geographic coordinates of that point?
thx
I will look into this further but if you are able to see the Google Maps representation, you can type this into your browser and it will pinpoint the exact center location:
javascript:void(prompt('',gApplication.getMap().getCenter()));
Very useful if you want to get quick lat/long values. Is this the kind of info you need?
Parsing HTML files and want to find what point map is displaying?
This is likely not be possible (correct me if I am wrong). The map is a JavaScript object that only exists inside a browser - it is only text code in the html file. Map variables and data only exist inside the JavaScript engine running inside the browser, their dynamic variable state cannot be stored in a file ahead of time.
If the site is displaying a static map image then we have a different story. Just parse the URL to google static maps requesting the map image.
i found out that the actual coordinates were stored in the html :)
Have you tried the LatLng Marker lab in google map?
how does google maps render the map etc, is it flash a java appelet?
A bit more detail, google maps uses a big div element to contain several img elements. each of those img elements is 256 pixels square, and is positioned on a regular grid. from there, the google maps javascript program calculates which grid images should be loaded into each img tag and uses regular dom manipulation to position each img in the right place. Only the tiles of the map that would be visible inside the div are loaded. when you scroll off the side, the javascript library unloads the image, and loads new ones as needed. Other elements, like the zoom controls, markers, and lines, are stacked or drawn on top of that as needed.
It's all HTML and Javascript, plus a lot of video trucks, satellites (and airplanes?), and google magic.. More information:
How does Google Maps work?
No, it is all based on JavaScript and AJAX.
To oversimply... A small script tag is embedded in the HTML which points to a big .js file over at Google. This contains a whole lot of JavaScript that builds the "map box", downloads the map images, and does things when you move your mouse around and click on stuff.
Google Maps is done via fancy JavaScript if I'm not mistaken. If you don't already have it, install Firebug in Firefox and "Inspect" the map at Google Maps, and you'll see that it's a bunch of images together, with JavaScript to provide the functionality.
It is neither flash nor a java applet. It is simply HTML, CSS and images with a great deal of javascript to drive the interactive elements.
Please see the Google Maps API for instructions and examples on how to create and integrate the google maps widget.
http://code.google.com/apis/maps/