• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Jeanne Boyarsky
  • Tim Cooke
Sheriffs:
  • Liutauras Vilda
  • paul wheaton
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Carey Brown
  • Frits Walraven
Bartenders:
  • Piet Souris
  • Himai Minh

API Google Maps Problem

 
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi I am totally new to this and think I may be missing out on a crucial step somewhere.

I have got my API key which took me a while to get my head around.

I have tried putting the HTML code into a post and have also tried adding a gadget HTML/Javascript.

All I get constantly is a blank part on the website where I expect to see a map.

Once I get up and running I think I be able to play with the code and work things out.

The code that I have tried is

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>

I changed the KEY and true or false part.
I then thought this was too much code as was for a whole new page so I started taking bits out but that still didnt work

Then I tried something really simple like

<script>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
</script>

Still just a blank page.

If anyone can help me get started that would be great. Then I can have a play and try and get clustering working.
 
author
Posts: 297
5
Android Firefox Browser Fedora
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Are there any errors in the JavaScript or network consoles? Did you set appropriate allowed referers in the Google API console?
 
phillip smith
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Oops. I had not edited allowed referers.

If that is the issue?
Changed it now
However it still doesn't work

Now it says Google has disabled use of maps api. The provided key is not a valid Google api key.

I tried running the code without the api key bit and that leaves a blank area on the website as well.


 
Marshal
Posts: 27214
87
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Start with the HelloWorld example from the documentation.
 
phillip smith
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
That is the code I have used. But it doesn't seem to work. Is it because I am inserting the code into a blogger gadget or post? I've tried both.
 
Ranch Hand
Posts: 433
Netbeans IDE
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Are you using the latest version (version 3)? In that case you don't need any api-key anymore.
So just use this line:

(without the key-parameter).

If this still doesn't work: Are you using any ad-blocker (like NoScript)? Have you had a look at the JavaScript-Console as Rob suggested? Maybe you want to install Firebug (https://getfirebug.com/) if you don't have it yet because the JavaScript-Debugger is awesome.
 
phillip smith
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi everyone.

Yes I am using v3 and now have taken out the api key as suggested.

I'm still struggling even to get anything showing.
I am not using any ad blocker.
I do not know anything about javascript console but googled it and using chrome brought up the javascript console and it came up with the following errors.

Invalid 'X-Frame-Options' header encountered when loading 'https://maps.google.co.uk/maps/ms?ie=UTF8&hl=en&oe=UTF8&msa=0&msid=21481893…0&num=200&t=m&ll=54.876607,-4.570312&spn=12.158879,28.125&z=5&output=embed': 'ALLOWALL' is not a recognized directive. The header will be ignored. about:blank:1
Unsafe JavaScript attempt to access frame with URL http://urbanfoxmap.blogspot.co.uk/ from frame with URL http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-514032735863106…59&fu=0&ifi=1&dtd=154&xpc=7CUEwfCxuZ&p=http%3A//urbanfoxmap.blogspot.co.uk. Domains, protocols and ports must match.
2
Unsafe JavaScript attempt to access frame with URL http://urbanfoxmap.blogspot.co.uk/ from frame with URL https://maps.google.co.uk/maps/ms?ie=UTF8&hl=en&oe=UTF8&msa=0&msid=21481893…0&num=200&t=m&ll=54.876607,-4.570312&spn=12.158879,28.125&z=5&output=embed. The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'http'. Protocols must match.
Unsafe JavaScript attempt to access frame with URL http://urbanfoxmap.blogspot.co.uk/ from frame with URL http://adverts.adgenie.co.uk/iframe.php?a=2002&rand=1366310599. Domains, protocols and ports must match.

I think once i get it up and running i will probably be able to do what i want to do.

I know its not that complicated.

Basically on www.urbanfoxmap.blogspot.co.uk there is a Google Map embedded. However this is no use for me because i have too many markers and it will not show them on one page.

So i want to use API to be able to load up the data onto a map with clustering.

Should this is theory be an easy task?

P.S. Thanks for all your help so far.

currently the basic code i am using is

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
 
Paul Clapham
Marshal
Posts: 27214
87
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

phillip smith wrote:That is the code I have used. But it doesn't seem to work. Is it because I am inserting the code into a blogger gadget or post? I've tried both.



I don't understand that. When I saw your original post I assumed you were asking a question about that simple HTML page. However now it seems that you're asking a question about something else which you haven't posted, this blogger gadget thing. Is that correct?
 
phillip smith
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I'm trying to get a clustered map onto my blogger site. I have tried two methods.
1. Made a post and used html code.
2. Used a blogger gadget. Html/javascript. - which is meant for putting code into your blog.

I tried the simple example called hello world at https://developers.google.com/maps/documentation/javascript/tutorial

I have also tried taking out some of the top lines of the hello world as I was not sure if I need them.
 
Paul Clapham
Marshal
Posts: 27214
87
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Well, let me put it this way. I took that HelloWorld code and pasted it into a text editor. Then I modified the URL parameters so they were only "sensor=false" (i.e. no API key). Then I saved the text into a file called gmaphelloworld.html. Then I double-clicked that file so that my default browser would open it. Works fine.

I would get the simplest possible thing working before you rush off and try to embed the map into your blog. When I tried doing that a few years ago with my blog I eventually had to give up and host the Google map pages elsewhere, as the blog software carefully prevented me from inserting Javascript into my posts. Your blog software may work differently.
 
phillip smith
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for your help. Do you know of any free hosting services? Also do I just need the most basic hosting. Will javascript work with just http hosting or do I need other things like php?
 
Sheriff
Posts: 67637
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
JavaScript has nothing to do with server-side language such as PHP. It executes completely in the browser.
 
Paul Clapham
Marshal
Posts: 27214
87
Eclipse IDE Firefox Browser MySQL Database
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I got "a free web site" along with my cable subscription. That was 20 MB of free storage, a ridiculously small amount for a real web site, but it was enough to store a few web pages. Here's an example: http://members.shaw.ca/Claphams/Tatras-2008/20080905.html.

When I said that my blog software removed the Javascript, that was Wordpress I was talking about. Your blog software might be less restrictive -- when I was using Blogspot I almost managed to embed Google maps into my post, but my problems were more with the generating of the Javascript. I was trying to use XSLT to do that and got all tied up in knots trying to produce the correct quotes. After I passed two levels of escaping my code was basically incomprehensible.
 
Greenhorn
Posts: 14
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,

If you want to debug Google Map API code you can use GLog.write function to view javascript console errors in a separate DIV.

Regards,
Pallavi
 
Just the other day, I was thinking ... about this tiny ad:
Free, earth friendly heat - from the CodeRanch trailboss
https://www.kickstarter.com/projects/paulwheaton/free-heat
reply
    Bookmark Topic Watch Topic
  • New Topic