Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • David 11 posts 31 karma points
    Mar 16, 2012 @ 18:00
    David
    0

    Map no showing?

    I've set the location on Estate content, but the map doesn't show?

     

     <h3>Map</h3> 

        <!-- Google Maps API Map-->  

        <div id="estateMap"></div>

    <!-- Copy me into 'PageContent' End -->

    <!-- Copy me into 'scripts' Start -->

        <!-- Google Maps API --> 

        <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

        <script>

            //Only when the DOM is ready can we load the Map in...

            $(document).ready(function () {

                loadGoogleMap(

                    <umbraco:Item field="address" runat="server" />            );

            });

     </script> 

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Mar 16, 2012 @ 18:33
    Jan Skovgaard
    0

    Hi David

    Have you checked the console in firebug (if you're using Firefox for browsing) to see if you get a javascript error?

    /Jan

  • David 11 posts 31 karma points
    Mar 16, 2012 @ 18:44
    David
    0

    installed firebug, here is what it says:

     

    $ is not defined

    http://localhost:12755/locations/london/11-downer-road.aspx

    Line 159

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Mar 16, 2012 @ 19:23
    Jan Skovgaard
    0

    Hi David

    Are you calling the script before or after the jquery library has been initiated? (I asume you have remembered to reference it already, right? :)).

    /Jan

  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Mar 17, 2012 @ 10:02
    Warren Buckley
    0

    Hi David,
    As Jan says the problem is that this Javascript requires jQuery for it to run.
    Did you follow the tutorial from .NET magazine? 

    In the textpage.html example file is common markup that should be in the master template that all these templates inherit from and contains the reference to the jQuery library.

    I hope this helps.
    Warren 

  • David 11 posts 31 karma points
    Mar 19, 2012 @ 17:57
    David
    0

    Jan/Warren, I did try to follow the walk through and there are some references to the jquery (towards the end of the template) in the Master template (which was copied from textpage.html), but perhaps not in the right place?

    ------ My Master -----

    <%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
    <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
    <!doctype html>
        <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
        <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
        <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
        <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     
            <title>My Estate Agent - An Umbraco Website built for .NET Magazine</title>
            <meta name="description" content="<umbraco:Item field="metaDescription" recursive="true" runat="server" />">
            <meta name="keywords" content="<umbraco:Item field="metaKeywords" recursive="true" runat="server" />">
            <meta name="author" content="Admin User">
           
            <!-- Mobile viewport optimized: j.mp/bplateviewport -->
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
            <!-- CSS -->
            <link href="http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic" rel="stylesheet">
            <link rel="stylesheet" href="/css/reset.css">
            <link rel="stylesheet" href="/css/styles.css">
     
            <!-- jQuery UI Slider CSS -->
            <link rel="stylesheet" href="/css/custom-umbraco-theme/jquery-ui-1.8.16.custom.css">
     
            <!-- Flex Slider -->
            <link rel="stylesheet" href="/css/flexslider-1.4.css">
     
            <!-- Modernizr -->
          <script src="/scripts/libs/modernizr-2.0.6.min.js"></script>
        </head>
        <body>
     
        <div id="container">
          <header>
                <h1><a href="/"><umbraco:Item field="estateAgentName" recursive="true" runat="server" /></a></h1>
                <h2<umbraco:Item field="telephoneNumber" recursive="true" runat="server" /></h2>
          </header>     
          <div id="main" role="main" class="group">
            <aside>
                <nav>
      <umbraco:Macro runat="server" language="cshtml">
                        <ul>
                            @{ var homeNode = Model.AncestorOrSelf("Home"); }
                            <li><a href="@homeNode.Url" class="@Library.If(homeNode.Id == Model.Id, "selected", "")">@homeNode.Name</a></li>
                           
                            @foreach (var page in homeNode.Children.Where("Visible"))
                            {
                                <li>
                                    <a href="@page.Url" class="@Library.If(page.Id == Model.Id, "selected", "")">@page.Name</a>
                               
                                    <!-- If the page has child nodes (2nd level) -->
                                    @if (page.Children.Where("Visible").Count() > 0)
                                    {
                                        <ul>
                                            @foreach (var childPage in page.Children.Where("Visible"))
                                            {
                                                var isSelected = false;

                                                if (Model.Id == childPage.Id || (Model.Parent != null && Model.Parent.Id == childPage.Id)) {
                                                    isSelected = true;
                                                }

                                                <li><a href="@childPage.Url" class="@Library.If(isSelected, "selected", "")">@childPage.Name</a></li>   
                                            }
                                        </ul>
                                    }
                                </li>  
                            }
                        </ul>
      </umbraco:Macro>

                </nav>           
               
                <form id="search" action="/search" method="post">
                    <h3>Search</h3>
                    <label for="location">Location</label>
                    <select id="location" name="location">
                        <option value="-1">Any</option>
              
        <umbraco:Macro runat="server" language="cshtml">
       @{
                                //Select the homepage node & then find the child locations node
                                var homeNode = Model.AncestorOrSelf("Home");
                                var locationsNode = homeNode.DescendantsOrSelf("Locations").First();
                               
                                //For each child pages of the locations node
                                foreach (var page in locationsNode.Children)
                                {
                                    <option value="@page.Id">@page.Name</option>
                                }
               }
                  </umbraco:Macro>
                                               
                    </select>
                    <label for="price">Price</label>
                    <div id="priceSlider" class="slider"></div>
                    <input type="text" placeholder="£100,000" id="price" name="price" />
     
                    <label for="noRooms">Minimum Bedrooms</label>
                    <div id="roomSlider" class="slider"></div>
                    <input type="number" min="1" max="10" id="noRooms" name="noRooms" />
     
                    <label for="noBathrooms">Minimum Bathrooms</label>
                    <div id="bathroomSlider" class="slider"></div>
                    <input type="number" min="1" max="10" id="noBathrooms" name="noBathrooms" />
                    <input type="submit" value="Search" />
                </form>
            </aside>
            <article id="pageContent">

     <asp:ContentPlaceHolder Id="pageContent" runat="server">
      <!-- Insert default "pageContent" markup here -->
     </asp:ContentPlaceHolder>            

            </article>       
          </div>
          <footer>
                <p>A simple demo of <a href="http://umbraco.com/" target="_blank">Umbraco<img src="/img/umbraco-logo.png" alt="Umbraco CMS Logo"/></a> for .NET Magazine</p>
          </footer>
        </div><!--! end of #container -->
     
        <!-- jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="/scripts/libs/jquery-1.6.2.min.js"><\/script>')</script>
     
        <asp:ContentPlaceHolder Id="scripts" runat="server">
     <!-- Insert default "scripts" markup here -->
        </asp:ContentPlaceHolder>

        <!-- Our JS Files -->
        <script src="/scripts/libs/jquery-ui-1.8.16.custom.slider.min.js"></script>
        <script src="/scripts/libs/jquery.flexslider-min-1.4.js"></script>
        <script src="/scripts/site.js"></script>
     
        <!-- Google Analytics -->
        <script>
            var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
            (function (d, t) {
                var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
                g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
                s.parentNode.insertBefore(g, s)
            } (document, 'script'));
        </script>
        </body>
    </html>
    </asp:Content>

     

  • David 11 posts 31 karma points
    Mar 19, 2012 @ 18:44
    David
    0

    Ah, I added these into the <head> of master, now shows map:

     

     <!-- jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/scripts/libs/jquery-1.6.2.min.js"><\/script>')</script>

    <script src="/scripts/libs/jquery-ui-1.8.16.custom.slider.min.js"></script>
    <script src="/scripts/libs/jquery.flexslider-min-1.4.js"></script>
    <script src="/scripts/site.js"></script>

  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Mar 20, 2012 @ 09:54
    Warren Buckley
    0

    Hello David,
    Yes as you described you can move that to the top of the page and that will work fine as well.

    But I think you may have missed a small detail in the tutorial of the magazine.

     

    We need to create one more content place holder inside our Master template. Place the cursor after the jQuery reference towards the end of the markup and create another content place holder called ‘scripts’.

    So in the master template at the bottom of the page where the JavaScript was orginally you would have something that would look like this: 

        <!-- jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="/scripts/libs/jquery-1.6.2.min.js"><\/script>')</script>

        <!-- Child templates can insert JS here if required -->
        <asp:ContentPlaceHolder Id="scripts" runat="server"/>

        <!-- Our JS Files -->
        <script src="/scripts/libs/jquery-ui-1.8.16.custom.slider.min.js"></script>
        <script src="/scripts/libs/jquery.flexslider-min-1.4.js"></script>
        <script src="/scripts/site.js"></script>

     

    And the asp:ContentPlaceHolder with the ID of Scripts allows you to insert javascript references after the main jQuery library has loaded.

    So in the estate template you would have a section like this:

    <asp:Content ContentPlaceHolderId="scripts" runat="server">
        <!-- Google Maps API -->
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script>
            //Only when the DOM is ready can we load the Map in...
            $(document).ready(function ({
                //As our property address stores the value as CSV as lat,lon,zoom we can just pass it to our function loadGoogleMap
                loadGoogleMap(
                    <umbraco:Item field="address" runat="server"/>
                );
            });
        </script>
    </asp:Content>

    This will allow us to insert the Google Map JS reference and our snippet to our loadGoogleMap function passing in the longtitude and latitude to the function from the property 'address' which is our Google Map property.

    I hope this make sense and is alot clearer.

    Warren :)

  • David 11 posts 31 karma points
    Mar 21, 2012 @ 17:42
    David
    0

    Thanks for that.  I guess what I'm unclear about is why some of the JS file references go in to the "scripts" container in master, but the googleapi goes outside the "scripts" container in master.  Why does it need to be this.

  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Mar 21, 2012 @ 20:02
    Warren Buckley
    0

    Hi David,
    A V4 template uses ASP.NET Masterpages - http://www.asp.net/web-forms/tutorials/master-pages

    The idea for masterpages is that you have a master or top level template that contains common HTML markup for all templates so you dont have to repeat the same markup over and over again.

    So we have the estate template that inherits from the master template. In doing so we can insert only part of the HTML we need into the top level master template.
    So for the estate template we insert the Google Maps API JS file and along with our call to our custom function loadGoogleMap() this will inser the two files after the jQuery references in our top level master.

     As the <asp:content> tag in our estate template uses ContentPlaceHolderID that matches the ID of the <asp:contentplaceholder> tag

    Hoperfully this makes more sens to you now.

    Warren

Please Sign in or register to post replies

Write your reply to:

Draft