Implementing Google Maps API Key in javascript - javascript

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.

Related

Documentation of google docs viewer

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.

Google crawling angularjs site strangley

I'm having some trouble identifying why Google is crawling links that don't exist on my angularjs site. I'm using prerender.io which takes a snapshot of the page and returns it to the search bot. For example google will correctly list in the search results:
www.mywebsite.co.uk/string/string2
but then it will randomly create another link to crawl such as:
www.mywebsite.co.uk/string/string2/string/string3
which doesn't even exist!
In the end I get these long urls which are shown in the search results for my site but don't actually display anything useful.
I think the problem is caused by the tag base href="/" - as google will see a header link for example on the page /string1/string2 and then take the base root as it currently is and append the header link to it- i.e. /string1/string2/string1/string2.
Does anyone know if this is the problem and how I can combat this apart from putting in absolute links and removing angular from the equation?
I've tried removing the urls in google webmaster tools but this is time consuming and unreliable as there are so many links and I've added to the robots.txt file the disallowed links but they still show up in google with a message about robots.txt.
Any ideas here?
Thanks!

Calling and using variables in a Chrome Extention

I'm currently working on an extension for chrome, the main aim for the extension is to display listener stats for the stations hosted on my servers.
I need to take a variable (In this case the variable is the mount point and then put it on the end of a URL in an Iframe.
Here is the Iframe.
<iframe id="stats" src="http://free.myfreeradiostream.com:8009/status3.xsl?mount=/mount23.mp3" frameBorder="0" width="500px" scrolling="no">
I need to take the users input through a form and then insert it at the end of the mount part,
For example if I was using mount30.mp3, I would type it in a form, press submit and the extension would replace mount23.mp3 with my mount.
I would use PHP to do this but since It's Chrome I can't, I have looked at JS but I can't figure it out.
Any help will be great, thanks!

Embedding custom Google Map to website with markers

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.

How to load google map without its marker content?

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!

Categories

Resources