{"id":5012,"date":"2014-04-26T15:38:11","date_gmt":"2014-04-26T15:38:11","guid":{"rendered":"http:\/\/www.gopiplus.com\/work\/?p=5012"},"modified":"2021-10-23T15:23:12","modified_gmt":"2021-10-23T15:23:12","slug":"google-map-with-fancybox-popup-wordpress-plugin","status":"publish","type":"post","link":"http:\/\/www.gopiplus.com\/work\/2014\/04\/26\/google-map-with-fancybox-popup-wordpress-plugin\/","title":{"rendered":"Google Map With FancyBox popup WordPress plugin"},"content":{"rendered":"\n<p>Google Map With FancyBox Popup plugin allows you to add a Google Map into the popup window. This is a great plugin to display your business location in a Google map or, just your personal address in Google Map. This plugin uses the jQuery implementation of FancyBox to open the popup window. The Popup window will open by clicking the location address. checkout the live demo for more information.<\/p>\n\n\n<div class=\"ads-row\">\n\t<div class=\"ads-column1\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<!-- Large Rectancle Center page -->\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t\t data-ad-slot=\"0362029595\"><\/ins>\n\t\t<script>\n\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/div>\n\t<div class=\"ads-column2\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<!-- gopiplus.org Main -->\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t\t data-ad-slot=\"7521653079\"><\/ins>\n\t\t<script>\n\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Google map in popup window.<\/li><li>Responsive. Thus, supports mobile window.<\/li><li>Easily controllable backend. Thats is, admin page for configuration.<\/li><li>Support for localization. So, multilingual support.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Plugin <strong>live demo<\/strong> available in this page. You may also be interested in <a href=\"http:\/\/www.gopiplus.com\/work\/2013\/08\/08\/popup-with-fancybox-wordpress-plugin\/\">Popup with fancybox<\/a> WordPress plugin.<\/p><\/blockquote>\n\n\n<div class=\"livedemo\">\n\t<link rel='stylesheet' href='http:\/\/www.gopiplus.com\/extensions\/my-plugin\/demo\/jquery.fancybox.min.css' type='text\/css' \/>\n\t<script src=\"http:\/\/www.gopiplus.com\/extensions\/my-plugin\/demo\/jquery.fancybox.min.js\" type=\"text\/javascript\"><\/script>\n\t\n\t<h2>Live demo 1<\/h2>\n\t\n\t<a google-map-fb-popup1 data-type=\"iframe\" data-src=\"http:\/\/maps.google.com\/?output=embed&amp;f=q&amp;q=Singapore flyer&amp;ll=1.2892783,103.86313889999997&amp;layer=t&amp;hq=Singapore flyer&amp;t=m&amp;z=15&amp;\" title=\"Now you are seeing Singapore Flyer\" href=\"javascript:;\">\n\t\tClick here to see Singapore Flyer Google Map\n\t<\/a>\n\t\n\t<h2>Live demo 2<\/h2>\n\t\n\t<a google-map-fb-popup2 data-type=\"iframe\" data-src=\"http:\/\/maps.google.com\/?output=embed&amp;f=q&amp;q=The White House Washington, DC, United States&amp;ll=38.8976763,-77.03652979999998&amp;layer=t&amp;hq=The White House Washington, DC, United States&amp;t=m&amp;z=15&amp;\" title=\"The White House Pennsylvania Ave NW, Washington, DC, United States\" href=\"javascript:;\">\n\t\tThe White House Washington, DC, United States\n\t<\/a>\n   \n\t<script type=\"text\/javascript\"> \n\tjQuery(document).ready(function() { \n\t\tjQuery(\"[google-map-fb-popup2]\").fancybox({ \n\t\t\tiframe : { css : { width : '75%', height : '60%', } } \n\t\t});\n\t}); \n\t\n\tjQuery(document).ready(function() { \n\t\tjQuery(\"[google-map-fb-popup1]\").fancybox({ \n\t\t\tiframe : { css : { width : '80%', height : '80%', } } \n\t\t});\n\t}); \n\t<\/script> \n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Installation instruction<\/h2>\n\n\n\n<p>First, download the plugin ZIP file <strong>google-map-with-fancybox-popup.zip<\/strong> from the <a href=\"http:\/\/www.gopiplus.com\/work\/2014\/04\/26\/google-map-with-fancybox-popup-wordpress-plugin-download-link\/\">download<\/a> location.<\/p>\n\n\n\n<p>Next, sign in to your WordPress dashboard. Navigate to the <strong>Plugins<\/strong> menu. And click <strong>Add New<\/strong> menu to upload the downloaded ZIP file. Select the <strong>Upload Plugin<\/strong> button. Upload the available ZIP file and click <strong>Install Now<\/strong> button. Finally, click Activate plugin button to activate the plugin. Next, Go to the plugin admin page to change the default settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configuration option<\/h2>\n\n\n\n<p><strong>How to add Google Map to<\/strong> a <strong>specific page\/post?<\/strong><\/p>\n\n\n\n<p>Using the plugin shortcode you can add the Google Map in specific posts or pages. Please find the shortcode below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;google-map-fb-popup id=\"1\"]<\/code><\/pre>\n\n\n\n<p>You have to set your Map ID in the id parameter. To view your Map ID go to your Dashboard >> Settings >> Google Map. Here you will get the configuration options.<\/p>\n\n\n\n<p><strong>How to add Google Map in the widget?<\/strong><\/p>\n\n\n\n<p>This is the easiest way, First, go to the <strong>Appearance<\/strong> menu and click <strong>Widgets<\/strong>. Then, click the &#8216;Plus&#8217; icon on the page to bring up the widget block menu. Finally, search the widget <strong>Google Map With FancyBox<\/strong> and drag and drop to your widget section. Otherwise, you can double-click to add the widget.<\/p>\n\n\n\n<p><strong>How to add Google Map PHP file?<\/strong><\/p>\n\n\n\n<p>Copy and paste the below PHP code to your desired template location (in PHP file) to show the plugin on the theme. It allows you to embed the shortcode anywhere you want in the file. of course, you have to activate the plugin. You have to set your Map ID in the <strong>id <\/strong>parameter. To view your Map ID go to your Dashboard, Settings, Google Map page.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo do_shortcode( '&#091;google-map-fb-popup id=\"1\"]' ); ?><\/code><\/pre>\n\n\n<div class=\"ads-row\">\n\t<div class=\"ads-column0\">\n\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t<!-- Above Comment -->\n\t<ins class=\"adsbygoogle\"\n\t\t style=\"display:inline-block;width:336px;height:280px\"\n\t\t data-ad-client=\"ca-pub-6676019656533652\"\n\t\t data-ad-slot=\"2359628415\"><\/ins>\n\t<script>\n\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t<\/script>\n\t<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n\n<p><strong>Q1. How to install the plugin into my WordPress blog?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Download the plugin google-map-with-fancybox-popup.zip from <strong><a href=\"http:\/\/www.gopiplus.com\/work\/2014\/04\/26\/google-map-with-fancybox-popup-wordpress-plugin-download-link\/\">download<\/a><\/strong> location.<\/li><li>Go to <strong>Add New<\/strong> menu under <strong>Plugins<\/strong> menu in your WordPress admin.<\/li><li>Select upload link (top link menu).<\/li><li>Upload the available email-posts-to-subscribers.zip file and click <strong>Install Now<\/strong><\/li><li>Finally click activate plug-in link to activate the plug-in.<\/li><\/ul>\n\n\n\n<p><strong>Q2. How to add and edit Google Map?<\/strong><\/p>\n\n\n\n<p>Go to Dashboard ==&gt; Settings ==&gt; Google Map<\/p>\n\n\n\n<p>On this page, we have options to add, edit, delete Google Maps to this plugin. Also, you can manage the popup window size on this page.<\/p>\n\n\n\n<p><strong>Q3. How to change the popup window size?<\/strong><\/p>\n\n\n\n<p>Go to Dashboard ==&gt; Settings ==&gt; Google Map ==&gt; Add New<\/p>\n\n\n\n<p>On this page, you have a separate dropdown box to select the popup window size. Since this plugin supports responsive you have selected the size in percentage.<\/p>\n\n\n\n<p><strong>Q4. How to change the popup overlay color?<\/strong><\/p>\n\n\n\n<p>You don&#8217;t have an admin option for this property. but you can easily change the overlay color by updating the PHP file gmwfb-loadmap.php. Open this PHP file and go to line 146 and change the color code for overlay color property.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Admin page<\/h2>\n\n\n\n<p>In your WordPress administrator section go to the <strong>Settings <\/strong>menu and select the <strong>Google Map<\/strong> menu to configure this plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.gopiplus.com\/work\/my-plugin\/adminscreen\/google-map-with-fancybox.png\" alt=\"Google Map With FancyBox popup WordPress plugin\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin official page<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/2014\/04\/26\/google-map-with-fancybox-popup-wordpress-plugin\/\">http:\/\/www.gopiplus.com\/work\/2014\/04\/26\/google-map-with-fancybox-popup-wordpress-plugin\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Download location<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/2014\/04\/26\/google-map-with-fancybox-popup-wordpress-plugin-download-link\/\">http:\/\/www.gopiplus.com\/work\/2014\/04\/26\/google-map-with-fancybox-popup-wordpress-plugin-download-link\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video tutorial<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.gopiplus.com\/work\/2014\/04\/26\/google-map-with-fancybox-popup-wordpress-plugin-video-tutorial\/\">http:\/\/www.gopiplus.com\/work\/2014\/04\/26\/google-map-with-fancybox-popup-wordpress-plugin-video-tutorial\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress page<\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/google-map-with-fancybox-popup\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/wordpress.org\/plugins\/google-map-with-fancybox-popup\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This plugin allows you to add a Google Map into popup window. This is a great plugin to display your business location in a Google map or, just your personal address in Google Map. This plugin uses the jquery implementation of FancyBox to open popup window.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[204,228,6,112,5],"class_list":["post-5012","post","type-post","status-publish","format-standard","hentry","category-word-press-plug-in","tag-fancybox","tag-map","tag-plugin","tag-popup","tag-wordpress"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/5012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/comments?post=5012"}],"version-history":[{"count":0,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/posts\/5012\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/media?parent=5012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/categories?post=5012"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gopiplus.com\/work\/wp-json\/wp\/v2\/tags?post=5012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}