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"]. 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.

1) Map with two markers (two addresses); they are 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" poi="yes" width="880px" height="500px" maptype="roadmap" popup="no" center="" refresh="no"]

[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"]

[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"]

4) Format the description inside the popup on multiple lines and add a logo to the popup (if you wish to display the text in the info popup window on multiple lines, please use the {br} expression):

[res_map address="Yeronga QLD 4104, Australia" description="<img src='http://yava.ro/images/company.png'> {br} Yeronga QLD 4104, Australia {br} Phone: 0040 752 235 756" directionstext="(directions to our address)" icon="http://yava.ro/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"]

[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"]

[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"]

[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://yava.ro/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"]

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="Yeronga QLD 4104, Australia {br} Phone: 0040 752 235 756" directionstext="(directions to our address)" icon="orange" style="22" scalecontrol="yes" typecontrol="yes" streetcontrol="yes" zoom="19" zoomcontrol="yes" draggable="yes" scrollwheel="yes" width="880px" height="496px" maptype="terrain" popup="yes" center="" refresh="no"]

[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"]

Just use echo do_shortcode statement in any post, page or custom page template, like this:

<?php echo do_shortcode( '[res_map address="37.532599,25.191723" description="<img src=\'http://yava.ro/images/company.png\'> {br} Yeronga QLD 4104, Australia {br} Phone: 0040 752 235 756" directionstext="(directions to our address)" icon="green" style="12" scalecontrol="no" typecontrol="no" streetcontrol="no" zoom="14" zoomcontrol="no" draggable="yes" scrollwheel="no" width="100%" height="500px" maptype="roadmap" popup="yes" center="37.532599,25.191723" refresh="no"]' ); ?>

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 code in your page:

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)

E) Configuring the map - top

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, where you can customize map settings. You can copy-paste the shortcode and insert it in your post or page or widget, where you want the map to appear.

Below is the full list of possible parameters plus their default and possible values:

F) FAQ - top

1) Where can I see a quick start video?

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, I’ve prepared a demo for this:
http://yava.ro/test93/ .

4) I need help, where can I contact you?

You can contact me at greenline@yava.ro

5) 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.

6) 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, 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...

7) 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">"...]

8) 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>

9) I need a map with two markers, each popup should have only a link inside it, do you have an example?

Yes here is an example with the shortcode included: http://yava.ro/test62/

10) 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 the "My shortcodes" section in Visual Composer, like in the video:

[res_map address="Yeronga QLD 4104, Australia" description="<img src='http://localhost/wordpress/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" style="2" scalecontrol="no" typecontrol="no" streetcontrol="no" zoom="13" zoomcontrol="no" draggable="yes" scrollwheel="no" searchbox="no" clustering="no" logging="no" poi="yes" width="100%" height="500px" maptype="roadmap" popup="no" center="" refresh="yes" publisherid="" adbg="#ffffff"]

G) Sources and Credits - top

H) Version History - top

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. Please email me at greenline@yava.ro

“Responsive Styled Google Maps - Wordpress Plugin” Documentation by “greenline” v4.0

“Responsive Styled Google Maps” Wordpress Plugin

Table of Contents

A) Online demo - top

B) Installation - top

C) Upgrade - top

D) Quick start guide - top

E) Configuring the map - top

F) FAQ - top

G) Sources and Credits - top

H) Version History - top