multiple maps on a page only shows the first one

arl_garm
Offline
Last seen: 2 months 1 week ago
Mon, 09/07/2015 - 17:23
#1
multiple maps on a page only shows the first one

Hi,

I've been changing the structure of one of your pages: trip-detail.html to define my holiday's logic. Even if your structure and mine are quite similar, i had to adapt it a bit, and then i found this problem:

I need to put multiple maps in the tabs of the trip-schedule-accordion, a holiday is made of multiple hotels and interconnecting transfers, so i require to place different maps to show each item's real location.

The map works good in the first accordion tab, then it has no values in the following ones. As a side effect, the first map is showing the locations of all the other maps inserted in the following tabs.

If you require an screenshot or the html, please tell me the best way to sent it to you.

Ariel

cindy
cindy's picture
Offline
Last seen: 2 days 13 hours ago
Tue, 09/08/2015 - 09:56

Please send us your site url, some screenshots of the problem cause it is quite difficult for us to imagine what your issue is

arl_garm
Offline
Last seen: 2 months 1 week ago
Wed, 09/09/2015 - 03:01

Hi Cindy,

I've sent you an email. 

Regards

cindy
cindy's picture
Offline
Last seen: 2 days 13 hours ago
Wed, 09/09/2015 - 09:29

Hi,

Could you please post here?

I do not receive any email

cindy
cindy's picture
Offline
Last seen: 2 days 13 hours ago
Thu, 09/10/2015 - 10:13

Hi,

In file scripts.js, please repace the following code:

if ($('.tour-map').length) {

            $('.tour-map').mdMapExtend({

                appendTo: '.tour-map',

                autoCenter: true,

                zoom: 10,

                style: 'shadesOfGrey',

                iconMarker: 'images/marker-product-map.png',

                scrollwheel: false

            });

        }

with:

$('.tour-map').each(function() {

            $(this).mdMapExtend({

                appendTo: $(this),

                autoCenter: true,

                zoom: 10,

                style: 'shadesOfGrey',

                iconMarker: 'images/marker-product-map.png',

                scrollwheel: false

            });

        });

arl_garm
Offline
Last seen: 2 months 1 week ago
Thu, 09/10/2015 - 16:51

HI Cindy, thanks for the reply.

I've updated the js, now a map appears on every tab, the first one has the first location and only one marker, but the other maps are empty as you may see.

Use the same provided url.

Ah! are you also checking the images slider issue?

I have another question, it is possible to assign labels to the markers placed in a map?

thanks in advance

cindy
cindy's picture
Offline
Last seen: 2 days 13 hours ago
Fri, 09/11/2015 - 11:14

Hi,

1. Please open file trip detail html 

and change the code:
<div class="tour-map">
<div data-latlong="21.036697, 105.834871"></div>
</div>

to:

<div class="tour-map">
<div data-latlong="21.036697, 105.834871"></div>
<div class="show-map"></div>
</div>

2. Please open file style.css and add the following code:

.tour-map .show-map {
  width: 100%;
  height: 100%;
}

3. Please open file scripts.js and change:

3.1: change the code

$('.tour-map').each(function () {
    $(this).mdMapExtend({
        appendTo: $(this),
        autoCenter: true,
        zoom: 14,
        style: 'lightGray',
        iconMarker: 'images/marker.png',
        scrollwheel: false
    });
});

into

$('.tour-map').each(function () {
    $(this).mdMapExtend({
        appendTo: $(this).children('.show-map'),
        autoCenter: true,
        zoom: 14,
        style: 'lightGray',
        iconMarker: 'images/marker.png',
        scrollwheel: false
    });
});

3.2: change the code:

function accordion() {
    $(".accordion").accordion({
        collapsible: true,
        heightStyle: "content",
        animate: 200
    });
}

into:

function accordion() {
    $(".accordion").accordion({
        collapsible: true,
        heightStyle: "content",
        animate: 200,
        activate: function(event, ui) {
            $('.tour-map', ui.newPanel).each(function () {
   $(this).mdMapExtend({
       appendTo: $(this).children('.show-map'),
       autoCenter: true,
       zoom: 14,
       style: 'lightGray',
       iconMarker: 'images/marker.png',
       scrollwheel: false
   });
});
        }
    });
}

arl_garm
Offline
Last seen: 2 months 1 week ago
Fri, 09/11/2015 - 17:55

Hi Cindy, thanks a lot! it works perfectly now!

you guys make an amazing work...

would like to know if you plan to check the images slider problem in that same page and also my idea of showing labels on the markers placed on maps.

this idea is not a bad one because will allow people to show for example departure points and arrival points, i.e. in a transfer route. From Point A to Point B.

thanks again

cindy
cindy's picture
Offline
Last seen: 2 days 13 hours ago
Mon, 09/14/2015 - 09:31

Hi,

Thank you very much for your confirm as well as your great suggestion

Should you have any questions or ideal, feel free to tell us. Innovative thinkings are always welcome :)

Log in or register to post comments