Question

On a Jquery Mobile content of a page I have an img src like this:

<img id="map" src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false" height="200" width="288" />

I have a button and code to change the SRC of the above IMG in a javascript

<script type="text/javascript">
        function update()
        {
            cval = '"https://maps.googleapis.com/maps/api/staticmap?center=Brisbane&amp;zoom=14&amp;size=288x200&amp;markers=Brisbane&amp;sensor=false"'
            $('#map').attr('src',cval);

        }
    </script>

The page loads fine and displays the map image. But when I call the script from a button, I get an error and the image dows not display. Looking in the Chrome Inspect Elements, the first call is to a GET and the image loads, but the 2nd call is also a GET but does not work and the error is “forbidden”

I am trying to make a mobile page so that when the user enters a new location and clicks Refresh, I want to update the IMG to the new location, but this gives me an error.

So what is wrong here? Why does the first GET work but not the 2nd and how to get this to work?

Also just pasting the url in a browser also does not work.

Answer 1

I got around it by making a new <img>, rather than just switching the src attribute.

http://jsfiddle.net/lollero/VKAW9/1

HTML:

<img id="map" src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false" height="200" width="288" />

jQuery:

$('html').on("click", function() {

    var map = $('#map'),
       cval = 'https://maps.googleapis.com/maps/api/staticmap?center=Brisbane&zoom=14&size=288x200&markers=Brisbane&sensor=false';

    $('<img id="map" height="200" width="288" src="'+ cval +'">').insertAfter( map );
    map.remove();

});