HTML Code for Embedding Google Maps for Radio Listeners

Support

Level 1 Support
Staff member
#21
Things to check :

1. Make sure you have replaced USERNAMEHERE with your actual username.

2. Are you using your own google maps key ?
 
#26
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.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:
<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. 8)


What USERNAMEHERE do you meand User name for sigin at google or what?? and where would i ind it?????
 
#28
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.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>


I have also tried this

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


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyANy-rlFJGI3FiY18Z2Xh-sxiK1JtjqPeU"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>



But cant get mine to work?
 

Support

Level 1 Support
Staff member
#29
I have also tried this

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


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyANy-rlFJGI3FiY18Z2Xh-sxiK1JtjqPeU"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>



But cant get mine to work?
You do not host with us, so this code will not work for you we are afraid.

Sections 2 & 3 of the guide states that you must replace the server url (listed in the example as shoutcast.internet-radio.com) with your own particular servers URL and Username which you do not have with us. :)
 
#30
help with maps

hello i tryed to sort this out but i just get nothing working i coped the script and put the api key from google but when it get upload to my server google message come up saying diabled
 

Support

Level 1 Support
Staff member
#31
hello i tryed to sort this out but i just get nothing working i coped the script and put the api key from google but when it get upload to my server google message come up saying diabled
Did you replace the server URL in the code with your own servers URL? (uk1.internet-radio.com)

Have you also replaced the USERNAMEHERE in the code with your username? (globalsounds)

Are you using your own google maps key? Sign Up for the Google Maps API - Google Maps API - Google Code
 
#32
You do not host with us, so this code will not work for you we are afraid.

Sections 2 & 3 of the guide states that you must replace the server url (listed in the example as shoutcast.internet-radio.com) with your own particular servers URL and Username which you do not have with us. :)

Thanks for the info can you tell me how and where to get the info to make this work?

Thanks :)
 
#33
#34
got it working

hello i have got this to work but i have not put it on my site yet finally after all this its now working anything i can do please let me know

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 ?
 
Top