HTML Code for Embedding Google Maps for Radio Listeners

**Support** · 2nd August 2009, 10: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.

See Demo Here

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.com) 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.com/system/googlemaps.js"></script>
<script language="javascript" type="text/javascript" src="http://shoutcast.internet-radio.com/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** · 2nd August 2009, 11:47 AM

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

**rollinradio** · 2nd August 2009, 12: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 :p

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

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

|Rollinradio

**Support** · 2nd August 2009, 05:58 PM

Hi Rollin

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

**rollinradio** · 3rd August 2009, 05: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.com/system/googlemaps.js"></script>
<script language="javascript" type="text/javascript" src="http://shoutcast.internet-radio.com/js.php/USERNAMEHERE/googlemaps/rnd0"></script>

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

</body>
</html>

**DiscoDave** · 4th August 2009, 04: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** · 4th August 2009, 05: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** · 4th August 2009, 06: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** · 5th August 2009, 04: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** · 5th August 2009, 05: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: HTML Code for Embedding Google Maps for Radio Listeners

LinkBack

Thread Tools

Search Thread

Display

HTML Code for Embedding Google Maps for Radio Listeners

Google Maps

Google maps

Map Embedding

Google maps

Google map

LinkBacks (?)

Google Maps Example

Internet Radio Bandwidth Calculator

Internet Radio Playlist Generator

Auto DJ Radio Server

Internet Radio Prices

Google Maps Example

Tags for this Thread

Posting Permissions