Adding maplacejs onto wordpress

CMS & WordPress
1

Hi everyone,

Hopefully somebody can help me.

I’ve followed this example: Javascript newbie: Help implementing a script, and i’ve managed to get it to work(ish) on my wordpress site(I want the default map to be the first marker, how can I do that?)

The trouble is, I currently have this within a page text area. This is causing issues as it doesn’t like the addition of tags within the script as WordPress adds others as well. My WordPress tends to automatically add a ‘p’ tag for every return!

Is there another way of achieving this? Possibly putting the code into a javascript file then calling it on the page? I think that’s the right way, but can anybody help me as i’m stuck with that.

Cheers

2

Hi Gareth,

One way would be to create a special page template within your WP theme, with the necessary HTML/JS for the map, and then applying that template to the page where you want the map to appear. The benefit of doing it this way is that the code can’t be broken by anyone accidentally when editing the page content.

An alternative would be to skip using maplacejs (which is a jQuery plugin) and use one of the WP google maps plugins available. I don’t remember the name now, but there is one that allows you to easily add map pins from the admin page.

3

Ok thanks :smile:

One last thing, I’ve used that script that is mentioned in my first post. For some random reason, the street view area is all squashed and disappears when you hover over it. Is there an easier way to get the zoom area and the street view bit (from the top left usually) to show correctly?

Thanks for your help

4

Do you have the code online somewhere I could take a look at it? Or, failing that, could you post the code here (or in a codepen) so I can recreate the problem?

5

It’s the code from the thread (url is on the top of this post, I can’t post it again)

all i’ve done is changed the name and lat and long co-ordinates.

6

Here’s the code I’m using;

<div id="gmap-dropdown" class="gmap"></div>
<div id="gmap-list" class="gmap"></div>
<script type="text/javascript">
            new Maplace({
                locations: [
                    {
                        lat: 53.265230,
                        lon:  -2.875651,
                        title: 'Company Name',
                        html: [
                            'Head Office',
                            ''
                        ].join(''),
                        zoom: 14
                    },
                    {
                        lat: 53.408006,
                        lon: -2.991518,
                        title: 'Company Name',
                        html: [
                            'Company Name',
                            ''
                        ].join(''),
                        zoom: 8
                    }
                ],
                map_div: '#gmap-dropdown',
                controls_title: 'Choose a location:'                
            }).Load();
        </script>
7

I’ve created a page with the example code in and it seems to work OK for me. Perhaps you have some other CSS included in your page that is interfering with the map controls?

8

did you have the street view area and the zoom area showing?

9

Yeah, I was able to zoom the map and go into streetview without any problems.

10

Could I PM you a link? Or isn’t that possible here?

11

Sure, just click my avatar and there’s a Private Message option.

13

It appears to be some CSS that’s applied to the images on your site that’s causing the problem.

Add this rule to your stylesheet:

#gmap-dropdown img {
    max-width: none;
}
14

Forgot to say thanks :slight_smile:

1 Like