{"id":2610,"date":"2019-11-18T15:00:52","date_gmt":"2019-11-18T13:00:52","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=2610"},"modified":"2022-12-06T19:37:33","modified_gmt":"2022-12-06T18:37:33","slug":"how-to-style-wordpress-google-maps","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-style-wordpress-google-maps\/","title":{"rendered":"How to Style Google Maps in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]You \u2013 or the web designer you hired \u2013 have worked so hard to make everything on your brand new site just perfect. Every single one of the elements has been taken care of. Font family, font sizes, main color, other colors, empty spaces, images, illustrations\u2026everything looks perfect. But, <strong>what about the maps<\/strong>?[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Maps are there to <strong>make it easier for visitors to locate your business<\/strong>. Their functional part is obvious, but what about the visual impression? Google Maps are almost everyone\u2019s choice when it comes to displaying location. And sometimes their default look will fit your website style perfectly. But in many cases it will have to be adjusted a bit in order to <strong>blend in and work well with the rest of the design<\/strong>. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are a couple of different ways to customize Google Maps in WordPress. They are all quite simple and don\u2019t require any particular technical knowledge. Read on and find which one works the best for you. [\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-your-maps-using-plugin\">Styling Your Maps Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#customizing-google-maps-in-qode-interactive-themes\">Customizing Google Maps in Qode Interactive Themes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-and-styling-google-maps-using-qi-blocks-for-gutenberg\">Adding and Styling Google Maps Using Qi Blocks for Gutenberg<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can also check out our handy video tutorial on setting up Google maps using any of the Qode themes.[\/vc_column_text][vc_empty_space height=&#8221;41px&#8221;][vc_column_text]<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/FoaoOyqs5Go\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-your-maps-using-plugin\"><\/a>Styling Your Maps Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]One of the simplest ways to customize your Google maps is to use one of the plugins created just for this purpose. Our choice is <a href=\"https:\/\/wordpress.org\/plugins\/snazzy-maps\/\" target=\"_blank\" rel=\"noopener noreferrer\">Snazzy Maps<\/a>, a lightweight and simple plugin with hundreds of free styles.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Start by going to <strong><em>Plugins &gt; Add New<\/em><\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Widgets-vs-Plugins.jpg\" class=\"attachment-full size-full\" alt=\"Add new plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Widgets-vs-Plugins.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Widgets-vs-Plugins-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Widgets-vs-Plugins-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The plugin we are looking for is called <strong><em>Snazzy Maps<\/em><\/strong> so type that name into the search form. When you find it, click on the <em>Install<\/em> button and then activate it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-2.jpg\" class=\"attachment-full size-full\" alt=\"Snazzy Maps plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-2.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-2-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-2-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now that the plugin is installed and activated, you can reach it under <strong><em>Appearance &gt; Snazzy Maps<\/em><\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-3.jpg\" class=\"attachment-full size-full\" alt=\"Snazzy Maps plugin settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-3.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-3-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-3-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In order to explore and choose styles for your website, you need to <a href=\"https:\/\/snazzymaps.com\/account\/register?returnUrl=%2Faccount%2Fdeveloper\" target=\"_blank\" rel=\"noopener noreferrer\">create a Snazzy Maps account<\/a> in order to get an API Key.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When you have successfully created an account, navigate to your profile page and in the <strong>Developer<\/strong> section click on the <em><strong>Generate API Key<\/strong><\/em> button to get the code.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-5.jpg\" class=\"attachment-full size-full\" alt=\"Sign up for an API Key\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-5.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-5-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-5-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, in the Snazzy Maps Settings, enter your API Key and hit the <strong><em>Save<\/em><\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-4.jpg\" class=\"attachment-full size-full\" alt=\"Save Changes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-4.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-4-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-4-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You are now ready to explore styles and customize your maps. Hop back to the <strong><em>Explore<\/em><\/strong> tab. You\u2019ll find plenty of map styles over there. You can use the recommended ones, or create your own unique styles. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When you find a map style that works perfectly for your website, click on the <strong><em>Save Style<\/em><\/strong> button, so that you can use it later.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-6.jpg\" class=\"attachment-full size-full\" alt=\"Find a map style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-6.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-6-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-6-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And, to create your own custom style, go to your Snazzy Maps account, and click on <strong><em>Create a Style<\/em><\/strong> in the menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-7.jpg\" class=\"attachment-full size-full\" alt=\"Create a Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-7.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-7-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-7-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will now have a chance to create your own style with the colors you set and the type you choose to customize. When you feel your style is ready, hit the green <strong><em>Apply Style<\/em><\/strong> button, give your custom style a unique name, and save it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-8.jpg\" class=\"attachment-full size-full\" alt=\"Apply Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-8.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-8-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-8-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To find your custom styles in the admin of your site, choose <strong><em>My Styles<\/em><\/strong> from the dropdown in the Snazzy Maps <strong><em>Explore<\/em><\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-9.jpg\" class=\"attachment-full size-full\" alt=\"My Styles\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-9.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-9-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-9-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Click on <strong><em>Enable<\/em><\/strong> and WordPress will apply the style directly to the Google maps on your website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-10.jpg\" class=\"attachment-full size-full\" alt=\"Apply the style directly to the Google maps\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-10.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-10-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-10-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"customizing-google-maps-in-qode-interactive-themes\"><\/a>Customizing Google Maps in Qode Interactive Themes<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you are using one of Qode Interactive\u2019s <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">premium WordPress themes<\/a> that comes with a predesigned shortcode for Google maps, then half your work\u2019s been done for you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Depending on your theme, the shortcode will come with different customization options. For instance, some themes include the ability to add an overlay or to change the colors right there in shortcode settings, while others come with a form for inserting the Snazzy Maps code.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, our <a href=\"https:\/\/gluck.mikado-themes.com\/\" target=\"_blank\" rel=\"noopener\">WordPress theme Gluck<\/a> comes with a Google Maps shortcode that allows you to enable custom Snazzy Maps styles and contains a field for inserting code.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-11.jpg\" class=\"attachment-full size-full\" alt=\"Google Maps shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-11.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-11-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-11-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To get this code, you don\u2019t actually need to install the Snazzy Maps plugin. All you need to do is go to the <a href=\"https:\/\/snazzymaps.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Snazzy Maps website<\/a>, log in or create an account, create your own style, or choose from the existing ones, and copy its unique code.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To get the code, choose the <strong><em>View code<\/em><\/strong> section.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-12.jpg\" class=\"attachment-full size-full\" alt=\"Get the code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-12.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-12-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-12-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your unique code will appear on the left. Copy the entire code.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-13.jpg\" class=\"attachment-full size-full\" alt=\"Copy the entire code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-13.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-13-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/google-maps-img-13-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Insert your Snazzy Map code in the appropriate field in the shortcode, and the map on your page will look exactly as you styled it.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;top-picks-banner&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-and-styling-google-maps-using-qi-blocks-for-gutenberg\"><\/a>Adding and Styling Google Maps Using Qi Blocks for Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"399\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Blocks.jpg\" class=\"attachment-full size-full\" alt=\"Google Maps Blocks\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Blocks.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Blocks-300x124.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Blocks-768x316.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Blocks-620x255.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Qi Blocks for Gutenberg<\/a> is our collection of more than 80 exquisite blocks you can use to enhance your block editor experience. These blocks can help you do fantastic things in Gutenberg, such as creating progress bars, charts, and graphs, showcasing photos, and adding Google Maps to your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can rely on the <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/google-map\/\" target=\"_blank\" rel=\"noopener\">Google Map Gutenberg block<\/a> to get the map up and running on your website. It&#8217;s a block available with the Premium version of the plugin alone. We&#8217;ll show you how to use it to add and style Google maps on your plugin, so if you want to follow up, <strong>make sure you have the plugin installed and activated first<\/strong>. You can also watch our video tutorial on the same topic if that&#8217;s your preference.[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" style=\"border: 1px solid #ebebeb;\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/IISeNmFxG2w\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To get started, you first need to navigate to your website&#8217;s dashboard, and under <em>Qi Blocks &gt; Integration Page<\/em>, find the field where you&#8217;re supposed to enter a Google Maps API Key.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"619\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Integration-Page.jpg\" class=\"attachment-full size-full\" alt=\"Google Maps Block Integration Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Integration-Page.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Integration-Page-300x192.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Integration-Page-768x491.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Integration-Page-620x396.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To get that key, you&#8217;ll need to <a href=\"https:\/\/console.cloud.google.com\/projectcreate\" target=\"_blank\" rel=\"noopener\">set up a Google Cloud project<\/a>, <strong>but you&#8217;ll need to have a billing account set up, too<\/strong>, and you&#8217;ll need to enable Maps JavaScript API.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With the key in place, you can add the map block to any page or post of your liking. You&#8217;ll see it open up a map right away, and in the right-hand side menu,<strong> you&#8217;ll have the option to change the block&#8217;s content<\/strong>. This means you&#8217;ll be able to change the pin icon and add one or more addresses that should be shown on the map.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"408\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Google Maps Block Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Settings-300x126.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Settings-768x323.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Settings-620x261.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After choosing our pin icon and adding a single address, we were ready to proceed to the next step \u2013 styling the map. <strong>For that, we turned once again to the Snazzy Maps website<\/strong> for its nifty editor where you can create your own map, style it in any way you like, and then copy its code and paste it into the block.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We set the map height to 585px and the map zoom to 13. The remaining options let you enable map dragging, scrolling, street view, type control, and full screen. We changed nothing there.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"465\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Final.jpg\" class=\"attachment-full size-full\" alt=\"Google Maps Block Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Final-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Final-768x369.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/11\/Google-Maps-Block-Final-620x298.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should, of course, feel free to experiment and find the best combination of settings that suit your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Whether you opt for a plugin or use a theme with a built-in Google Maps shortcode to customize the way the maps will be displayed on your pages, what\u2019s important is \u2013 <strong>you don\u2019t have to settle for the default view<\/strong>. After investing a lot of time and effort into perfecting your website design, you really should make sure the maps fit the overall tone and atmosphere perfectly. Don\u2019t be afraid to play around with the styles. It\u2019s fun, easy and definitely worth your while. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Find out how to quickly and effortlessly style Google Maps on your WordPress website. It can take you a long way and only requires a few minutes of your time.<\/p>\n","protected":false},"author":3,"featured_media":2841,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,13],"class_list":["post-2610","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/2610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=2610"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/2610\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/2841"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=2610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=2610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=2610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}