{"id":11914,"date":"2016-12-28T12:15:10","date_gmt":"2016-12-28T12:15:10","guid":{"rendered":"http:\/\/nativewptheme.net\/support\/?p=11914"},"modified":"2017-02-10T07:54:22","modified_gmt":"2017-02-10T07:54:22","slug":"google-map","status":"publish","type":"post","link":"https:\/\/nativewptheme.net\/support\/wpbakery\/google-map","title":{"rendered":"Google Map"},"content":{"rendered":"

[vc_row][vc_column css=”.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}” col_shadow=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)” col_shadow_hover=”box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)”][dfd_spacer screen_wide_spacer_size=”30″ screen_normal_resolution=”1024″ screen_tablet_resolution=”800″ screen_mobile_resolution=”480″][vc_column_text]<\/p>\n

Select among 14 appear effects; Google map module allows you to show the multiple locations on one map.<\/p>\n

You may check various map examples on this page<\/a>.<\/p>\n

For proper map displaying, make sure that the Google Map API Key is added to\u00a0Theme options<\/del> General options<\/del> Main settings<\/del>\u00a0Custom Google API key.<\/del><\/p>\n

More details can be found in this post.<\/a><\/p>\n

Watch the video tutorial on Google Map module creation<\/a> for more details.<\/h5>\n

[\/vc_column_text][dfd_spacer screen_wide_spacer_size=”30″ screen_normal_resolution=”1024″ screen_tablet_resolution=”800″ screen_mobile_resolution=”480″][dfd_tta_tabs border_radius=”4″ alignment=”left” active_section=”1″ active_tab_background=”#3b55e6″ tab_hover_text_color=”#3b55e6″ tab_active_color_text=”#ffffff” border_color_active=”#3b55e6″][vc_tta_section title=”General settings” tab_id=”1486545572585-2437c7e1-5371″][vc_column_text]<\/p>\n

General styles<\/h3>\n

<\/p>\n

    \n
  • Style<\/strong> – select among 14 appear effects from the available list.<\/li>\n<\/ul>\n
    Extra features<\/h5>\n
      \n
    • Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n
    • Custom CSS class<\/strong> \u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type custom-style<\/strong> class and then go to Theme options<\/del>\u00a0General options<\/del>\u00a0Custom CSS\/JS<\/del> Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n

      [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Locations settings” tab_id=”1486545572829-e1c1304c-ee12″][vc_column_text]<\/p>\n

      Locations<\/h3>\n

      <\/p>\n

      In this section, you can customize the map locations.<\/h6>\n
      By clicking on the\u00a0arrow down icon you can reveal the whole section to adjust it to your needs. Here you are also able to duplicate the map locations, change\u00a0their order (simply drag-n-drop the blocks) and delete the unnecessary map locations as well.<\/h6>\n
        \n
      • Marker style<\/strong> –\u00a0select the marker style for your map.\n
          \n
        • Marker thumbnail\u00a0<\/strong>– the marker image is displayed on the map.\n
            \n
          • Tooltip visibility<\/strong> – select the tooltip visibility section for the map. It can be hidden<\/strong>, shown on click<\/strong> or always visible<\/strong>.<\/li>\n<\/ul>\n<\/li>\n
          • Info window<\/strong> – select this style to display the information section on the\u00a0page.<\/li>\n<\/ul>\n<\/li>\n
          • Location<\/strong> – type the address which will be shown on the map.<\/li>\n
          • Title<\/strong> – enter the title for your map.<\/li>\n
          • Content<\/strong> – enter the description of the map in this field.<\/li>\n<\/ul>\n

            [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Settings” tab_id=”1486545573068-02c117a6-3d50″][vc_column_text]<\/p>\n

            Settings<\/h3>\n

            <\/p>\n

              \n
            • Auto pan<\/strong> – set it to Enable<\/strong> to display several locations at once.<\/li>\n
            • Touch on mobile device<\/strong> – set it to Enable<\/strong> to navigate the map on touch devices.<\/li>\n
            • Zoom in\/out<\/strong> – set it to Enable<\/strong> to activate zoom for your map.<\/li>\n
            • Map height<\/strong> – set the height in px for your map.<\/li>\n<\/ul>\n
              Offset for the center of the map<\/h5>\n
                \n
              • From West to East<\/strong> – set the offset for the map displaying in the direction from West to East.<\/li>\n
              • From North to South<\/strong> – set the offset for the map displaying in the direction from North to South.<\/li>\n<\/ul>\n

                [\/vc_column_text][\/vc_tta_section][vc_tta_section title=”Tooltip typography settings” tab_id=”1486545573311-423c930f-c6e7″][vc_column_text]<\/p>\n

                <\/h3>\n

                Tooltip typography settings<\/h3>\n

                <\/p>\n

                The default settings are inherited from the files and are as follows: title inherited the settings for H6 element tag, and has line height set to 30px and color to #fff by default.<\/p>\n

                The content typography settings are inherited from Theme options<\/del>Typography\/Fonts<\/del>\u00a0Text typography<\/del>\u00a0Default text Typography<\/del> with color set tp #fff by default.<\/p>\n

                  \n
                • Font size<\/strong> \u2013 set the font size you need to use in the text in the tooltip.<\/li>\n
                • Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n
                • Line-height<\/strong> \u2013\u00a0set the needed distance between lines.<\/li>\n
                • Tooltip text color<\/strong> \u2013 set the color of the font. The default value is #fff.<\/li>\n
                • Tooltip background color<\/strong> – set the background color for the tooltip (info window). The default value is inherited from\u00a0Theme Options<\/del>Styling Options<\/del>Main site color<\/del>.<\/li>\n
                • Font style<\/strong> \u2013 select the font weight and style (bold, italic).<\/li>\n
                • Custom font family<\/strong> \u2013 set it to Enable<\/strong> to use custom Google font.\n
                    \n
                  • Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n
                  • Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the text in the tooltip.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                    [\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"

                    Select among 14 appear effects; Google map module allows you to show the multiple locations on one map.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[23,22,33],"_links":{"self":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11914"}],"collection":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/comments?post=11914"}],"version-history":[{"count":4,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11914\/revisions"}],"predecessor-version":[{"id":11920,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11914\/revisions\/11920"}],"wp:attachment":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/media?parent=11914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/categories?post=11914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/tags?post=11914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}