On home page of my site there is google map embedded. Size of google maps is 55mb because there are 100 markers on it and every marker have image in it(in info window).
I am using following to embed it in site
<iframe width="1070" height="460" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps/ms?msa=0&msid=211583848080531580036.0004e201d8a2ad13f0895&hl=en&ie=UTF8&t=m&ll=12.993442,79.125969&spn=22.947419,49.509262&output=embed"></iframe><br />
I do not want to load content of all marker at once.
I have done this in one of joomla site using this code in custom html article(of Joomla)
{mosmap msid='211583848080531580036.0004c74a22231f20dfa00'|lat='19.997023 '|lon='73.790102'|width='900'|height='650'|zoom='12'}
How to use above code in site which is not on Joomla CMS.
Or
Is there other way to load google map without loading its markers content at once(on page load)?
Are you just using an iFrame with a link to google maps in your website? If so you're going about it completely the wrong way. Quite apart from using the evil iFrame (I don't like them at all, if you hadn't guessed ;) ), you have no control over the map whatsoever - the script on the website you're linking to controls the map, you're simply displaying their map to the user.
Try looking at this to see how you can have your own map on your website which you control with your script.
Of course, it's entirely possible that I've misunderstood your question. If so, please let me know and I'll try to help!
Related
I am desperatly trying to put online a map I created through a Javascript code on a html page (I'm not a professional developper, and I am particulary ignorant in javascript). As long as I keep the html file local, everything runs ok, but as soon as I put it online, the map won't show, and I got a message concerning the missing key.
So I got a key, but my problem is to find how it works. My map is generated by the following instruction :
map = new google.maps.Map(document.getElementById("map"), options);
I tried to add this script :
script src="https://maps.googleapis.com/maps/api/js?key=#####&callback=initMap" async defer
But all that happens is several more errors, and no map visible.
Could anyone help me ? Thanks in advance
Instead, you should use an iframe that you get on the google maps site. Example:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100994.00356082054!2d-121.9805740058651!3d37.71820818113972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fe65cd6892231%3A0x3b327c848ef64057!2sDublin%2C+CA+94568!5e0!3m2!1sen!2sus!4v1480970198759" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Go to credentials page in google developer console then at the top you will see Domain Verification tab click on that tab, then click on the button Add domain in order to add the domain from where your site is being loaded.
If you do this you will not need API key. Thanks to this Google can track your requests.
Important Note
I'm not sure whether this will be the case for you but please note that once you will add a verified domain make sure that the previously generated your key is not being used for the Google Map's web services like APIs otherwise that APIs will return error after adding domain.
I have been trying to do this for a while with no result, can anyone tell me a way to hide the address bar on a this google maps iFrame?
I have tried to hide it in our css using display:none; and this works when I inspect the element and change it there but whenever I add it into our css it just isn't having it!
<iframe src="https://www.google.com/maps/d/embed?mid=1bJn0zvKIJibY51hlco4ZbOBGek4" width="640" height="480"></iframe>
this is the class for it, and when I change this here it works and no address bar is there but changing it in our style sheet wont change it.
we are using wordpress if thats and consolation.
Due to some policy crap you can't change the CSS of an iframe which domain isn't the same as your website is... But try integrate the Google map with JavaScript.
Here's the Google reference: https://developers.google.com/maps/documentation/javascript/adding-a-google-map
Good luck :)
Its look weird but i am not getting where is the documentation of google docs viewer to embed in my website. https://docs.google.com/viewer here is link where I can only generate links. Actually i want to increase or remove the timeout check because i cant view files with big sizes. Here is what i am doing right now
<iframe id="iframe1" src="www.urltopdf.pdf&embedded=true"width="1000" height="800" ></iframe>
and with big files getting following error.
Sorry, it took too long to find the document at the original source. Please try again later.
You can also try to download the original document by clicking here.
Here is a page with a form that generate a link to the document viewer : https://docs.google.com/gview
[EDIT] Google may have deprecated this functionnality.
In this page, there is a very minimal documentation that you may already have seen, but I didn't find any other documentation about it, and the search "gview" gave 0 result in developers.google.com.
There are also other similar issues about Joomla or Wordpress plugins using this viewer.
As an alternative to this viewer, if you host these files in Google Drive, you can use the google drive's built-in preview functionnality :
<iframe src="https://docs.google.com/file/d/fileID/preview" width="640" height="480"></iframe>
You can easily access to this from any previewed document from Google Drive by clicking on ⋮ then integrate element.
I have a website where I create a dynamic SVG using D3.
I'd like users websites to be able to use my SVG through an API. My website takes an input from the user, and the svg is drawn when this is submitted.
What I want to show on other websites when a certain link(?) is called, is to create the SVG and have them be able to view it on their website.
What are any possible ways to achieve this?
You can provide a page suitable to be embeded in the target page. For instance, if your svg is 640x480 and the page has no other elements, the svg element can be shown in the external page using embed:
<embed type="text/html" src="http://yoursite.com/embed_url"
width="640" height="480">
Note that this is not an API, it's just a portion of your page being displayed in the other page. Regards,
Is it possible to embed google map with custom markers to a website just by iframe? I have google map on my website with markers and everything is working with some functions in javascript. It's okay but now I want to enable some users to add same map with same markers to their website. I want to do it very easy and with less code possible. So I want to give code to users that they add to site and everything would work. Is it possible with just iframe tag? Or I must give users code in javascript too? Or is there another way? Thanks
You may use Mapsengine to create the map, they may easily be shared via iframe. But there is no option to apply custom script-code.
Another approach: use a script-file that contains the code used with the map and that also creates the map. The users may embed this script instead of an iframe, the sharing would be as simple as when you would use an iframe.