CODEWITHSUNDEEP
google-maps-api-3meteor
tilted
tilted

Reputation: 296

Cannot get map to display on meteor app using google map api3

Hi I am new to meteor and I am working on my first application beyond the tutorial. I am coming from a node + express world. I am currently trying to transform an application I built on Node+express using the google maps java script api v3 into a meteor application so that I may be able to distribute it to specific devices. In my trials I got the app working locally on the web by placing my map code into the head element of my html page and it ran as intended. Once I tried to import it onto an android device I received the error :

    Uncaught ReferenceError: google is not defined

from that error it led me to this post telling me to move my map code into a Template.rendered function because the meteor script is being run before the google maps api is being loaded which seemed correct. I followed the instructions on that post and I am now being served with a new error stating :

    Uncaught TypeError: Cannot set property 'rendered' of undefined

Through googling this took me to this blog post in reference to my error. It states that there is an issue in the order I am loading my html page in. It guides you to change your packages.json file to restructure the order that your files are being served in. The issue here was my packages file is not similarly set up the way hers is and I am having trouble relating it to her file. Any advice would be appreciated I will include code below for my current application.

Html:

    <head>

    <title>Google Maps App</title>

    <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=MYKEYHERE&sensor=true">

    </script>


    </head>

    <body>


       <template name="maps">

          <div id="map-canvas"></div>

       </template>
    </body>

js:

    if (Meteor.isClient) {

      Template.maps.rendered = function() {
        var map;
    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    }




    }

    if (Meteor.isServer) {
      Meteor.startup(function () {

      });
    }

packages:

    meteor-platform
    autopublish
    insecure
    twbs:bootstrap
    fortawesome:fontawesome
    jquery

Thank you for your time in advance. Please let me know if there is anything I can include that would be more helpful.

EDIT 1: Currently looking into using this meteor package for googlemaps with javascript api v3 will post updates.

Upvotes: 0

Views: 1095

Answers (1)

Ethaan
Ethaan

Reputation: 11376

wich meteor version are you using?

run meteor --version and if is under 1.0.4 change the rendered to this(rendered = function() was depurated), now we use onRendered .

Template.maps.onRendered(function(){
   //map code here
 });

Also you don't need the google.maps.event.addDomListene here, you can do it more like this.

//appName/client/helpers.

initMap = function(){
    var map;
    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

//appName/client/views/map/map.js

Template.maps.onRendered(function(){
       initMap
     });

But the code its ok. check this junk DEMO

UPDATE

This is how the html should look.

<head>
    <title>Google Maps App</title>
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDG1mocxosoC9cq-ucFO3vdZCcUxyKa6B4&sensor=true">
    </script>  
</head>
  <body>
    {{> maps}}
  </body>
<template name="maps">
<div id="map-canvas"></div>
 </template>

And the Javascript.

  Template.maps.onRendered(function(){
     initMap();
    })
initMap = function(){
    var map;
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

Upvotes: 2

Related Questions