Polymer Google Map

by Online Tutorials Library July 14, 2022

Polymer Google Map

The polymer google map element is used to display a google map on the website.

  <google-map latitude = “17.77591” longitude = “-524.41144” api-key = “4586”></google-map>  

You can use googlemap-directions to show the map directions between a startAddress and endAddress.

  <google-map-directions map=”[[map]]”     start-address = “United States” end-address = “Mountain View”>  </google-map-directions>  

Run the following command to install google-map element in your project directory. After that you can use this element in your application:

Example:

Create an index.html file and add the following code in it to see the usage of google-mapelement in Polymer.js.

  <!DOCTYPE html>  <html>  <head>  <title>google-map</title>  <meta name = “viewport” content = “width = device-width, initial-scale = 1”>  <script src = “bower_components/webcomponentsjs/webcomponents-lite.min.js”></script>  <link rel = “import”           href=”https://rawgit.com/Download/polymer-cdn/master/lib/google-map/google-map.html”>  <style>           google-map {              height: 250px;              width: 380px;              border: 2px solid black;              margin: 25px 20px 20px 20px;           }  </style>  </head>    <body>  <h2>Google-Map Example</h2>  <demo-map></demo-map>  <dom-module id = “demo-map”>  <template>  <google-map map = “{{map}}” latitude = “37.779” longitude = “-122.3892”>  </google-map>  </template>  </dom-module>    <script>           Polymer ({              is: “demo-map”, properties: {                 Address: {                    type: String, value: “San Francisco”                 }, map: “demo-map”              }           });  </script>  </body>  </html>  

Next TopicGoogle Signin

Polymer Google Map

Polymer Google Map

Example:

Affinity Photo Vs. Photoshop

Basic Python for Java Developers

You may also like