Map showing only as static image

Hi Rachel,

Just tried now with this:

<perch:content id="map" type="map" label="Location Map" width="400" height="300" zoom="10" />

Got the same issue - it is picking up the width and height declarations, but is still static.

Thanks

Mike

Output in the DOM is:

<div class="map">
    <img id="cmsmap391-1" src="//maps.google.com/maps/api/staticmap?center=52.540698,-2.803484000000026&amp;sensor=false&amp;size=400x300&amp;zoom=10&amp;maptype=map&amp;markers=color:red|color:red|52.540698,-2.803484000000026"  width="400" height="300" alt="Church Stretton Golf Club" /><script type="text/javascript">/* <![CDATA[ */ if(typeof CMSMap =='undefined'){var CMSMap={};CMSMap.maps=[];document.write('<scr'+'ipt type="text\/javascript" src="/admin/core/assets/js/public_maps.min.js"><'+'\/sc'+'ript>');}CMSMap.maps.push({'mapid':'cmsmap391-1','width':'400','height':'300','type':'map','zoom':'10','adr':'Church Stretton Golf Club','lat':'52.540698','lng':'-2.803484000000026','clat':'52.540698','clng':'-2.803484000000026'});/* ]]> */</script>
</div>

I am getting the following:

Resource interpreted as Document but transferred with MIME type image/gif: "chrome-extension://hlngmmdolgbdnnimbmblfhhndibdipaf/images/loader.gif". 

But I am getting that on every page not just the one with the map on...

Just tried the default:

<div>
    <h2><perch:content id="location" type="text" label="Location name" required="true" title="true" /></h2>
    <perch:content id="map" type="map" label="Address" width="400" height="300" zoom="15" />
</div>

Still no joy:

https://csgc.mikeharrisondesign.com/contact.php

Thanks Drew! It's totally baffled me

I believe I am encountering this same issue -- Perch falling back to a static Google map inexplicably.

Let me see if I can offer some more intel:

That's my Firefox Developer Tools, showing that public_maps.min.js has been added to the page, but it's apparently not activated or something. The Console tab reports no errors or warnings whatsoever.

For a long time, I thought that the public_maps file wasn't getting added to my page at all, and I now I see that it's still only getting added in the code after the insertion of the static image -- that big "<![CDATA[" tag. But I notice that the code looks like it's trying to construct a <script> tag to reference the file:

document.write('<scr'+'ipt type="text\/javascript" src="/perch/core/assets/js/public_maps.min.js">

So, does that mean that public_maps.min.js isn't even truly included in the page, because it's not even in a real DOM element, even though the string "public_maps.min.js" is technically there, allowing Firefox Developer Tools to acknowledge the file's existence?

I used the default Google Map template that ships with the download. The static API sort of works -- the credentials are definitely going through, and in some conditions it loads correctly in the browser. But I won't go into detail about that, since I'm fairly confident that's just some front-end issue.

(The behavior is identical on the live server and the local dev environment.)

Wait.... I switched the template from 'google_map.html' to just 'map.html' -- neither of which I created or modified prior to today, and my previous difficulty with the static API disappeared. It seem to just work using the template 'map.html', and I've now made my own customized version that still works:

<!--* Copied from the default 'map.html'. Removed 'h2' and height/width declarations. *-->
<div>
    <!--* <h2><perch:content id="location" type="text" label="Location name" required="true" title="true" /></h2> *-->
    <perch:content id="map" type="map" label="Address" zoom="15" />
</div>

Anyways, I do still believe it's using the static API, though. After all, the source clearly shows that the map is loaded in an <img> element, and public_maps.min.js is still grayed out in Firefox Developer Tools. Personally, I'm very satisfied with a working static API, but I don't understand why the other API isn't loading.

EDIT: No, maybe it actually is using the JavaScript API. I am so confused. The source when I view it from rendered page is significantly different from the DOM representation in the Firefox inspector. There, it shows public_maps.min.js below that CDATA thing with document.write statement that looks like it's trying to create the <script> element, and instead of the <img> I get a lot of nested divs. I can't find the <img> element in the inspector at all. But when I view the source, the <div> elements are gone and the <img> is back.

Okay, so I'm pretty sure it's actually working. I guess the JavaScript is expanding the static API fallback into the dynmaic API, or something....

(Sorry, OP.)