Javascript newbie: Help implementing a script

melitica · March 21, 2014, 11:54pm

Hi! I’m trying to add a jquery plugin called maplace to my website. http://maplacejs.com/

The documentation on their website is meant for people with a bit more experience using scripts on their websites. I’m having a hard time even getting started. From what I understand, I need to add jQuery, google maps, maplace.js and other things to my header. Then I have to place a div on my website where the map will be shown. A variable with locations needs to be declared, but I’m not sure where to do this. I also don’t know where to paste the script that creates a new maplace object. Do I create a new document for the script and the variables? Do I have to do something to my css style sheet?

As you can tell, this is new territory for me. Sorry for asking dumb questions. How do I set all of this up?

Thank you in advance for any feedback.

fretburner · March 22, 2014, 1:16pm

Hi melitica, welcome to the forums!

Here’s an example page that will give you a working map with two pins:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .gmap {
                height: 300px;
                width: 50%;
                padding: 3px;
                border: 5px solid #ddd;
                font-size: 90%;
            }
        </style>
    </head>
    <body>

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

        <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script src="js/maplace.min.js"></script>
        <script type="text/javascript">
            new Maplace({
                locations: [
                    {
                        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
                    }
                ],
                map_div: '#gmap-list',
                controls_type: 'list',
                controls_title: 'Choose a location:'
            }).Load();
        </script>
    </body>
</html>

The only thing you’d need to do to get this working on your own machine is download maplace.min.js from the site and put it in a subdirectory called js

melitica · March 29, 2014, 12:04am

Thank you for your reply! It helped me a lot. Now I can finally see the map on my site. One more thing though, I’m trying to implement the “Tabs” style that they have for the maplace script. On their website if you scroll down you can see it on the first page. Here’s the code they have for it.

For the JS

new Maplace({
	locations: LocsB,
	map_div: '#gmap-tabs',
	controls_div: '#controls-tabs',
	controls_type: 'list',
	controls_on_map: false,
	show_infowindow: false,
	start: 1,
	afterShow: function(index, location, marker) {
		$('#info').html(location.html);
	}
}).Load();

For the HTML

<div id="controls-tabs"></div>
<div id="info"></div>
<div id="gmap-tabs"></div>

Somehow on my site with this same code, it doesn’t show up in tabs. Here’s my code:

JS script

<script type="text/javascript">
            new Maplace({
                locations: [
                    {
                        lat: 33.8583,
                        lon: -117.8678,
                        title: 'Anaheim',
                        html: [
                            '<h3>Anaheim</h3>',
                            '<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
                        ].join(''),
                        zoom: 8
                    },
                    {
                        lat: 34.2358,
                        lon: -118.5739,
                        title: 'Chatsworth',
                        html: [
                            '<h3>Chatsworth</h3>',
                            '<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
                        ].join(''),
                        zoom: 8
                    }
                ],
               map_div: '#gmap-tabs',
               controls_div: '#controls-tabs',
			   controls_type: 'list',
			   controls_on_map: false,
			show_infowindow: false,
			start: 1,
			afterShow: function(index, location, marker) {
		$('#info').html(location.html);
	}
            }).Load();
        </script>

and the HTML

<div id="controls-tabs"></div>
 <div id="gmap-tabs" class="gmap"></div>

There’s also an info part they have at the bottom of the script that I chose to leave out since I didn’t understand it very well. Could this be causing my map to not show up in tabs? What am I missing?

Thank you

fretburner · March 29, 2014, 12:10pm

I added your changes to my original example page and the map itself seems to load fine. The tabs don’t display properly, but that’s because I don’t have the CSS/JS for them loaded (the maplacejs.com site uses the Foundation framework tabs).

melitica · May 6, 2014, 12:04am

Sorry for the late response. It’s been a while since I’ve been able to deal with this issue. The maps are not displaying anymore. I’ve been debugging the code to no avail. Here’s the code. Any feedback would be appreciated:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
	.gmap{
		height:350px;
		width: 50%;
		padding:3px;
		border: 5px solid #ddd;
		font-size: 90%;
	}
</style>

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="maplace.min.js"></script>
<link href="foundation.css" rel="stylesheet" type="text/css" />

</head>

<body>

<script type="text/javascript">
            new Maplace({
                locations: [
                    {
                        lat: 33.8583,
                        lon: -117.8678,
                        title: 'Anaheim',
                        html: [
                            '<h3>Anaheim</h3>',
                            '<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
                        ].join(''),
                        zoom: 8
                    },
                    {
                        lat: 34.2358,
                        lon: -118.5739,
                        title: 'Chatsworth',
                        html: [
                            '<h3>Chatsworth</h3>',
                            '<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
                        ].join(''),
                        zoom: 8
                    },
					{
                        lat: 32.8142,
                        lon: -117.1247,
                        title: 'San Diego',
                        html: [
                            '<h3>San Diego</h3>',
                            '<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
                        ].join(''),
                        zoom: 8
                    }
					,
					{
                      	lat: 34.9137,
                        lon: -120.4632,
                        title: 'Santa Maria',
                        html: [
                            '<h3>Santa Maria</h3>',
                            '<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
                        ].join(''),
                        zoom: 8
                    }
					,
					{
                        lat: 34.5011,
                        lon: -117.3279,
                        title: 'Victorville',
                        html: [
                            '<h3>Victorville</h3>',
                            '<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
                        ].join(''),
                        zoom: 8
                    }
					,
					{
                        lat: 36.1605,
                        lon: -115.1050,
                        title: 'Las Vegas',
                        html: [
                            '<h3>Las Vegas</h3>',
                            '<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
                        ].join(''),
                        zoom: 8
                    }
					,
					{
                        lat: 33.1677,
                        lon: -117.2202,
                        title: 'Vista',
                        html: [
                            '<h3>Vista</h3>',
                            '<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
                        ].join(''),
                        zoom: 8
                    }
					,
					{
                        lat: 33.6224,
                        lon: -117.7194,
                        title: 'Laguna Hills',
                        html: [
                            '<h3>Laguna Hills</h3>',
                            '<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
                        ].join(''),
                        zoom: 8
                    }
					,
					{
                        lat: 34.4245,
                        lon: -118.4998,
                        title: 'Santa Clarita',
                        html: [
                            '<h3>Santa Clarita</h3>',
                            '<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
                        ].join(''),
                        zoom: 8
                    }
                ],
               map_div: '#gmap-list',
			   controls_type: 'list',
			controls_title: 'Choose a location:'
            }).Load();
        </script>
<div id="contentarea">
<div id="page-title">CONTACT US.</div>
<p id="content-text">We have 9 full-service locations to serve your needs. If you have any questions or need assistance call one of our offices and they'll be happy to assist you. </p>
<p id="content-text">Would you like us to contact you? Need more information? Click <a href="#">HERE</a>.</p>

 </div>
<div id="gmap-dropdown"></div>
<div id="gmap-list" class="gmap"></div>
 <!--<div id="controls-tabs"></div>
 <div id="gmap-tabs" class="gmap"></div>-->





</body>


</html>