July 2015

Monthly Archives

16. more than 50 markers

When showing so many addresses, to get a faster response from Google servers, it’s recommended that you use the latitude, longitude coordinates instead of physical addresses, in the map shortcode, then you’ll get a faster response:

15. customized popup

Most map plugins don’t let you customize the popup window of a marker (in fact Google Maps features are not very friendly with this). But after you install this map plugin, you can customize the popup with a CSS code added to your website. For instance, I customized the popup in the above map with this simple CSS code:

.gm-style-iw {
    background-color: #2D2D2D !important;
    margin-top: -8px !important;
    margin-left: -15px !important;
    height: 96% !important;
    text-align: center !important;
    padding: 15px 15px 0 15px !important;
.gm-style-iw, .gm-style-iw a:active, .gm-style-iw a:hover, .gm-style-iw a:link, .gm-style-iw a:visited {
    color: #E9F3DA !important;
div.responsive-map div div div div div div div div div div {
    background-color: #2D2D2D !important;

14. tabs example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta ut velit eu lacinia. Sed quis nibh id nisi egestas blandit. Nullam tristique porta eros, in euismod elit gravida vel. Morbi ipsum quam, molestie in lectus in, commodo accumsan dolor. Nam egestas neque ut augue accumsan accumsan. Curabitur placerat id nibh at ultrices. Fusce euismod nisi a sapien condimentum euismod. Duis maximus eu ex quis aliquet. In sagittis mollis vehicula. Curabitur vulputate, eros id mollis porta, sapien est lobortis neque, in rutrum justo sem non lacus. Integer at gravida neque.

Quisque suscipit vitae purus venenatis volutpat. Ut id erat orci. Nam congue ex sit amet orci vehicula, at lacinia quam malesuada. Etiam nec purus massa. Fusce sed bibendum turpis. Mauris euismod massa quis diam tincidunt feugiat. Vestibulum aliquet augue faucibus neque finibus, quis tristique nisi dignissim.

13. clickable list of locations

The code used to generate the list from left:

<a href="javascript: openMarker(1, 1)">Avenida Peseta, Spain</a>
<a href="javascript: openMarker(1, 2)">Paseo de la Castellana, Spain</a>
<a href="javascript: openMarker(1, 3)">Avenida de Rafaela Ybarra, Spain</a>
<a href="javascript: openMarker(1, 4)">Calle de Ramírez de Prado, Spain</a>
<a href="javascript: openMarker(1, 5)">Villa de Vallecas, Spain</a>
<a href="javascript: openMarker(1, 6)">Pozuelo, Spain</a>

<!--The arguments passed to the javascript function openMarker(1, 5) mean: open the 5th marker from the 1st map displayed.-->

The code used to generate the map from right:

[res_map address="Avenida Peseta, Spain | Paseo de la Castellana, Spain | Avenida de Rafaela Ybarra, Spain | Calle de Ramírez de Prado, Spain | Villa de Vallecas, Spain | Pozuelo, Spain" description="" ......the rest of the map shortcode.......]

<!--The shortcode is easily generated from plugin's admin, with all its parameters.-->

12. photo as marker icon

11. custom link in the popup

[res_map address="Rome, Italy" description="<img src='http://yava.ro/wp-content/plugins/responsive-maps-plugin/includes/img/company.png'> {br} First line here for instance {br} Second line here if needed {br} <a href='https://www.google.com/maps/@41.902784,12.496366,14z?hl' target='_blank'>here is the link to google map {br} " directionstext="" icon="green" style="48" popup="yes" refresh="yes"]

10. no clustering

9. many markers, clustering

8. world map

7. multiple markers

The same map with popup enabled:

6. large popup

5. custom marker icon

4. all controls enabled

3. all styles


2. no controls, search box

1. black & white