1

I want to use Google Maps for Openlayers in my project. I try to integrate the maps with this: https://github.com/mapgears/ol3-google-maps. But I can't get even the simplest example to work. The map doesn't load (blank space), and in the console I get "ReferenceError: olgm is not defined". This is the code I have:

    <script>
...code...
        var googleLayer = new olgm.layer.Google();
        var center = [-7908084, 6177492];
        var map = new ol.Map({
                interactions: olgm.interaction.defaults(),
            controls: ol.control.defaults().extend([
                    overviewMapControl,
                    mousePositionControl,
                    new ol.control.ScaleLine()
            ]),
                layers: [googleLayer],
                target: 'map',
                view: new ol.View({
                  center: center,//[0, 0],
                  zoom: 2
                })
              });
              var olGM = new olgm.OLGoogleMaps({map: map}); // map is the ol.Map instance
              olGM.activate();
...code...
    </script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=MYKEYHERE"></script>
        <script src="js/ol3gm-debug.js"></script>

What can I possibly do wrong?

thebat93
  • 37
  • 1
  • 6

1 Answers1

1

Put your script tag after "olg3m-debug.js" script tag. You need to check div id.

And put your script inside document ready for use DOM after initialize.

$( document ).ready(function() {
    //your script goes here
});
hurricane
  • 6,521
  • 2
  • 34
  • 44
  • I did all that but I still get the blank map. I tried to copy and run this example (http://mapgears.github.io/ol3-google-maps/examples/dist/examples/simple.html), but I still get the same result. – thebat93 Dec 08 '16 at 09:14
  • Would you please create a JSFiddle out of your example? I'd be willing to try to see what's wrong to help. – Alexandre Dubé Dec 08 '16 at 14:54
  • @AlexandreDubé create yours. I will help to you. – hurricane Dec 08 '16 at 15:07
  • I'm confused. I'm not the one reporting the problem, therefore I don't know how to reproduce this exactly. Sorry about that. I think @thebat93 should be the one creating his/her own example and anyone willing to help could go from there. – Alexandre Dubé Dec 08 '16 at 15:20
  • @AlexandreDubé Here you have it: http://jsfiddle.net/p3yL0qwv/1/. Strangely enough it works now O_o. I wrapped the map div in
    tag and added this to the css style: section #map { margin: 5px auto; margin-left: 25px; border: 1px solid #CDD7EE; border-radius: 5px; width: 1050px; height: 620px; }. I would appreciate it if someone told me why this thing matters.
     – thebat93 Dec 09 '16 at 07:54
  • The `
    ` element is irrelevant. The div in which you want to draw the map has to have a size set for the map to be drawn. The initialization in the `ready` method is important too. Glad you could make it work.
     – Alexandre Dubé Dec 09 '16 at 13:16