This item is a Google map generator, easy and simple, for WordPress. The generated maps are responsive and styled and are generated using an intuitive shortcode. The plugin allows multiple markers on the same map and multiple maps in a page. A shortcode builder is included, together with 50 colorful map styles.

It's suitable for any type of WordPress website on which you want to put a map: photography, eCommerce, personal blog, company website, portfolio, venues, concerts, architecture, real estate, library, etc

This plugin is developed for WordPress single-site installation. It's not recommended for WordPress multi-site installations.

These are the main features of this plugin:

1. Shows address OR latitude/longitude
2. 100% responsive
3. Mobile-friendly
4. Retina support
5. Works in sidebars, posts, pages and custom post types
6. Works with Visual Composer
7. Multiple markers
8. Multiple maps in a page/post
9. Real time map preview
10. HTML popups
11. Search box
12. Clustering option
13. Show/Hide the points of interest
14. Custom link in the popups
15. 50 included colorful styles or a hue color
16. 10 included icons
17. Custom icons
18. Location button
19. Controls on/off
20. Directions link
21. Street views
22. W3C valid, does not break your W3C validation
23. Minified resources (JS, CSS) for faster loading
24. Translation ready.
25. Detailed documentation.

This is the folder structure in the plugin main folder:

The main folder is: responsive-maps-plugin; and these are the sub-folders and files:

