Google Map showing blank page in Internet Explorer

Question

I am using below snippet to show google map for a country in a sharepoint site page.

<div id="map_canvas" style="height: 354px; width:713px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script>
    var directionsDisplay,
        directionsService,
        map;

    function initialize() {
        var directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();
       


        var myLatlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
            zoom: 16,
            center: myLatlng,
            styles: [{
                "stylers": [{ "hue": "#007fff" }, { "saturation": 89 }]
            }, { "featureType": "water", "stylers": [{ "color": "#ffffff" }] },
            {
                "featureType": "administrative.country", "elementType": "labels", "stylers": [{ "visibility": "off" }]
            }]
        }

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var marker = new google.maps.Marker({
            ,
            map: map,
            title: 'Hello World!'
        });

        directionsDisplay.setMap(map);
    }

</script>

I actually created a page and inserted a content editor webpart on a page then inserted above map snippet in a content editor webpart,now it's working perfectly in firebox and google chrome browser but it's showing a blank page in internet explorer browser,can anybody help me in displaying the map in internet explorer as well.

 

Answer 1

I haven't had a chance to pop on my test farm and check it out, but I believe it is due to the location of the script source. 

try putting the jquery and jc (gMaps script title) in a doc library in SharePoint and referencing like so:

location of jquery: http://myWebApp/sites/mySiteCollection/myScriptLibrary/jquery.min.js

location of gmaps js: http://myWebApp/sites/mySiteCollection/myScriptLibrary/jc.js

<script src="http://myWebApp/sites/mySiteCollection/myScriptLibrary/jquery.min.js"></script>
<script src="http://myWebApp/sites/mySiteCollection/myScriptLibrary/jc.js
?v=3.exp&sensor=false&callback=initialize"></script>

---

Christopher Webb | Microsoft Certified Master: SharePoint 2010 | Microsoft Certified Solutions Master: SharePoint Charter | Microsoft Certified Trainer| http://christophermichaelwebb.com

Answer 2

Hi,

     I presume you are trying to view the google map embedded in SharePoint 2013 page in IE 11, If that is the case It seems compatibility issue with IE, Please check if the IE update KB 2901549  is installed, if not please install and check for the issue. 

Also, Please refer to the url mentioned below for settings for IE11 and IE 10 and below if you are using IE 10 or below

IE 11

https://support.google.com/maps/answer/21849?hl=en

IE 10

https://support.google.com/maps/answer/3118069?hl=en

---

Please remember to mark your question as answered &Vote helpful,if this solves/helps your problem. Thanks, Ajeet

Answer 3

Ajeet's response is most likely the problem, but if you don't want to update individual machines (or GPO, depending how your site is used), adding the javascript to the library should achieve the same effect.

---

Christopher Webb | Microsoft Certified Master: SharePoint 2010 | Microsoft Certified Solutions Master: SharePoint Charter | Microsoft Certified Trainer| http://christophermichaelwebb.com

Answer 4

There are several other jquery components i am using in the site so i did'nt require  KB 2901549 to install but now you are suggesting that i need to install that as well can you please confirm??

secondly,i followed steps you mentioned for IE11 but still same problem persists.

please help

Answer 5

the issue isn't about jQuery, ots google maps and how they render in IE. Its not that you have to now add them to the site instead of referencing them, that just helps avoid changing some secirity settings and the compatibily view issue. It is very common to reference jQuery the way you are.

maybe just try it for the Google bit out follow the other kb articles sheet posted

---

Christopher Webb | Microsoft Certified Master: SharePoint 2010 | Microsoft Certified Solutions Master: SharePoint Charter | Microsoft Certified Trainer| http://christophermichaelwebb.com

Answer 6

Hi,

According to your post, my understanding is that you wanted to use Google Map in SharePoint 2013.

Here are two Google Map Web Parts from codeplex for your reference:
SharePoint 2010 & 2013 Google Maps V3 WebPart
http://spgooglemappart.codeplex.com/

A very simple SharePoint 2013 google map web part
http://tlgooglemapwebpart.codeplex.com/

Best Regards

---

Dennis Guo
TechNet Community Support