CODEWITHSUNDEEP
javascripthtmlangularjsmeteor
Flávio Carvalho
Flávio Carvalho

Reputation: 149

Adding a Google Map on my meteor app

So I'm trying to convert a static website I've made to work as a meteor app, instead of having 5 html files to each store, plus multiple html standard pages, I got them all to "one" single html file using directives, problem is when I'm trying to insert the map on the website, for some reason it doesn't work, I've tried multiple things but still couldn't make a standard map appear on the page, let alone a customised version..

here I'm just defining the map on the html file (the id I will change later to show the map I want for each store or just change the lat lng based on the store I'm currently showing on the page):

<div id="mapCS" class="map col-xs-12 col-sm-6 col-md-6 col-lg-6">
</div>

this is the js file I used on the static version of the website and its working as intended (on the static version obviously):

var map = new google.maps.Map(document.getElementById("mapCS"),
        mapOptions);

    var marker = new google.maps.Marker({
        position: myCenter,
        map: map,
        animation:google.maps.Animation.BOUNCE,
        title: 'Savoie Volailles Cranves Sales',
        icon: {
            url:"img/logo.png",
            scaledSize: new google.maps.Size(80, 64),
        }
    });

    google.maps.event.addListener(map, 'center_changed', function() {
        // 0.1 seconds after the center of the map has changed,
        // set back the marker position.
        window.setTimeout(function() {
            var center = map.getCenter();
            marker.setPosition(myCenter);
        }, 100);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

I also had a script tag to insert my api key..

Upvotes: 2

Views: 421

Answers (1)

Lucas
Lucas

Reputation: 10313

Use angularui:angular-google-maps as recomended here

Just add the dependency and call it with a directive. Configuring the options is very easy and done from the controller

Upvotes: 1

Related Questions