How to render googlemaps in a dojo content pane

Question

I have an spring/dojo application. The requirement is to locate an address in a stackcontainer/content-pane, in map. First thought was to have the redirection to google maps and CORS & ACCESS_ORIGIN issues are being thrown.

Can anyone guide us?

score 0 · Answer 1 · answered Aug 26 '17 at 21:56

Not sure what you mean with "redirection to google maps", and I am not familiar with spring.

Below an example that I built after some googling (among others here), uses the google maps javascript api, and displays a map in a ContentPane (at least in my environment). You'll need to provide your google API key and adapt config to your environment:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Google maps demo</title>
    <link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen"> 
</head>
<body class="claro">
    <div id='theMap'></div>
    <script>var dojoConfig ={
                baseUrl: "", isDebug: true, async: true,
                packages: [{"name": "dojo", "location": "dojo-release-1.12.2-src/dojo"},   {"name": "dijit", "location": "dojo-release-1.12.2-src/dijit"},  
                ],
            };
    </script>
    <script src="dojo-release-1.12.2-src/dojo/dojo.js"></script>
    <script>
        require([
            'dijit/layout/ContentPane',
            'myApp/gmapsLoader!http://maps.google.com/maps/api/js?v3&key=YOUR_GOOGLE_API_KEY'
        ], function (ContentPane) {
            var theMap = new ContentPane({style: {height: '1000px'}}, 'theMap');
            var mapOptions = {
                    center : new google.maps.LatLng(-34.397, 150.644),
                    zoom : 8,
                    mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            var theMapContent = new google.maps.Map(theMap.domNode, mapOptions);
            theMap.startup();
        });
    </script>
</body>
</html>

It has a dependency upon gmapLoader, which is described here (under the name async.js).

jc

How to render googlemaps in a dojo content pane

1 Answers1