CODEWITHSUNDEEP
google-mapsmeteor
user2344293
user2344293

Reputation: 173

Show Google Map Issue in Meteor?

I need to know about to show google maps in Meteor.I did one sample as shown below.

Html code :

<head>
  <title>Maps</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">   </script>

</head>

<body>

  {{> maps }}

</body>

<template name="maps">
    <div id="map-canvas"></div>
</template>

Js Code :

if (Meteor.isClient)
{

  Template.maps.rendered = function() {

    console.log("*** Map  Start ********")
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    console.log("*** Map  end ********")

    //return map;




  }

  }//End is Meteor

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

The problem is not showing map when i am run my code.I didn't any idea about this.So please suggest me what to do for this?.

Upvotes: 1

Views: 121

Answers (1)

Ethaan
Ethaan

Reputation: 11376

Lets put the map on a initialize function like this.



       initMap = function(){
    console.log("*** Map  Start ********")
            var mapOptions = {
              center: new google.maps.LatLng(-34.397, 150.644),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
            console.log("*** Map  end ********")
    }


        //return map;

Now on the rendered function.

Template.maps.rendered = function(){
       Meteor.setTimeout(function(){
        initMapa();
         },2500)
       }

Also make sure you have the .css file like this.

#map-canvas { 
width: 100%; 
height: 300px; 
}

And it should works, test it and tell me if works

Upvotes: 1

Related Questions