cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container-fluid map">
	<h2>Where To Buy</h2>
	<fieldset>
		<legend>Find a Store Near You</legend>
		<form>
			<input id="geocomplete" class="controls" type="text" placeholder="Start typing your City or Postal Code to get your Chickapea!" size="60" />
			<input id="find" type="button" value="Find" />
		</form>
	</fieldset>
	<div id="legend"></div>
	<div class="container-fluid" id="map-canvas-two"></div>
</div>
            
          
!
            
                  var markers = [
{
    "html": '<div>65 Simcoe St</div>',
    "title": 'The Farm To Table Market And Kitchen',
    "lat": '44.501345',
    "phone": '<a href="tel:+17054446200">(705) 444-6200</a>',
    "website": '<a href="http://ccfcoop.ca/">ccfcoop.ca/</a>',
    "lng": '-80.215064',
    "postalcode": 'L9Y 1H5',
    "city": 'Collingwood, ON'
},
{
    "html": '<div>Currie\'s Market736 Sixth St</div>',
    "title": 'Currie\'s Market',
    "lat": '44.488787',
    "phone": '<a href="tel:+17054452005">(705) 445-2005</a>',
    "website": '<a href="http://www.curriesfarmmarket.ca/">curriesfarmmarket.ca/</a>',
    "lng": '-80.2505151',
    "postalcode": 'L9Y 3Y9',
    "city": 'Collingwood, ON'
},
{
    "html": '<div>11 Bruce Street South</div>',
    "title": 'The Cheese Gallery',
    "lat": '44.5615856',
    "phone": '<a href="tel:+15195996699">(519) 599-6699</a>',
    "website": '<a href="thecheesegallery.ca/">thecheesegallery.ca/</a>',
    "lng": '-80.45538',
    "postalcode": 'N0H 2P0',
    "city": 'Thornbury, ON'
},
{
    "html": '<div>395 Hume Street Collingwood</div>',
    "title": 'Collingwood Real Food Market',
    "lat": '44.498332',
    "phone": '<a href="tel:+17052935252">(705) 293-5252</a>',
    "website": '<a href="http://www.collingwoodrealfoodmarket.com/about">www.collingwoodrealfoodmarket.com/about</a>',
    "lng": '-80.204662',
    "postalcode": 'L9Y 1W7',
    "city": 'Collingwood, ON'
},
{
    "html": '<div>2935 Barrie Hill Rd</div>',
    "title": 'Barrie Hill Farms',
    "lat": '44.400727',
    "phone": '<a href="tel:+17057280571">(705) 728-0571</a>',
    "website": '<a href="http://www.barriehillfarms.com/">barriehillfarms.com/</a>',
    "lng": '-79.782404',
    "postalcode": 'L4M 4S4',
    "city": 'Barrie, ON'
},
{
    "html": '<div>235304 Grey Road 13</div>',
    "title": 'Kimberley General Store',
    "lat": '44.383448',
    "phone": '<a href="tel:+15195993451">(519) 599-3451</a>',
    "website": '',
    "lng": '-80.536468',
    "postalcode": 'N0C 1G0',
    "city": 'Kimberley, ON'
},
{
    "html": '<div>250 Bayview Dr #7</div>',
    "title": 'Earth’s Emporia',
    "lat": '44.356501',
    "phone": '<a href="tel:+17057219233">(705) 721-9233</a>',
    "website": '<a href="http://earthsemporia.com/">earthsemporia.com/</a>',
    "lng": '-79.682949',
    "postalcode": 'L4N 4Y8',
    "city": 'Barrie, ON'
},
{
    "html": '<div>5758 Main St</div>',
    "title": 'Reesor\'s Market and Bakery',
    "lat": '43.968489',
    "phone": '<a href="tel:+19056402270">(905) 640-2270</a>',
    "website": '<a href="http://reesors.ca/">reesors.ca/</a>',
    "lng": ' -79.263955',
    "postalcode": 'L4A 2T1',
    "city": 'Whitchurch-Stouffville, ON'
},
{
    "html": '<div>180 Mary St</div>',
    "title": 'Herbally Yours',
    "lat": '44.104350',
    "phone": '<a href="tel:+19059850861">(905) 985-0861</a>',
    "website": '',
    "lng": '-78.942734',
    "postalcode": 'L9L 1C4',
    "city": 'Port Perry, ON'
},
{
    "html": '<div>176 Mill</div>',
    "title": 'Creemore 100 Mile Store',
    "lat": '44.326556',
    "phone": '<a href="tel:+17054663514">(705) 466-3514</a>',
    "website": '<a href="http://www.100milestore.ca/">www.100milestore.ca/</a>',
    "lng": '-80.105974',
    "postalcode": 'L0M 1G0',
    "city": 'Creemore, ON'
},
{
    "html": '<div>668 Erb St West</div>',
    "title": 'Goodness Me!',
    "lat": '43.446787',
    "phone": '<a href="tel:+15198888214">(519) 888-8214</a>',
    "website": '<a href="http://goodnessme.ca/">goodnessme.ca/</a>',
    "lng": '-80.575308',
    "postalcode": 'N2T 2Z7',
    "city": 'Waterloo, ON'
},
{
    "html": '<div>605 West St</div>',
    "title": 'Goodness Me!',
    "lat": '43.170857',
    "phone": '<a href="tel:+15197588404">(519) 758-8404</a>',
    "website": '<a href="http://goodnessme.ca/">goodnessme.ca/</a>',
    "lng": '-80.247154',
    "postalcode": 'N3R 7C5',
    "city": 'Brantford, ON'
},
{
    "html": '<div>36 Wellington St W</div>',
    "title": 'Goodness Me!',
    "lat": '43.539492',
    "phone": '<a href="tel:+15198269042">(519) 826-9042</a>',
    "website": '<a href="http://goodnessme.ca/">goodnessme.ca/</a>',
    "lng": '-80.244928',
    "postalcode": 'N1N 3R8',
    "city": 'Guelph, ON'
},
{
    "html": '<div>720 Bristol Rd W</div>',
    "title": 'Goodness Me!',
    "lat": '43.599191',
    "phone": '<a href="tel:+19057128402">(905) 712-8402</a>',
    "website": '<a href="http://goodnessme.ca/">goodnessme.ca/</a>',
    "lng": '-79.679471',
    "postalcode": 'L5R 4A5',
    "city": 'Mississauga, ON'
},
{
    "html": '<div>1000 Upper Gage Ave</div>',
    "title": 'Goodness Me!',
    "lat": '43.213655',
    "phone": '<a href="tel:+19053888400">(905) 388-8400</a>',
    "website": '<a href="http://goodnessme.ca/">goodnessme.ca/</a>',
    "lng": '-79.846116',
    "postalcode": 'L8V 4R5',
    "city": 'Hamilton, ON'
},
{
    "html": '<div>2300 Fairview St</div>',
    "title": 'Goodness Me!',
    "lat": '43.342726',
    "phone": '<a href="tel:+19056318404">(905) 631-8404</a>',
    "website": '<a href="http://goodnessme.ca/">goodnessme.ca/</a>',
    "lng": '-79.802743',
    "postalcode": 'L7R 2E4',
    "city": 'Burlington, ON'
},
{
    "html": '<div>Park Place, 79 Mapleview Dr E #2</div>',
    "title": 'Goodness Me!',
    "lat": '44.340316',
    "phone": '<a href="tel:+17057307689">(705) 730-7689</a>',
    "website": '<a href="http://goodnessme.ca/">goodnessme.ca/</a>',
    "lng": '-79.681321',
    "postalcode": 'L4N 6P4',
    "city": 'Barrie, ON'
},
{
    "html": '<div>795 Balm Beach Rd E</div>',
    "title": 'Foodland',
    "lat": '44.734948',
    "phone": '<a href="tel:+17055274067">(705) 527-4067</a>',
    "website": '<a href="ontario.foodland.ca/">ontario.foodland.ca</a>',
    "lng": '-79.906558',
    "postalcode": 'L4R 4K4',
    "city": 'Midland, ON'
},
{
    "html": '<div>3088 Horseshoe Valley Rd W</div>',
    "title": 'Nicholyn Farms',
    "lat": '44.507691',
    "phone": '<a href="tel:+17057374498">(705) 737-4498</a>',
    "website": '<a href="nicholyn.com">nicholyn.com/</a>',
    "lng": '-79.774850',
    "postalcode": 'L0L 2K0',
    "city": 'Phelpston, ON'
},
{
    "html": '<div>579 Kerr St</div>',
    "title": 'Organic Garage',
    "lat": '43.448999',
    "phone": '<a href="tel:+19058491648">(905) 849-1648</a>',
    "website": '<a href="organicgarage.ca/">organicgarage.ca/</a>',
    "lng": '-79.688269',
    "postalcode": 'L6K 3E1',
    "city": 'Oakville, ON'
},
{
    "html": '<div>55 Doncaster Ave</div>',
    "title": 'Ambrosia Natural Foods',
    "lat": '43.448999',
    "phone": '<a href="tel:+19058817811">(905) 881-7811</a>',
    "website": '<a href="ambrosia.ca/">ambrosia.ca/</a>',
    "lng": '-79.688269',
    "postalcode": 'L3T 1L7',
    "city": 'Markham, ON'
},
{
    "html": '<div>8020 Bathurst St #1</div>',
    "title": 'Organic Garage',
    "lat": '43.816478',
    "phone": '<a href="tel:+19058893539">(905) 889-3539</a>',
    "website": '<a href="organicgarage.ca/">organicgarage.ca/</a>',
    "lng": '-79.452126',
    "postalcode": 'L4J 0B8',
    "city": 'Vaughan, ON'
},
{
    "html": '<div>57 Northview Blvd</div>',
    "title": 'Ambrosia Natural Foods',
    "lat": '43.791190',
    "phone": '<a href="tel:+19052642510">(905) 264-2510</a>',
    "website": '<a href="ambrosia.ca/">ambrosia.ca/</a>',
    "lng": '-79.543901',
    "postalcode": 'L4L 8X9',
    "city": 'Vaughan, ON'
},
{
    "html": '<div>18 Franks Ln</div>',
    "title": 'The Hive',
    "lat": '44.869824',
    "phone": '<a href="tel:+17057562349">(705) 756-2349</a>',
    "website": '<a href="http://www.thehivehoneyharbour.com/">www.thehivehoneyharbour.com/</a>',
    "lng": '-79.822513',
    "postalcode": 'P0E 1E0',
    "city": 'Honey Harbour, ON'
},
{
    "html": '<div>200 Christie St</div>',
    "title": 'Fiesta Farms',
    "lat": '43.668722',
    "phone": '<a href="tel:+14165371235">(416) 537-1235</a>',
    "website": '<a href="fiestafarms.ca/">fiestafarms.ca/</a>',
    "lng": '-79.420678',
    "postalcode": 'M6G 3B6',
    "city": 'Toronto, ON'
},
{
    "html": '<div>813 - 46th Street East</div>',
    "title": 'Sweet and Sprouted Foods',
    "lat": '52.164592',
    "phone": '<a href="tel:+13067179923">(306)-717-9923</a>',
    "website": '<a href="http://www.sweetandsprouted.com/">sweetandsprouted.com/</a>',
    "lng": '-106.653886',
    "postalcode": 'S7K 0X1',
    "city": 'SASKATOON, SK'
},
{
    "html": '<div>2155 Rue Mackay</div>',
    "title": 'Santé Ecoloco',
    "lat": '45.497428',
    "phone": '<a href="tel:+15144487773">(514)-448-7773</a>',
    "website": '<a href="santeecoloco.ca/">santeecoloco.ca/</a>',
    "lng": '-73.579860',
    "postalcode": 'H3G 2J2',
    "city": 'Montréal, QC'
},
{
    "html": '<div>17 Andrew St N</div>',
    "title": 'Gaudaur Natural Foods',
    "lat": '44.607987',
    "phone": '<a href="tel:+17053257143">(705) 325-7143</a>',
    "website": '<a href="gaudaur.com/">gaudaur.com/</a>',
    "lng": '-79.421280',
    "postalcode": 'L3V 5H9',
    "city": 'Orillia, ON'
},
{
    "html": '<div>163 First St., Orangeville</div>',
    "title": 'Harmony Whole Foods Market',
    "lat": '43.932211',
    "phone": '<a href="tel:+15199418961">(519) 941-8961</a>',
    "website": '<a href="http://www.harmonymarket.com/">harmonymarket.com/</a>',
    "lng": '-80.100128',
    "postalcode": 'L9W 3J8',
    "city": 'Orangeville, ON'
},
{
    "html": '<div>301 - 1st Avenue S</div>',
    "title": 'Edgewater Natural Health Ltd',
    "lat": '49.763171',
    "phone": '<a href="tel:+18074672375">(807) 467-2375</a>',
    "website": '<a href="https://www.facebook.com/Edgewater-Natural-Health-204468803020680/">www.facebook.com/Edgewater-Natural-Health-204468803020680/</a>',
    "lng": '-94.488688',
    "postalcode": 'P9N 1W2',
    "city": 'Kenora, ON'
},
{
    "html": '<div>34 King St. W, Dundas</div>',
    "title": 'Picone\'s Food &amp. Market',
    "lat": '43.266213',
    "phone": '<a href="tel:+19056288642">(905) 628-8642</a>',
    "website": '<a href="http://www.piconefinefood.ca/">www.piconefinefood.ca/</a>',
    "lng": '-79.955486',
    "postalcode": 'L9H 1T7',
    "city": 'Dundas, ON'
},
{
    "html": '<div>220c 2nd ave NW</div>',
    "title": 'Healthy Treasures',
    "lat": '55.283449',
    "phone": '<a href="tel:+17808494442">(780) 849-4442</a>',
    "website": '<a href="http://www.healthytreasuresslavelakeab.canic.ws/">healthytreasuresslavelakeab.canic.ws/</a>',
    "lng": '-114.774329',
    "postalcode": 'T0G 2A0',
    "city": 'Slave Lake, AB'
},
{
    "html": '<div>2110 50 Ave</div>',
    "title": 'Sobeys Gaetz South',
    "lat": '52.238022',
    "phone": '<a href="tel:+14033480848">(403) 348-0848</a>',
    "website": '<a href="www.sobeys.com/en/stores/sobeys-gaetz-south/">sobeys-gaetz-south/</a>',
    "lng": '-113.816353',
    "postalcode": 'T4R 2K1',
    "city": 'Red Deer, AB'
},
{
    "html": '<div>3106 - 50th Ave</div>',
    "title": 'Nutter\'s',
    "lat": '53.266133',
    "phone": '<a href="tel:+17808754617">(780) 875-4617</a>',
    "website": '<a href="nutters.com/">nutters.com/</a>',
    "lng": '-110.005918',
    "postalcode": 'T9V 1H4',
    "city": 'Lloydminster, AB'
},
{
    "html": '<div>814 4th Ave South</div>',
    "title": 'Umami Shop',
    "lat": '49.694486',
    "phone": '<a href="tel:+14033288899">(403) 328-8899</a>',
    "website": '<a href="umamishop.ca/">umamishop.ca/</a>',
    "lng": '-112.834360',
    "postalcode": 'T1J 0P2',
    "city": 'Lethbridge, AB'
},
{
    "html": '<div>10-338 10 Street NW</div>',
    "title": 'Sunnyside Natural Market',
    "lat": '51.055552',
    "phone": '<a href="tel:+14032707477">(403) 270-7477</a>',
    "website": '<a href="www.sunnysidemarket.ca/">www.sunnysidemarket.ca/</a>',
    "lng": '-114.085385',
    "postalcode": 'T2N 1V8',
    "city": 'Calgary, AB'
},
];

