Google Maps v3 on Web Part page

Question

Has anybody been able to implement Google Maps v3 on a Web Part page (SharePoint 2010)?

The maps render fine if I display them in a separate .aspx page, but as soon as I try to embed the code in a Content Editor Web Part or a Form Web Part, I get a blank page. I did the test in both Internet Explorer and Firefox.

I'd be really interested to see a working example. Again, I have two constraints:

• Google Maps v3 API (not v2): http://code.google.com/apis/maps/documentation/javascript/
• within a SP 2010 Web Part page (no Page Viewer Web Part of course...)

Update: I got this to work, below an example. Google sample: http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

My test (note the explicit width and height on the div):

<div id="map_canvas" style="width:300px;height:300px;">placeholder</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
</script>

Answer 1

Yes, it is possible I have a version here. What method are you using to inject the Maps, are you injecting into a named div, or some other method? I have it working with CEWP; here is some sample code to put into your CEWP:

var myCenter = new google.maps.LatLng(0.0, 0.0);
var mapOptions = { zoom: 13, center: myCenter, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);

You would then need within the text for the CEWP a div with id "googlemap".

Answer 2

I have a working template which I share within my company. It has been pretty successful in the implementation that even non-coder can re-use the same content.

The blank page you see when inserting in CEWP is due to the undeclared stylesheet. By inserting a reference link in the page header should solve the issue and render the map at full size.

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

With that reference you page will be rendered at full size (100% width height of the web part) and not limited to the size defined in your styling.

I have a brief example in here: http://sharepointgarage.blogspot.com/2012/05/list-to-google-map.html