1. documentation (plugin's documentation)
2. includes (contains the CSS styles, the scripts and the images)
3. languages (contains plugin translations files)
4. class-envato-market.php (file used for automated updates)
5. responsive-styled-google-maps-admin.php (plugin's admin form file)
6. responsive-styled-google-maps.php (plugin's main file)

These are the steps to install the plugin:

1. Download on your computer the ZIP file from codecanyon.net
2. Open your WP admin dashboard and go to Plugins -> Add New -> Upload the ZIP file from step 1.
3. Activate the plugin.
4. Open any page, post, custom post type or text widget and create your map with [res_map address="your_address"] shortcode.
5. To customize the map, add parameters like this: [res_map parameter1="value" parameter2="value"] or go to your wordpress admin panel, navigate to Settings -> Responsive Styled Maps Helper menu item. It will open the plugin's panel like in the image below, where you can customize various settings.
6. Here is a video tutorial showing how to install a premium plugin, with the steps described above: https://youtu.be/JBxRuJVnMOY
7. For maps created after June 22, 2016, Google requires the mandatory use of an API key, you can get a key from HERE. Please follow the steps presented at that link to get the API key and please make sure you check all these 3 products checkboxes below during the process:
   

After you successfuly install the plugin, navigate to Dashboard->Settings->Responsive Styled Google Maps - Helper and you will see this admin window, where you can generate the map shortcode:

These are the steps to upgrade the plugin from an old version to a newer version:

Manual upgrade:

1. Before upgrading the plugin, do not delete the already created map shortcodes from pages or posts, they will not be affected. Also, in case you have some custom modifications made to the plugin, plese make sure that you have a backup copy of the plugin folder.
2. Navigate to your Dashboard
3. Deactivate the Responsive Styled Google Maps plugin.
4. Delete the plugin by clicking the Delete button.
5. A confirmation message displays asking you whether you’re sure you want to delete this plugin.
6. Click the "Yes, Delete These Files" button.
7. Download again the latest version of the plugin from codecanyon and install it from scratch.

Automatic upgrade:

1. Download and install the Envato Market WordPress Plugin from: https://envato.com/market-plugin/ .
2. Navigate then to your WordPress admin dashboard, click the Envato Market menu item, then click Plugins tab and click the Update link near the Responsive Styled Google Maps WordPress Plugin.

After you download and activate the plugin, just open in edit mode any post, custom post type, page or widget and write this simple shortcode to generate a map in that place:

[res_map address="street, city, country"]

Since WordPress 5.0, you will have to insert the map shortcode in a "classic" block type.

To customize the map, go to your wordpress admin panel, navigate to Settings -> Responsive Styled Maps Helper menu item. It will open the plugin's panel, where you can customize various settings.

THE BUTTONS IN ADMIN HELPER:

LOAD A SHORTCODE - just copy-paste a map shortcode previously generated, click this button, then paste your shortcode and you will be able to edit that shortcode and its settings

RELOAD THE MAP - this button just reloads the map from the right part of the screen (the map preview)

SAVE SETTINGS - this button saves all the settings at that moment into the database

RESET SETTINGS - this button just resets all the settings and the map preview to the default ones (those given as basic example)

1. Map with two markers (two addresses separated with the | pipeline symbol)

[res_map address="L'Île-Perrot, QC, Canada | Notre-Dame-de-l'Île-Perrot, QC, Canada" description="L'Île-Perrot, QC, Canada | Notre-Dame-de-l'Île-Perrot, QC, Canada" directionstext="(directions to our address)" icon="green | green" style="2" scalecontrol="no" typecontrol="no" streetcontrol="no" zoom="11" zoomcontrol="no" draggable="yes" scrollwheel="no" searchbox="no" clustering="no" logging="no"0 poi="yes" width="880px" height="500px" maptype="roadmap" popup="no" center="" refresh="no" key="your_api_key"]

2. Map with address given with latitude/longitude and zoom=8

[res_map address="45.95115,-102.509769" description="First line of text" directionstext="(directions to our address)" icon="yellow" style="14" scalecontrol="no" typecontrol="no" streetcontrol="no" zoom="8" zoomcontrol="no" draggable="yes" scrollwheel="no" searchbox="no" clustering="no" logging="no" poi="yes" width="880px" height="500px" maptype="roadmap" popup="no" center="" refresh="no" key="your_api_key"]

3. A black & white map

[res_map address="Yeronga QLD 4104, Australia" description="Yeronga QLD 4104, Australia {br} Phone: 0040 752 235 756" directionstext="(directions to our address)" icon="black" style="24" scalecontrol="no" typecontrol="no" streetcontrol="no" zoom="14" zoomcontrol="no" draggable="yes" scrollwheel="no" searchbox="no" clustering="no" logging="no" poi="yes" width="880px" height="500px" maptype="roadmap" popup="yes" center="" refresh="no" key="your_api_key"]

4. Format the description inside the popup

[res_map address="Yeronga QLD 4104, Australia" description="<img src='http://hevada.com/wp-content/plugins/responsive-maps-plugin/includes/img/company.png'> {br} Yeronga QLD 4104, Australia {br} Phone: 0040 752 235 756" directionstext="(directions to our address)" icon="http://hevada.com/mapgenerator/icons/car.png" style="22" scalecontrol="no" typecontrol="no" streetcontrol="no" zoom="14" zoomcontrol="no" draggable="yes" scrollwheel="no" searchbox="no" clustering="no" logging="no" poi="yes" width="880px" height="500px" maptype="roadmap" popup="yes" center="" refresh="no" key="your_api_key"]

5. Change the icon color

[res_map address="Yeronga QLD 4104, Australia" description="Yeronga QLD 4104, Australia {br} Phone: 0040 752 235 756" directionstext="(directions to our address)" icon="blue" style="25" scalecontrol="no" typecontrol="no" streetcontrol="no" zoom="14" zoomcontrol="no" draggable="yes" scrollwheel="no" searchbox="no" clustering="no" logging="no" poi="yes" width="100%" height="500px" maptype="roadmap" popup="yes" center="" refresh="no" key="your_api_key"]

6. Change the map style

[res_map address="Yeronga QLD 4104, Australia" description="Yeronga QLD 4104, Australia {br} Phone: 0040 752 235 756" directionstext="(directions to our address)" icon="red" style="28" scalecontrol="no" typecontrol="no" streetcontrol="no" zoom="18" zoomcontrol="no" draggable="yes" scrollwheel="no" searchbox="no" clustering="no" logging="no" poi="yes" width="100%" height="500px" maptype="roadmap" popup="yes" center="" refresh="no" key="your_api_key"]

7. Use a custom marker icon

[res_map address="Yeronga QLD 4104, Australia" description="Yeronga QLD 4104, Australia {br} Phone: 0040 752 235 756" directionstext="(directions to our address)" icon="http://hevada.com/mapgenerator/icons/car.png" style="30" scalecontrol="no" typecontrol="no" streetcontrol="no" zoom="18" zoomcontrol="no" draggable="yes" scrollwheel="no" searchbox="no" clustering="no" logging="no" poi="yes" width="880px" height="500px" maptype="roadmap" popup="yes" center="" refresh="no" key="your_api_key"]

8. Show/hide the controls

Every other control in the map can be shown / hidden by specifying its corresponding parameter. So that you can customize your map in every possible way: you have full control on what to show on the map.

[res_map address="Yeronga QLD 4104, Australia" description="<img src='http://yava.ro/wp-content/plugins/responsive-maps-plugin/includes/img/company.png'> {br} Yeronga QLD 4104, Australia {br} Phone: 0040 752 235 756" directionstext="(directions to our address)" icon="blue" iconsize="" style="27" scalecontrol="yes" typecontrol="yes" streetcontrol="yes" locateme="yes" zoom="13" zoomcontrol="yes" draggable="yes" scrollwheel="no" searchbox="yes" clustering="no" logging="no" poi="yes" fullscreen="yes" popup="yes" tabfix="no" width="100%" height="500px" maptype="roadmap" refresh="yes" center="" key="your_api_key"]

9. How to use a custom link in the marker popup

Just use the custom link in the description area like this:

[res_map address="New York" description="<a href='http://google.com' target='_blank'> the link here</a> {br} another line of text here" directionstext="" style="2" popup="yes" key="your_api_key"]

10. How to use the shortcode in a theme

Just copy-paste the map shortcode generated in the Responsive Styled Google Maps Helper from the admin dashboard and use this shortcode in a php do_shortcode statement, as explained here::

https://css-tricks.com/snippets/wordpress/shortcode-in-a-template/

11. Markers list

If you wish to have besides the map a list with all the locations and when you click on a link, the corresponding marker to be open, just use the following script:

<a href="javascript: openMarker(1, 1);">New York</a>

<a href="javascript: openMarker(1, 2);">Maryland</a>

The arguments passed to the javascript function openMarker(1, 2) mean: open the 2nd marker from the 1st map displayed. The result is the following map with links (when a link is clicked, the corresponding marker opens up):

A live example of this can be seen here: http://yava.ro/13-a-responsive-styled-map-with-a-clickable-list-of-locations/

12. How to set the pin icons for retina support

If you want to have retina support for the pin icons (so that they do not appear pixelated when zoomed in - on retina screens, for instance on iPhone4 - you will need a bigger, sharp icon and in the map shortcode you'll set the iconsize to 1/2 of the real size of that big icon. This way, on retina screens, when zoomed-in, the icon will look sharp.

For instance, let's say you want to use as pin icon an image: pin@2x.png (having width=30px and height=50px), for retina support, your map shortcode will be like this:

[res_map address="New York" icon="http://website.com/pin@2x.png" iconsize="15, 25" style="2" popup="yes"]

where 15,25 means width, height to which to scale (and are equal to half of the width=30px and height=50px).

13. How to set different colors for the pins

[res_map address="Paris | Toulouse | Montpellier" description="<img src='https://goo.gl/6sCyEM'> {br} PARIS | <img src='https://goo.gl/nCcbNj'> {br} TOULOUSE| <img src='https://goo.gl/0uNUeL'> {br} MONTPELLIER" directionstext="(directions)" icon="blue | red | green" iconsize="" style="24" scalecontrol="no" typecontrol="no" streetcontrol="no" locateme="no" zoom="5" zoomcontrol="no" draggable="yes" scrollwheel="no" searchbox="no" clustering="no" logging="no" poi="yes" fullscreen="no" popup="no" tabfix="no" width="100%" height="500px" maptype="roadmap" refresh="yes" center="" key="your_api_key"]

14. Example with 3 markers and custom links in popups

[res_map address="London | Berlin | Paris" description="<a href='https://www.google.com'>link1 here</a> | <a href='https://www.yahoo.com'>link2 here</a> | <a href='https://www.envato.com'>link3 here</a>" directionstext="" popup="yes" zoom="5" style="2" icon="green" key="your_api_key"]

1. I see a blank area instead of a map. Why?

If you are seeing a blank area instead of the map, please switch temporary to the default WordPress theme (Twenty Seventeen) and check if you see the map with this theme. If yes, it means that the theme you were using has some conflicts with my plugin and please contact me, sending also the link to the live page that contains the map, for debugging purposes.

2. I have many markers, why they load so slowly?

When you use physical addresses, Google Maps server takes time to translate them one by one to a latitude, longitude coordinate. Only after that they are displayed on the map. To avoid this operation and improve loading time, please use your locations in a latitude, longitude format, for instance:

[res_map address="51.648450, -1.841401 | 51.450201, -1.291792 | 51.182451, -1.374161 | 51.021711, -1.489974 | 50.893711, -1.445973 | 50.881053, -1.269805"...]

where 51.648450, -1.841401 is a location on the map, 51.450201, -1.291792 is another location on the map and so on.

3. Is it possible to show a video in that small popup of the pin?

Yes, it is possible, just put the video code in the description field in the map shortcode. Example:

[res_map address="Berlin, Germany" description="<iframe width='100%' height='100%' src='https://www.youtube.com/embed/bEPAbS-SRlg' frameborder='0' allowfullscreen> </iframe>" directionstext="" style="38" streetcontrol="yes" zoom="13" draggable="yes" scrollwheel="no" width="100%" height="500px" popup="yes" center="52.540422, 13.404267" refresh="yes"]

4. Why I receive a jQuery not found error?

This error appears if the theme you are using is not coded correctly. Please contact the theme author and make sure he has included wp_footer() in the footer correctly as explained here and also wp_head() as explained here.

5. Everything is fine, but why the map does not show up?

Please make sure you are using a width and height in the shortcode. Do not leave empty the width and height parameters in the shortcode. If you are using width="100%" but the map still does not show up, maybe the theme you are using is not responsive. Try usinga fixed width or fixed height if the map is not showing, for instance width="500px" and if the map shows up after this, please contact the theme author, because in this case the page of the theme is not responsive and you can't use % widths...

6. Why the popups show latitude, longitude, not text?

Please make sure that in the shortcode, insode the description field you only use simple apostrophes in the HTML content you put there.

This is correct:

[res_map...description="<img src='http://someimage.png' alt='someimage'>"...]

This is not correct:

[res_map...description="<img src="http://someimage.png" alt="someimage">"...]

7. How do I center the content in the popup window?

Please add in your page, immediately after the [res_map] shortcode, this CSS code that will center the content in the popup window:

<style> .gm-style-iw {white-space: pre-wrap !important;text-align: center !important;} <style>

8. How do I use the shortcode with Visual Composer?

Solution 1: When you create a page or a post, in the backend editor of Visual Composer, just create a text block and put there the map shortcode.

Solution 2: If you wish to create/edit the map in a more visual way, import the below map shortcode, into Dashboard->Visual Composer->Shortcode Mapper->Map Shortcode section, like in the video: https://www.youtube.com/watch?v=ULCGIhdtAwE&t=33s

9. The plugin is not compatible with W3 Total Cache plugin?

If you are using the W3 Total Cache plugin and the maps are not showing up, this is the reason: W3 Total Cache plugin distorts the way in which javascript libraries are included, so you will have to add manually the Google Maps library to the list of excluded libraries. To do so, navigate to Dashboard->W3 Total Cahe settings->Minify tab and find the textarea named: "Never minify the following JS files" and add there this link, without slashes, without http or something else, exaclty like below:

maps.googleapis.com/maps/api/js