var map;
var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

    var featureOpts=[{featureType:"all",elementType:"labels",stylers:[{visibility:"off"}]},{featureType:"administrative",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"administrative",elementType:"labels.text",stylers:[{visibility:"on"},{saturation:"-100"},{lightness:"65"},{gamma:"0.25"},{weight:"2.18"}]},{featureType:"landscape",elementType:"all",stylers:[{visibility:"on"},{color:"#ffffff"}]},{featureType:"landscape",elementType:"labels",stylers:[{visibility:"off"}]},{featureType:"landscape.man_made",elementType:"geometry",stylers:[{weight:.9},{visibility:"off"}]},{featureType:"poi",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"poi.attraction",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"poi.park",elementType:"geometry.fill",stylers:[{visibility:"on"},{color:"#bcd979"}]},{featureType:"road",elementType:"all",stylers:[{visibility:"on"},{color:"#DCDCDC"}]},{featureType:"road",elementType:"labels",stylers:[{visibility:"off"}]},{featureType:"road",elementType:"labels.text.fill",stylers:[{visibility:"on"},{color:"#333333"}]},{featureType:"road.highway",elementType:"geometry",stylers:[{visibility:"on"},{color:"#DCDCDC"}]},{featureType:"road.highway",elementType:"geometry.fill",stylers:[{color:"#DCDCDC"},{visibility:"off"}]},{featureType:"road.highway",elementType:"labels",stylers:[{visibility:"off"},{hue:"#ff0000"}]},{featureType:"road.arterial",elementType:"all",stylers:[{color:"#DCDCDC"}]},{featureType:"road.arterial",elementType:"labels.text",stylers:[{color:"#fbd500"}]},{featureType:"road.arterial",elementType:"labels.text.fill",stylers:[{color:"#000000"}]},{featureType:"road.arterial",elementType:"labels.text.stroke",stylers:[{color:"#fbd500"}]},{featureType:"transit",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"water",elementType:"all",stylers:[{visibility:"simplified"},{color:"#c3dfe0"}]},{featureType:"water",elementType:"labels",stylers:[{visibility:"off"}]},{featureType:"water",elementType:"labels.text",stylers:[{visibility:"off"}]},{featureType:"water",elementType:"labels.icon",stylers:[{visibility:"off"}]}];

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(51.448627, -92.828405),
        scrollwheel: false,
        disableDefaultUI: true,
        draggable: false,
        zoomControl: true,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
        },
        mapTypeId: MY_MAPTYPE_ID
    };


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


    var infoWindow = new google.maps.InfoWindow();

    var i = 0;
    var interval = setInterval(function () {
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title,
        });
        var styledMapOptions = {
            name: 'Custom Style'
        };

        var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

        map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                map.setCenter(marker.getPosition());
                infoWindow.setContent('<p>' + data.title + '</p>' + '<p>' + data.city + '</p>' + '<p>' + data.html + '</p>');
                infoWindow.open(map, marker);
            });
        })(marker, data);
        i++;
        if (i == markers.length) {
            clearInterval(interval);
            var bounds = new google.maps.LatLngBounds();

        }
    }, 80);

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var geolocpoint = new google.maps.LatLng(latitude, longitude);
            map.setCenter(geolocpoint);
            map.setZoom(11)
        });
    }

    $("#geocomplete").geocomplete({
        details: ".geo-details",
        detailsAttribute: "data-geo"
    });

    var output = '<div class="searchresults">';
    $.each(markers, function(key, markers) {    
        output += '<div>';
        output += '<h2>'+ markers.title +'</h2>';
        output += '<div>'+ markers.html +'</div>';
        output += '<div>'+ markers.city +'</div>';
        output += '<div>'+ markers.postalcode +'</div>';
        output += '<div>'+ markers.phone +'</div>';
        output += '</div>';

    });
    output += '</div>';
    $('#legend').html(output);

    $('#geocomplete').keyup(function() {
        var searchField = $('#geocomplete').val();
        var myExp = new RegExp(searchField, "i");
        var output = '<div class="searchresults">';
      
        var flagUnfound = true;
        $.each(markers, function(key, markers) {
            
            
            if (markers.city.search(myExp) != -1 || markers.postalcode.search(myExp) != -1) {
              flagUnfound = false;
              
                output += '<div>';
                output += '<h2>'+ markers.title +'</h2>';
                output += '<div>'+ markers.html +'</div>';
                output += '<div>'+ markers.city +'</div>';
                output += '<div>'+ markers.postalcode +'</div>';
                output += '<div>'+ markers.phone +'</div>';
                output += '</div>';
                
            }
        });
      
        if(flagUnfound){
          output += ( '<p>No search result</p>' );
        }
        output += '</div>';
        $('#legend').html(output);
    });

}
google.maps.event.addDomListener(window, 'load', initialize);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console