CODEWITHSUNDEEP
google-mapspolymerpolymer-1.0
AVEbrahimi
AVEbrahimi

Reputation: 19164

Error in displaying custom Google Map in Polymer

I displayed simple Google Map successfully :

<google-map
    latitude="30.283"
    longitude="57.083"
    zoom="12"
    language="fa"
    disable-default-ui
    >

But when I try to add position style, it doesn't apply it and zoom control disappears, I guess the problem is in the way I add additional-map-options, but I don't know how to fix it:

<google-map
    latitude="30.283"
    longitude="57.083"
    zoom="12"
    language="fa"
    disable-default-ui
    additional-map-options='{"zoomControl" : "true",
    "zoomControlOptions" : {"style" : "google.maps.ZoomControlStyle.SMALL", 
    "position" : "google.maps.ControlPosition.BOTTOM_RIGHT"}
  }'>

Upvotes: 1

Views: 140

Answers (1)

kaho
kaho

Reputation: 4784

Huh... it turns out that polymer does not know what is google.maps.ControlPosition.BOTTOM_RIGHT... but it knows about the int 9...

<google-map latitude="30.283" longitude="57.083" zoom="12" language="fa" additional-map-options='{ "zoomControl" : "true", "zoomControlOptions": {
"style": "google.maps.ZoomControlStyle.SMALL", 
"position": 9
}}' disable-default-ui></google-map>

This is working, but I don't know why. somehow the number 9 works even console.log(google.maps.ControlPosition.BOTTOM_RIGHT) gives me 12...

Look at this demo:
http://jsfiddle.net/4gq1jv3y/1/

Upvotes: 1

Related Questions