CODEWITHSUNDEEP
htmlgoogle-mapsgeolocationpolymer
Ottenira
Ottenira

Reputation: 97

Not showing location on polymer (working with Google Maps)

i want to take the location of a device in a web and then showing it this on the Google map. The script is getting the coordinates correctly, but when I want to use it in my template, it is not working.

This my script and is getting my coordinates correctly:

<script>

Polymer({

  latitude: null,
  longitude: null,

  ready: function(){
    this.getLocation();
  },

  getLocation: function() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.showPosition);
    } else { 
    }
  },

  showPosition: function(position) {
    console.log(position);
      this.latitude = position.coords.latitude;
      this.longitude = position.coords.longitude;
      console.log(this.latitude+' / '+this.longitude);
  },

});
</script>

But in my template when I use this line doesn't work and I have no idea why.

  <google-map id="google_map" latitude="{{latitude}}" longitude="{{longitude}}"></google-map>

If I change longitude parameters {{latitude}} and {{longitude}} by {{position}} gets the sum of the latitude and longitude in each field.

Any idea? Thanks!

PS: This is a part of the code. Obviously I've got the elements of google maps imported in Polymer.

Upvotes: 2

Views: 1206

Answers (1)

Olivier.Roger
Olivier.Roger

Reputation: 4249

Using the geolocation element resolve this issue for me is an elegant way, using web-components.

You can find how to use it in the demo page.

Adding it to your project is easy with bower:

bower install ebidel/geo-location --save

In your code you just have to add the HTML import and use the component:

<link rel="import" href="../bower_components/geo-location/geo-location.html">

<geo-location watch-pos latitude="{{ latitude }}" longitude="{{ longitude }}"></geo-location>

This web-component expose the user location. You can then use {{ latitude }} and {{ longitude }} to access the coordinates. The nice stuff is that the location is updated in real-time if you move with a mobile device (see demo page execution).

Upvotes: 1

Related Questions