2015-01-31 3 views
1

Мне нужно знать, как показывать карты Google в Meteor.I сделал один образец, как показано ниже.Показать проблему с Google Map в Метеор?

Html код:

<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 Код:

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 
    }); 
} 

Проблема не показывает карту, когда я запускать мои code.I не любая идея о this.So пожалуйста, предложите мне что делать для этого ?.

ответ

1
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; 

Теперь на визуализированной функции.

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

Также убедитесь, что у вас есть .css-файл.

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

И он должен работает, проверить его и скажите мне, если работает

+0

Даже не получая map.So, что я могу сделать @ Ethaan – user2344293

+0

пришел [сюда] (Http:?. //chat.stackoverflow. ком/комнаты/70017/Google-карта) – Ethaan

Смежные вопросы