ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Javascript template file not outputting value from custom field when using EE tag

August 25, 2010 6:11pm

Subscribe [2]
  • #1 / Aug 25, 2010 6:11pm

    aerometric

    9 posts

    This question may be related to a resolved thread.

    I’m trying to add EE tags to a javascript file. The javascript file is setup as an EE template, and it’s type is set to “javascript”. I’m embedding the javascript template in the footer template, using this code:

    {embed="includes/map-api-projects"}

    ... where the template group is “includes” and the javascript template is “map-api-projects”.

    When I load the page & view the source, the EE tags are being displaying exactly as they are written in the javascript. They are not inserting the information from the custom fields.

    I’ve tried adding

    $conf['protect_javascript'] = 'y';

    and

    $conf['protect_javascript'] = 'n';

    to the config file. Neither have worked.

    Here is my javascript code. Please note, I am opening & closing it with the standard script tags, but I don’t think the forum will allow that to show.

    You’ll see the {page_projects} tag. I’m trying to repeat that block of code for every project entry in EE. So each time I add a new project entry, the custom fields inside this tag will be used and another marker will be created.

    So here is what’s inside the script tags:

    var map = null;
    function initialize() {
        var myOptions = {
            zoom: 4,
            center: new google.maps.LatLng(39.828175,-98.5795),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
            },
            scaleControl: true,
            scaleControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_LEFT
            }
        };
        
        map = new google.maps.Map(document.getElementById("googlemap"),
                myOptions);
        
        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });
        
        // Create location points & add markers to the map
        {page_projects}
        var point = new google.maps.LatLng({project_coordinate_lat},{project_coordinate_lng});
        var marker = createMarker(point,'<h1>{if project_short_title}{project_short_title}{if:else}{title}{/if}<\/h1>{project_summary}<\/p><a href="{page_url}" title="View project ยป">View project »<\/a>')
        {/page_projects}
    
    } // end initialize
    
    // Set default size of infowindow
    var infowindow = new google.maps.InfoWindow(
        {
            size: new google.maps.Size(150,50)
        });
    
    // Create custom marker image
    var image = new google.maps.MarkerImage('/img/icon/googlemap-marker.png',
        // This marker is 20 pixels wide by 32 pixels tall.
        new google.maps.Size(26, 26),
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is 13,26.
        new google.maps.Point(13, 26));
    
    // Display markers & infowindows on the map
    function createMarker(latlng, html) {
        var contentString = html;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
                    icon: image,
            zIndex: Math.round(latlng.lat()*-100000)<<5
            });
        // Open infowindows on click event
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString); 
            infowindow.open(map,marker);
        });
    } // end function createMarker
  • #2 / Aug 26, 2010 1:07pm

    aerometric

    9 posts

    I figured it out.

    I did need to include the

    $conf['protect_javascript'] = 'n';

    variable in the config file.

    I was also using the wrong EE tags. Instead of

    {page_projects}

    I needed to use

    {exp:weblog:entries weblog="projects"}

    I also changed the way I embedded the javascript. I removed the script tags from the beginning and end of my template file. And I embedded the javascript in my footer like this:

    {script type="text/javascript" src="{path="includes/map-api-projects"}"}{/script}

    with the template group being “includes” and the template file being “map-api-projects”. I used curly brackets for the example because the forum strips out the normal greater than/less than signs. But you would use the normal gt and lt signs.

    I am now running into an issue with apostrophes and/or double quotes breaking the javascript code (these characters are found within my EE custom fields that I’m placing in the infowindows).

    I think I found a plugin to solve this issue, but I’ll post again when I’m sure it’s working.

    This tutorial was extremely helpful:
    http://net.tutsplus.com/tutorials/cmss/creating-a-google-map-with-expressionengine/

  • #3 / Aug 27, 2010 2:36am

    John Henry Donovan

    12339 posts

    aerometric,

    Welcome to the forums 😊

    Thanks for the follow-up. Let us know how you get on. Have a look over at devot-ee.com. There are numerous Google map add-ons available which may help

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases