HTML Code for Embedding Google Maps for Radio Listeners

Support · #1 (**permalink**) 2nd August 2009, 11:37 AM

With the following code you can embed a live google map of where your listeners are located in your own website. A very cool feature.

There are a couple of things that need to modified in the code below to enable this to work :

1. Google Maps API Key.
Register for a google maps API key from here : Sign Up for the Google Maps API - Google Maps API - Google Code
Replace the key= field in the html with your key otherwise it wont work.

2. Server URL
You must replace the server url (listed below as shoutcast.internet-radio.org.uk) with your particular servers URL (found in the welcome email).

3. Replace the USERNAMEHERE with your username.

4. Modify the 'style="width: 1030px; height: 680px"' dimensions to fit your page.

HTML Code:

<html>
<head>
</head>
<body>
        
<div id="cc_google_maps" style="width: 1030px; height: 680px"></div>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA879TPvre-L5Fh_lmVFINJxT-4l_MyznJ06qBtn-fiJT7vPkvpRQhTEpvNYfckzp-A-2Fux6cd4NlLw" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="http://shoutcast.internet-radio.org.uk/system/googlemaps.js"></script>
<script language="javascript" type="text/javascript" src="http://shoutcast.internet-radio.org.uk/js.php/USERNAMEHERE/googlemaps/rnd0"></script>

<script type="text/javascript">
if (!window.onload) window.onload = cc_googlemaps_initialize;
</script>

</body>
</html>

This should enable you to have a smart looking map of your live listeners on your website. The accuracy of the map is to city level too.

rollinradio · #2 (**permalink**) 2nd August 2009, 12:47 PM

Great stuff support, I will be on the case later and post how it goes !

rollinradio · #3 (**permalink**) 2nd August 2009, 01:42 PM

Hi support I cant find my welcome email with that url in it ?

Any chance you can post it on here so I can get this google map up !

Pretty please

I have my map key very easy to set up just need this url to replace shoutcast.internet-radio.org.uk.

Was thinking i could use http://84.16.251.251:10226 ? ? not sure so asking the experts lol

|Rollinradio

Support · #4 (**permalink**) 2nd August 2009, 06:58 PM

Hi Rollin

In your case leave it as it is (shoutcast.internet-radio.org.uk) Thats the server your on. Some people are on cp.internet-radio.org.uk so they would need to change it

rollinradio · #5 (**permalink**) 3rd August 2009, 06:08 PM

Hi Support,

I have got my API key and replaced it in the html but to no joy I cant get the map to display anything.
Can you try this code incase it's something my end not working, I notice in your code the api key has - _ in it ?

My API key was just a long string of letters and numbers.

<html>
<head>
</head>
<body>

<div id="cc_google_maps" style="width: 720px; height: 550px"></div>

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA2DZnMF8xGPOa GL7ZbH3NLhRP7BOxTiqaLYprEIEHk8yJgJcDihReSpiQsz2kgn TO9XpEm3oo3jbjRA"type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="http://shoutcast.internet-radio.org.uk/system/googlemaps.js"></script>
<script language="javascript" type="text/javascript" src="http://shoutcast.internet-radio.org.uk/js.php/USERNAMEHERE/googlemaps/rnd0"></script>

<script type="text/javascript">
if (!window.onload) window.onload = cc_googlemaps_initialize;
</script>

</body>
</html>

DiscoDave · #6 (**permalink**) 4th August 2009, 05:45 PM

I'm confused a bit here - how does Google know which stream to look at? There's nothing in there with the station username or anything..?

rollinradio · #7 (**permalink**) 4th August 2009, 06:49 PM

Yeah i was thinking that surely it needs to know the server and port ?

Anyway cant it to display anything so hopefully support can shed some light on the issue.
RollinRadio

Support · #8 (**permalink**) 4th August 2009, 07:45 PM

Very good point Dave, well spotted! My bad. I forgot to mention that the username needs to be entered. I have modified my above code to include USERNAMEHERE. Replace this with your own. I previously had it set to a test account. Apologies. Let us know how you get on.

Heres some proof of concept html :

http://shoutcast.internet-radio.org....psexample.html

rollinradio · #9 (**permalink**) 5th August 2009, 05:25 PM

Hi all again,

I still cant get any map showing even waited a few hours incase the api key took a while to register with google !

Out of interest you show this as html just to check this is not php script is it ? as I know from previous experience php just will not work with my site.

All my site is based on html and flash.

any idea's anyone ?
RollinRadio

Support · #10 (**permalink**) 5th August 2009, 06:39 PM

Its just HTML + Javascript. Can you send us a link to your page where you have the code so we can have a look ? Might be handy for diagnosing the issue.

Also out of interest has anybody else got this to work on their own sites ?

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

LinkBacks (?) LinkBack to this Thread: http://forum.internet-radio.org.uk/guides/162-html-code-embedding-google-maps-radio-listeners.html
Posted By	For	Type	Date
Google Maps Example	This thread	Refback	4th August 2009 10:05 PM