search

dburles / meteor-google-maps

🗺 Meteor package for the Google Maps Javascript API v3
https://atmospherejs.com/dburles/google-maps
MIT License
196 stars 48 forks source link

Template with googleMap inside is rendered twice #136

Closed naho2081 closed 7 years ago

naho2081 commented 7 years ago

Template which contains googleMap container is always rendered twice. How to stop this behavior?

googleMap is inserted as follows:

HTML

<template name="mapContainer">
    <div class="map">
       {{> googleMap name="googleMap" options=googleMapOptions}}
    </div>
</template>

JS (CoffeeScript)

Template.mapContainer.helpers
    googleMapOptions: ->
        if (GoogleMaps.loaded())
            center: new google.maps.LatLng(@x, @y)
            zoom: 10

Template.mapContainer.rendered = ->
    GoogleMaps.load
        key: "secret_key"
    GoogleMaps.ready 'googleMap', (map) ->
        marker = new (google.maps.Marker)(
            position: map.options.center
            map: map.instance)
dburles commented 7 years ago

Hey @naho2081 need a bit more info! what do you mean by rendered twice? the callback fires twice?

naho2081 commented 7 years ago

Hi @dburles . Yes, you can check it out here. And here is how same page but without GoogleMap is rendered.

dburles commented 7 years ago

@naho2081 what is the problem you're seeing as a result of the template rendering twice?

naho2081 commented 7 years ago

@dburles screen is flashing twice while page is loaded and user may notice that

dburles commented 7 years ago

Are you able to reproduce the same problem in an isolated application? i.e the simple example app

dburles commented 7 years ago

I do see the flash on the link you provided

naho2081 commented 7 years ago

I just fixed the issue. The reason was that googleMap inserted link to google stylesheet into the <head> causing page reload.

In my case link was link(rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700")

I have manually added this link into the head of the template and issue was fixed.

Probably this could be somehow considered in further plugin versions.

Thanks for help @dburles !

dburles commented 7 years ago

Strange, it's not something I've noticed elsewhere, if you're able to reproduce it in an isolated application that might narrow down the issue, I feel like the fact that your page content flashes something else might be going on there!

naho2081 commented 7 years ago

@dburles see my comment above.

dburles commented 7 years ago

Oh yeah but I mean like the fact that it's affecting the existing fonts on your page in particular. I haven't seen that happen on other sites that use this maps package. But glad you found a solution!

naho2081 commented 7 years ago

Yes, those Google fonts slightly differ from used on the page. That's why maybe googleMap downloads fonts it wants to use :)