SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Map Place JS ( maplacejs.com ) help

    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

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

    any help please?
    thansks

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,387
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Code JavaScript:
    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. #3
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    Hi,

    Code JavaScript:
    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.
    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

    you can fix my code and attached?

    thank you

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,387
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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:
    Code JavaScript:
    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):
    Code CSS:
    .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:
    HTML Code:
    <div id="gmap-dropdown" class="gmap"></div>
    <div id="gmap-list" class="gmap"></div>

  5. #5
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @fretburner, really thank you but still dont work, check it here http://jmp.sh/v/RzK9CeFKDnQdqQvH0WDw please

  6. #6
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,387
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    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.
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •