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:

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);

3 Answers 3


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".

  • Thanks Tim. Just to confirm: are we talking about v3? Would you mind showing the whole code, including how you load the scripts from Google? For my test, I just took examples from the Google site, like this one: code.google.com/apis/maps/documentation/javascript/examples/…
    – Christophe
    Jun 21, 2011 at 13:06
  • Like this: <script src="https://maps-api-ssl.google.com/maps/api/js?sensor=false" type="text/javascript"></script> Jun 21, 2011 at 13:40
  • Tim, your reply encouraged me to look further and finally make it work. What was missing in my case was an explicit width and height in the div style.
    – Christophe
    Jun 22, 2011 at 1:17

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


It is possible to render Map in List View for XSLTListViewWebPart (XLV) using Google Maps API v3.

Solution description

For storing geographical locations and visualizing it in Map is used Custom List. Custom List is based on Generic List with Custom Content Type and with View to render Map.

Map List View is implemented using custom XSLT style sheet and JavaScript rendering control for Map.


For example, list items enter image description here

will be rendered in Map List View as shown below enter image description here

For implementation details please see my blog post Bringing Map functionality into SharePoint 2010: Rendering Map List View

Hope this helps,


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.