About This Ticket

Multiple maps on same page

by holidaynerja / February 5, 2016, 10:11 pm

Hi, I am trying to create 4 different maps with markers on the same page. Here is the page I am trying to work on

http://www.holidaynerja.co.uk/mobile/maps.html

I realise that I have to have 4 sets of data in the main .js file to populate the markers for each map and I have tried to re-name the map-canvas for each different map but had no luck. I have kept the code the same in the main.js file for now.

Could you let me know the best way to acheive all maps working. If it helps you can use the same marker data for each map so that I can at least see how it has been done.

May thank as ever.

 

 

Staff

Hello,
 

This div hold the google map

<div id="map-canvas"></div>

and this Javascript render the google map with set of options defined

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 

You have to create with three different map-canvas id and different set of options

then callback with those data. 

 

Also if you need more  help for this please send us mail at  0effortthemes@itobuz.com

Thanks and regards,
​0effortteam

Hi. I have tried this but it did not work.

in the html I changed for each map

<div id="map-canvas"></div>

<div id="map-canvas1"></div> etc

in the js file

    // Display a map on the page 1 bedroom
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    map.setTilt(45);
        
    // Multiple Markers
    var markers = [
        ['London Eye, London', 51.503454,-0.119562],
        ['Palace of Westminster, London', 51.499633,-0.124755]
    ];
                        
    // Info Window Content
    var infoWindowContent = [
        ['<div class="map_info_window">          <div class="image">          <span class="box-type"><span class="text">Sale</span></span>            <img src="images/maps-images/properties-1.jpg" alt="">          </div>          <div class="description">            <h3>Appertment</h3>            <p class="meta-list3"><span class="meta">Bed : 3</span>               <span class="meta"> Parking : 1 </span>              <span class="meta">   Bath : 1 </span>              <span class="meta">   1500 sq ft</span></p>            <span class="price">$75000</span>            <a class="link-arrow iconic iconic-arrow-forward" href="#"></a>          </div>        </div>'],
    ];

    // Display a map on the page 2 bedroom
    map = new google.maps.Map(document.getElementById('map-canvas1'), mapOptions);
    map.setTilt(45);
        
    // Multiple Markers
    var markers = [
        ['London Eye, London', 51.503454,-0.119562],
        ['Palace of Westminster, London', 51.499633,-0.124755]
    ];
                        
    // Info Window Content
    var infoWindowContent = [
        ['<div class="map_info_window">          <div class="image">          <span class="box-type"><span class="text">Sale</span></span>            <img src="images/maps-images/properties-1.jpg" alt="">          </div>          <div class="description">            <h3>Appertment</h3>            <p class="meta-list3"><span class="meta">Bed : 3</span>               <span class="meta"> Parking : 1 </span>              <span class="meta">   Bath : 1 </span>              <span class="meta">   1500 sq ft</span></p>            <span class="price">$75000</span>            <a class="link-arrow iconic iconic-arrow-forward" href="#"></a>          </div>        </div>'],
    ];

 

Maybe i have a syntax error in this part of the code?

 

 

 

Staff

Hello,
 

please send us mail at  0effortthemes@itobuz.com

If you like our theme and support, please rate us in Themeforest in the download section.

Thanks and regards,
​0effortteam