How can I combine a transparent animated Wunder satellite image with a Google map?

  • 1
  • Question
  • Updated 2 months ago
  • (Edited)
I have a Wunderground API key and a Google Maps api key. I have the http code for the two maps that I'd like to combine but I can't figure it out how to combine them. If I can get a single .gif or .png address, I can put the picture on our electronic bulletin board.

http://api.wunderground.com/api/[key goes here]/animatedsatellite/image.gif?lat=30.33&lon=-89.6&radius=8&width=1280&height=1000&smooth=1&key=sat_vis_bottom&gtt=107&basemap=1&borders=1&timelabel=1&timelabel.y=20&num=5&delay=50

http://maps.googleapis.com/maps/api/staticmap?key=[key goes here]&center=30.3350453,-89.626678&size=640x500&zoom=11&scale=2

I know there has to be a way but I'm not finding it. Please help.

Jennifer

PS, I'm a videographer, not a programmer so if there is a programming answer, I probably didn't understand it.
Photo of Stennis Space Center AVPS

Stennis Space Center AVPS

  • 2 Posts
  • 0 Reply Likes

Posted 2 months ago

  • 1
Photo of Andy Rowson

Andy Rowson

  • 22 Posts
  • 2 Reply Likes
Take a look at this page. I used something like this.

https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay

This put a marker at my location and then overlayed a radar image. This was my version.

<div id="map"></div>

<script>
function initMap() {
        var uluru = {lat: 52.963935, lng: 0.041459};
        var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 9,
    disableDefaultUI: true,
    center: uluru,
         
        });
       
        var imageBounds = {
          north: 53.38,
          south: 52.54,
          east:  1.275,
          west: -1.195
        };

        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
       
        Overlay = new google.maps.GroundOverlay(
            '../snapshot/radar.gif',
            imageBounds);
        Overlay.setMap(map);

      }

 </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=You_Google_API_Key&callback=ini...;
    </script>

You can see it here:

http://midlifedad.me.uk/weather/radar.php

I don't use Wunderground animated gif, I create my own by taking a snapshot Wunderground image every 15 minutes then compile my own animated gif. for previous 12 hour period.
Photo of Stennis Space Center AVPS

Stennis Space Center AVPS

  • 2 Posts
  • 0 Reply Likes
I'll see if I can get one of the programmers to help me with this. OOP stumps me. I'm a structured programming gal.
Thanks