HTML Code for Embedding Google Maps for Radio Listeners

Support

Support

Level 1 Support
Staff member
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: 
<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. 8)

UPDATE MAY 2014​


The previous Google Maps API v2 keys are now no longer available.

You can however obtain an API key here:

https://developers.google.com/maps/documentation/javascript/tutorial#api_key

:)
​
 
R

rollinradio

New Member
Google maps

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.org.uk.

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

|Rollinradio
 
Support

Support

Level 1 Support
Staff member
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 :)
 
R

rollinradio

New Member
Map Embedding

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&amp;v=2&amp;key=ABQIAAAA2DZnMF8xGPOaGL7ZbH3NLhRP7BOxTiqaLYprEIEHk8yJgJcDihReSpiQsz2kgnTO9XpEm3oo3jbjRA"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>
 
D

DiscoDave

Guest
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..?
 
R

rollinradio

New Member
Google maps

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

:dance::dance::dance:
 
R

rollinradio

New Member
Google map

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

Support

Level 1 Support
Staff member
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 ?
 
D

DiscoDave

Guest
I am testing this on our Intranet and it won't work. Simply says no map is available for this stream :(
 
Support

Support

Level 1 Support
Staff member
Strange, im not 100% sure it will work on an intranet as the google maps key is key'ed to the domain name your hosting the map on so if the request doesnt do this it might not work.

I remember about a year or two ago another client managed to get this working before we even thought about mentioning it was possible. I remember being impressed they got it to work ok without any help.

Its a strange one. It would be nice to get some links to some of these pages (obviously not intranet ;) ) so we could check out some source code. :nerd:
 
R

rollinradio

New Member

Attachments

  • map image.jpg
    map image.jpg
    36.6 KB · Views: 2,862
D

DiscoDave

Guest
I will try uploading to the webserver and see what happens and send you the link once I get it set up. I'd thought it would be a useful tool for our presenters to have on the studio Intranet, but I suppose it's just as easy to get it from the website.
 
Support

Support

Level 1 Support
Staff member
HI Dave

Cracked it :) In your control panel start page settings the 'Enable Google Maps Widget' was disabled. Ive enabled it and the map now works :) :

New Page 1 8)
 
D

DiscoDave

Guest
Thanks - never knew there was something in there that would stop it working. Silly me! All up and running nicely now. Many thanks.
 
F

foxradio

New Member
Great Post.

Worked perfectly on my website, just make sure you enable the currently listeners widget on your Server Settings and don't forget to add your username to the aproppriate string.

Well Done Support
 
D

DJAUBS

New Member
html coding for google map

hi there team im new here but i was wondering. could someone please config the code for me. <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> my username is DJAUBS and my api key is ABQIAAAAe9DVJBw5M2Gd9_eFyErQSxRTtE09rfgflmOOLHbw8_hPs4tJrRT9xuf1BS6RTKjXDjgFxtU_By55lw if anyone can get back to me
 
You must log in or register to reply here.
Top