I've checked all the topics about Google Maps V3 not showing up and none of them fit my sceneario. I'm working on a module for DotNetNuke 7x and I first coded a straight html page with the Simple Map boilerplate code on the Google Maps V3 API Code Samples page. It works fine when I navigate to my html page through my DNN app.
Next I took that code and put it in my ascx control. In Page Context Initialized I inject the necessary code in the head tag, and viewing the source shows it is correct. One piece of code is the Google Map declaration, the other is the js include file.
There are no errors regarding this in the javascript console when I run it. But the map doesn't show up at all. The area is blocked out for it, I did give it a width and height, but there's no map.
Here's how it looks through view source:
In the Head tag:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MYAPIKEY&sensor=false"></script>
<script src="/MyOnlineMarketingHub/DesktopModules/UCU_Organization/js/JScript2.js" type="text/javascript"></script>
JScript2.js file content:
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
in the Body:
<div id="map_canvas" style="height:250px; width:350px;"></div>
The only difference I can think of is the html5 doc type in Google's sample, but DNN uses an XHTML doc type -- however I can't change that because anyone who uses this module would have to go in and change the doc type of any skin they used it with.
Does anyone see why this isn't working?
Thanks in advance.