Manually Adding Google Maps<\/h2>\n\n\n\nEmbedding the map<\/h3>\n\n\n\n
Adding and embedding a map is how you will get the actual map to display on a page, and it only takes a couple of simple steps. Manually adding the map is the way to go if you only have one (or just a few) to add to your site.<\/p>\n\n\n\n
1. Go to Google Maps<\/a> and enter the location.<\/p>\n\n\n\n 2. Click the search button.<\/p>\n\n\n\n 3. Choose “Share” (it will be the option on the right).<\/p>\n\n\n\n 4. Copy the Embed code, making sure it is all selected before copying.<\/p>\n\n\n\n In order to add the map, you will need to edit a Post or Page. A great spot to add your map is the contact page or any post that talks about a specific location that your users might need to find.<\/p>\n\n\n\n 5. Go to Posts > Add or Pages > Add.<\/p>\n\n\n\n 6. Open the HTML editor (in Text mode) and paste the Embed code wherever you\u2019d like the map to appear.<\/p>\n\n\n\n 7. Choose Save Draft, Update, or Publish depending on your preference.<\/p>\n\n\n\n If you view the page, you should see your map. If the map isn\u2019t showing up, be sure to double check that the entire embed code was copied and pasted into the editor.<\/p>\n\n\n\n This is optional when working with your map, but a great idea to provide the greatest user experience for you viewers. Users are typically on the go when they\u2019re looking for directions, so this responsive map will be helpful when they are using their mobile device.<\/p>\n\n\n\n You may have noticed there was a width and height measurement in the Add the CSS<\/strong><\/p>\n\n\n\n Adding these CSS properties to your stylesheet is the last thing that has to be done. Of course, you may want to slightly adjust things depending on your page design.<\/p>\n\n\n\n And that\u2019s it! With those simple code additions, you\u2019ll have a responsive map on your site. Not sure if you want to go the DIY route? Now let\u2019s go over a simple plugin solution.<\/p>\n\n\n\n Check out all the code with this CodePen<\/a>!<\/strong><\/p>\n\n\n\n Manually embedding the map is a good approach when there are just a few maps, but what happens if you have to add a lot? For example, a business site might have multiple locations that need to be displayed. Adding each map individually might get a bit tedious. This is where a plugin comes in handy. There are plenty of great options to choose from, but MapPress Easy Google Maps<\/a> is an option worth checking out (and what I\u2019ll use in this tutorial).<\/p>\n\n\n\n To start, you will need to install and activate MapPress Easy Google Maps on your WordPress site.<\/p>\n\n\n\n You\u2019ll notice the plugin settings menu in the admin sidebar, and you\u2019ll also notice that there are lots of options that come with MapPress, making it a flexible solution for any site. Things like map type, zoom, border, alignment, controls, etc. can easily be adjusted here.<\/p>\n\n\n\n Again, in order to add the map, you will need to edit a Post or Page.<\/p>\n\n\n\n 1. Go to Posts > Add or Pages > Add.<\/p>\n\n\n\n 2. Scroll down to the MapPress section on the edit screen and choose “New Map”.<\/p>\n\n\n\n 3. You\u2019ll see the MapPress editor where you can enter an address for your map. Even if you don\u2019t have the exact address, try entering the name of the location and it should find it for you. If you\u2019d like to share your location, the \u201cMy Location\u201d link will allow the plugin to automatically detect your location.<\/p>\n\n\n\n 4. Add a title to your map and choose the map size.<\/p>\n\n\n\n Note: The map width can be specified as a percentage in the map editor or the shortcode, making it mobile friendly. The height typically remains fixed. If you prefer to add the height and width to the shortcode, it would look something like this: 5. Click on “Save” and then \u201cInsert into Post.\u201d The map will now be in your post.<\/p>\n\n\n\n 6. Update or publish your post to see the map.<\/p>\n\n\n\n These tips and tricks should give some direction and insight into Google Maps integration for your website. Whether the maps are added manually or with a plugin, having a map readily available to your users will help them arrive at the correct place.<\/p>\n\n\n\n![\"responsive-google-map-wordpress-search-location\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/05\/responsive-google-map-wordpress-search-location.png\")
<\/figure>\n\n\n\n![\"responsive-google-map-wordpress-share-map\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/05\/responsive-google-map-wordpress-share-map.png\")
<\/figure>\n\n\n\n![\"responsive-google-map-wordpress-embed-map-snippet\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/05\/responsive-google-map-wordpress-embed-map-snippet.png\")
<\/figure>\n\n\n\nAdding the Map in WordPress<\/h3>\n\n\n\n
![\"responsive-google-map-wordpress-new-page\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/05\/responsive-google-map-wordpress-new-page.png\")
<\/figure>\n\n\n\n![\"responsive-google-map-wordpress-iframe-map\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/05\/responsive-google-map-wordpress-iframe-map.png\")
<\/figure>\n\n\n\n![\"responsive-google-map-wordpress-embed-map\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/05\/responsive-google-map-wordpress-embed-map.png\")
<\/figure>\n\n\n\nMaking the Map Responsive<\/h3>\n\n\n\n
iframe<\/code> that you pasted into the editor \u2013 you\u2019ll need to do some adjusting to make the map responsive. Some simple CSS will do the trick; all it will take is an extra div<\/code> tag around the embed code. Use the class responsive-map<\/code> so that your code now looks like this:<\/p>\n\n\n\n[html]\n\n&amp;amp;amp;lt;div class=&quot;responsive-map&quot;&amp;amp;amp;gt;\n &amp;amp;amp;lt;iframe src=&quot;https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3510.126963167523!2d-81.5660680494897!3d28.385232982430246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88dd7ee634caa5f7%3A0xa71e391fd01cf1a0!2sWalt+Disney+World+Resort!5e0!3m2!1sen!2sus!4v1463933469006&quot; width=&quot;600&quot; height=&quot;450&quot; frameborder=&quot;0&quot; style=&quot;border:0&quot; allowfullscreen&amp;amp;amp;gt;&amp;amp;amp;lt;\/iframe&amp;amp;amp;gt;\n&amp;amp;amp;lt;\/div&amp;amp;amp;gt;\n\n[\/html]<\/code><\/pre>\n\n\n\n[css]\n\n.responsive-map{\noverflow:hidden;\npadding-bottom:56.25%;\nposition:relative;\nheight:0;\n}\n.responsive-map iframe{\nleft:0;\ntop:0;\nheight:100%;\nwidth:100%;\nposition:absolute;\n}\n\n[\/css]<\/code><\/pre>\n\n\n\n![\"layout](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/05\/how-to-add-a-responsive-google-map-in-WordPress-9740.jpg\")
<\/figure>\n\n\n\nAdding Maps With the MapPress Easy Google Plugin<\/h2>\n\n\n\n
Plugin Settings<\/h3>\n\n\n\n
Adding the Map<\/h3>\n\n\n\n
<\/figure>\n\n\n\n![\"responsive-google-map-wordpress-new-map\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/05\/responsive-google-map-wordpress-new-map.png\")
<\/figure>\n\n\n\n![\"responsive-google-map-wordpress-mappress\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/05\/responsive-google-map-wordpress-mappress.png\")
<\/figure>\n\n\n\n[mappress mapid=\"X\" width=\"100%\" height=\"400\"]<\/code><\/p>\n\n\n\n![\"responsive-google-map-wordpress-map-shortcode\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/05\/responsive-google-map-wordpress-map-shortcode.png\")
<\/figure>\n\n\n\n
\n\n\n\nTest it on Local!<\/a><\/h2>\n\n\n\n
![\"\"](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2018\/08\/ways-to-use-local-dev-environment-feature-lg-1-784x218.png\")
<\/figure>\n\n\n\n