Using google map inside iframe on my website - javascript

I would like to use google maps in my website via iframe, but how can i use this link https://www.google.fr/maps/#... in my iframe. My goal is to access and use all functions of google maps directly on my website. I mean, have access to menu and others options like in my screenshot ->

Interesting question that made me search to find out whether that feature you requested is part of the API. It's not, but they do have a workaround which utilizes Javascript and allows you to embed a search box with the autocomplete functionality. Personally I think that's even better because you can completely control the appearance of that search form.
Here's the link to the example code: https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
Edit: Just saw your comment. I guess this answer only addresses one issue then.

You can also put it in an popup. Look at this code:
<img src="images/pin-google.png" height="15" alt="googlemaps" title="View our address in Google Maps" />
The iframecode:
<iframe src="http//maps.google.com/maps?q=+London, +Downingstreet 10, +England" height="610" width="600"></iframe>

Related

website inside website - no redirection or leave the first site [duplicate]

I want to make a html page that act kind like google cache.
Say in my homepage HOME, I have a link A to a website B, and when I click on A, the page that comes out will display the content of another page, with a floating bar on top that has some functions of my own choices.
For example, I want my link to show google.com, but I also want to add a button(floating bar, anything) to that google.com that allows me to return to my own webpage when pressed.
Can someone provide me some useful resources for me too look at, or even better a solution template? :)
Thanks!
You could use an <iframe> in order to display an external webpage within your webpage.
Just place the url of the webpage that you want to display inside the quotes of the src attribute.
<iframe src="http://www.webpage.com" width="400" height="400"></iframe>
An iframe sounds like it may be what you need, but I'm not 100% sure after reading your description. The iframe will show content from another URL in your page. Once you have that all you need to do is style the page and use CSS/JavaScript to add in your functionality as described.
Check out this:
http://www.w3schools.com/tags/tag_iframe.asp
Either you use an iframe or you load the site via AJAX into a div (e.g. using jQuerys load() method).
Here's the general idea:
HTML:
Click Here
<iframe id="frame" src="http://www.w3schools.com" scrolling="yes"></iframe>
Some jQuery (not tested):
$(document).ready(function() {
$('#frame').hide();
$('#link').click(function () {
$('#frame').show();
})
})
Style it as necessary
Note - this answer in no way endorses w3schools.com :-) . Please see w3fools.com/
I found Kevin Gourney's answer to be most straight forward and helpful. I'm using this to work around Adobe Spark's Domain limitation and created a simple one liner index.html file and tweaked the code as follows:
<iframe src="PasteAdobeSparkPageLinkHere" width=100% height=100%></iframe>

Translate certain parts of the page only with Bing translator web widget

Our website is offered in 10 different languages with all static content already translated by external vendors. We have a requirement to translate certain parts of the page we do not have in advance.
The Translator Widget from Bing looks good except that it translates the whole page instead of only certain parts of the page. As a POC, I tried loading the translation API code in a hidden iframe, set the text to translate in a div element, and then called the Translate method and it worked. I was able to extract the translation and use it in my web page.
I would like to know if this kind of use is allowed or am I required to create an API account with BING or show some message somewhere in my page that a part of the content was translated by BING, since the translator widget is hidden inside the iframe?
Thanks in advance for helping me.
According to the documentation on MSDN for the Translate API of the widget, you can exclude elements from being translated by setting the custom attribute 'translate=no'
https://msdn.microsoft.com/en-us/library/dn341982.aspx

Custom share button with Google Plus API

I'm trying to create a custom designed share icon for Google Plus that sits in an app that will be inside an iframe. The share should allow for text and an image.
I cannot use meta tags as these would sit in the iFrames parent, of which already has it's own tags for it's own sharing utils.
Can this be done, and if so how?
Thanks in advance!
PS. Google plus documentation is so over complicated and sucks!
I didn't fully understand your setup but I guess this will work for you:
<a href="https://plus.google.com/share?url=YOUR_URL" onclick="window.open(this.href, 'Google+', 'width=490,height=530'); return false;">
<img src="IMAGE_PATH" alt="Google+" title="Google+"/>
</a>
It'll open a share window that you can enter your comment, and select the people that you want to share.

Are images loaded via JavaScript indexed by google?

I was wondering if images loaded via JavaScript on my website will be indexed by Google images?
thanks
Yes, Google can execute some JavaScript to find content but Google has limitations on what it can do, and what it can understand. The best practice remains the same: put the content you want Google to crawl and index in basic HTML. For example, use jQuery tabs to put the content on one file instead of AJAX tabs that spreads out the content across several files. In short, make it easy for Google to access your content.
I found a solution for me:
just made an Image Sitemaps.
" Image sitemap information helps Google discover images we might not otherwise find (such as images your site reaches with JavaScript code), and allows you to indicate to Google images on your site that you want Google to crawl and index."
https://support.google.com/webmasters/answer/178636
edit: it doesn't work. all images submitted via the sitemap are not indexed.

how to add custom javascript to google sites?

How do I get the ability to add/edit the JS on a google sites site? This way I want to use jQuery and jQuery UI to manipulate the look and feel of the site.
To be clear, I am not talking about all google sites, just the create-your-own system google has made, called "Google Sites" -> https://sites.google.com/.
On the howto page, there is this:
Unsupported features
The HTML Box tool currently doesn't support the following features:
iframes JavaScript code can't create any script, image or link tags
Document/window onload and onready functions. You can place any
JavaScript at the end of code that needs to load after the document
loads.
Does that mean HTML tool cannot create tags? even though they are in the demo above?
The Google Sites help explains how to add custom HTML/CSS/JS content:
Go to the Google Sites page that you’d like to embed HTML in.
Go to the Insert menu and select HTML Box.
In the dialog that opens, add HTML, CSS and/or Javascript code.
When you’re done, click Save.
To preview your embedded HTML, click Save on the Google Site page.
It goes on to note that "code from one HTML box can’t interact with or refer to code outside of the HTML box, including other HTML boxes" -- presumably, each "HTML box" is a separately sandboxed iframe element. As such, your ability to use JS to "manipulate the look and feel of the site" will be pretty limited.
Another alternative is writing your own Gadget
"Gadgets are small web applications that can be added to web pages. Gadgets are XML files that typically wrap HTML and JavaScript" as explained by a Google Sites Guru that goes by the name Mori.
https://sites.google.com/site/mori79/html-gadgets
You can also find more information in Google Developers site:
https://developers.google.com/google-apps/sites/gadgets/site_gadgets?hl=en
Hope it helps.
Google Site has a good documentation, and you cannot use any JavaScript against their program policy.
Please read the documentation, it lists details of the steps for inserting custom CSS, JavaScript and general HTML.

Categories