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.
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 am using Google Forms, get an and then I embed into my website code,
I want to custom the form's background, make it transparent.
I am using JQuery,It can read the object create by iframe from google, but if I want to change its class 'ss-form-container's css, it failed.
Can someone show me how to apply CSS to google docs's iframe?
Here is the Link to my test website: http://dive.maxinrui.com/ The questionary is on third slide.
Thanks in advanced!
You can't. Frames are not allowed to interact with each other unless they have the same origin. Since the origin of the Google Docs frame is docs.google.com while your page's main frame is on dive.maxinrui.com, you cannot "touch" the contents of the frame, so there is no way for you to apply your CSS to it.
You can apply some styling to a Google Docs form by applying a theme to it in Docs. If you need more control than that, though, you will need to find another solution.
This would be a workaround solution (if it works).
Would it be viable to copy the form source code from the Google Docs page in the iframe, embed it into your own page, then modify the CSS?
I am creating a jQuery plugin which requires another external library (Google Maps in particular).
I would rather not have to add the Google maps script (i.e. <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>) to my head section, but have the plugin do so. However, if for what ever reason the page already has the google maps JS on it, I don't want the plugin to duplicate it.
Possible? If so, how? Thanks
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!
I would like to know to show a google map in a lightbox when a user clicks on an image. For Example:-
<img src="map_icon.png" alt="hover over image to show corresponding map" onclick="run_map_function();" />
I would really like to know how to do this. Any help will be much appreciated! Thankyou.
I am not quite sure if it possible to use a lightbox plugin, but try the JqueryUi dialog instead, it's easy to use and can be set in seconds
Take a look at my fiddle
http://jsfiddle.net/theodore/trnZS/49/
Does the map need to be interactive? if not, you should look at using the static maps api:
https://developers.google.com/maps/documentation/staticmaps/
Basically, you can use the static maps api to generate an image of the location you want to view, like here: http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false
If you need an interactive map, then I suggest using an iFrame (which would mean creating a separate page for the map). You should easily be able to show an iframe from your lightbox.