HTML Code for Embedding Google Maps for Radio Listeners

Discussion in 'Guides' started by Support, Aug 2, 2009.

  1. 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

    :)
     
  2. rollinradio

    rollinradio New Member

    Google Maps

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

    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
     
  4. 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 :)
     
  5. rollinradio

    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>
     
  6. DiscoDave

    DiscoDave New Member

    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..?
     
  7. rollinradio

    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:
     
  8. Support

    Support Level 1 Support Staff Member

    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.uk/googlemapsexample.html
     
  9. rollinradio

    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
     
  10. 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 ?
     
  11. DiscoDave

    DiscoDave New Member

    I am testing this on our Intranet and it won't work. Simply says no map is available for this stream :(
     
  12. 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:
     
  13. rollinradio

    rollinradio New Member

    Attached Files:

  14. DiscoDave

    DiscoDave New Member

    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.
     
  15. DiscoDave

    DiscoDave New Member

  16. 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)
     
  17. DiscoDave

    DiscoDave New Member

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

    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
     
  19. DJAUBS

    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
     
  20. DJAUBS

    DJAUBS New Member

    google maps

    nope i havent got it on my site im having trouble as well.
    and my website link is viberadio2.tk and go to the link that says master page
     

Share This Page