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

Answer 3

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.

Usage

For example, list items

will be rendered in Map List View as shown below

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

Hope this helps,

Vadim