Map Place JS ( maplacejs.com ) help

JavaScript
1

hi, I try to add a google map to my site using http://maplacejs.com/ Im not a js expert but I follow all the steps, whats the problem, dont show the map :frowning:

this is my code: http://jmp.sh/b/aYrttGxfi2RTyhdSZzXZ

any help please?
thansks

2

Hi,

new Maplace({
   locations: LocsA,
   map_div: '#gmap-dropdown',
   controls_title: 'Choose a location:'
}).Load();

//ul list example
new Maplace({
   locations: LocsB,
   map_div: '#gmap-list',
   controls_type: 'list',
   controls_title: 'Choose a location:'
}).Load();

You’re using the variables LocsA and LocsB in your code, but you’re not defining them anywhere, so the code is throwing an error.

3

thank you but I dont get it, so I need replace LocsA for something or?

I just copy and paste the code that docs show, why the docs dont show a real example code :nono:

you can fix my code and attached?

thank you

4

OK, there are a few things you need to do to get the example code working:

First, add this to the top of your custom.js file:

var LocsA = [
        {
                lat: 45.9,
                lon: 10.9,
                title: 'Title A1',
                html: '<h3>Content A1</h3>',
                icon: 'http://maps.google.com/mapfiles/markerA.png'
        },
        {
                lat: 44.8,
                lon: 1.7,
                title: 'Title B1',
                html: '<h3>Content B1</h3>',
                icon: 'http://maps.google.com/mapfiles/markerB.png',
                show_infowindow: false
        },
        {
                lat: 51.5,
                lon: -1.1,
                title: 'Title C1',
                html: [
                        '<h3>Content C1</h3>',
                        '<p>Lorem Ipsum..</p>'
                ].join(''),
                icon: 'http://maps.google.com/mapfiles/markerC.png'
        }
    ];

    var LocsB = [
        {
                lat: 52.1,
                lon: 11.3,
                title: 'Title A2',
                html: [
                        '<h3>Content A2</h3>',
                        '<p>Lorem Ipsum..</p>'
                ].join(''),
                zoom: 8
        },
        {
                lat: 51.2,
                lon: 22.2,
                title: 'Title B2',
                html: [
                        '<h3>Content B2</h3>',
                        '<p>Lorem Ipsum..</p>'
                ].join(''),
                zoom: 8
        },
        {
                lat: 49.4,
                lon: 35.9,
                title: 'Title C2',
                html: [
                        '<h3>Content C2</h3>',
                        '<p>Lorem Ipsum..</p>'
                ].join(''),
                zoom: 4
        },
        {
                lat: 47.8,
                lon: 15.6,
                title: 'Title D2',
                html: [
                        '<h3>Content D2</h3>',
                        '<p>Lorem Ipsum..</p>'
                ].join(''),
                zoom: 6
        }
];

and then add this CSS to your page (without it, the maps will not be visible):

.gmap {
        height: 300px;
        width: 90%;
        padding: 3px;
        border: 5px solid #ddd;
        font-size: 90%;
}

and finally, add the gmap class to the divs in your page:


<div id="gmap-dropdown" class="gmap"></div>
<div id="gmap-list" class="gmap"></div>
5

@fretburner, really thank you but still dont work, check it here http://jmp.sh/v/RzK9CeFKDnQdqQvH0WDw please

6

OK, I see the problem… you replaced all the JS in custom.js with the code I gave you, instead of adding it to the beginning.

7

oh! now works! and I see that array in the docs too, now everything make sense… I think in the examples of the docs needs show more clear that arrya of Locs are need it etc…

really thank you fretburner!!!

I start to love this forum; (Im searching a forum with real responses for code etc… this is the best? or you suggest others too?)

best wishes!