Maps - jordy33/turbogears_tutorial GitHub Wiki

Map Example

create map.mak and insert the following:

<%inherit file="local:templates.master"/>

<%def name="title()">
Learning TurboGears 2.3: Quick guide to the Quickstart pages.
</%def>
<%def name="head_content()">
    <script type="text/javascript">

        $(document).ready(

        function () {
        function initMap(latitude,longitude){
                var myLatLng = {lat: latitude, lng: longitude};
                map = new google.maps.Map(document.getElementById("map_canvas"), {
                  zoom: 16,
                  center: myLatLng
                });
                 var marker = new google.maps.Marker({
                          position: myLatLng,
                          map: map
                        });
                marker.setMap(map);
                google.maps.event.trigger(map, 'resize');
                $("#map_canvas").css("width", Math.round(window.innerHeight*.40)).css("height", Math.round(window.innerHeight*.40));

                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                  var target = $(e.target).attr("href") // activated tab

                    if (target==='#locationMap'){
                        google.maps.event.trigger(map, 'resize');
                        map.setCenter(marker.getPosition());
                    }

                });
            }
         initMap(19.530765, -99.191441);

        })
    </script>
</%def>


    <div class="row">
      <div class="col-md-12">
        <div class="page-header">
          <h2>Map Example</h2>
        </div>

        <div class="imgContainer">
            <div id="map_canvas"></div>
        </div>
      </div>
    </div>
<%def name="bottom_scripts()">

</%def>

Add the following to root.py

    @expose('myprojectname.templates.map')
    def map(self):
        return dict()

Replace master.mak with the following:

<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWs-R7lvNo7pooz56iQOqrfQXq0BbIfgo"
async defer></script>
    ${self.meta()}
    <title>${self.title()}</title>

    <link rel="stylesheet" type="text/css" media="screen" href="${tg.url('/css/bootstrap.min.css')}" />
    <link rel="stylesheet" type="text/css" media="screen" href="${tg.url('/css/style.css')}" />
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="${tg.url('/javascript/bootstrap.min.js')}"></script>

    ${self.head_content()}
</head>
<body class="${self.body_class()}">
    ${self.main_menu()}
  <div class="container">
    ${self.content_wrapper()}
  </div>

    ${self.footer()}

    ${self.bottom_scripts()}
</body>

<%def name="content_wrapper()">
  <%
    flash=tg.flash_obj.render('flash', use_js=False)
  %>
  % if flash:
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
              ${flash | n}
        </div>
      </div>
  % endif
  ${self.body()}
</%def>

<%def name="body_class()"></%def>
<%def name="meta()">
  <meta charset="${response.charset}" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</%def>
<%def name="head_content()"></%def>

<%def name="title()">  </%def>

<%def name="footer()">
  <footer class="footer hidden-xs hidden-sm">
    <a class="pull-right" href="http://www.turbogears.org"><img style="vertical-align:middle;" src="${tg.url('/img/under_the_hood_blue.png')}" alt="TurboGears 2" /></a>
    <p>Copyright &copy; ${getattr(tmpl_context, 'project_name', 'TurboGears2')} ${h.current_year()}</p>
  </footer>
</%def>

<%def name="main_menu()">
  <!-- Navbar -->
  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-content">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="${tg.url('/')}">
        <img src="${tg.url('/img/turbogears_logo.png')}" height="20" alt="TurboGears 2"/>
        ${getattr(tmpl_context, 'project_name', 'turbogears2')}
      </a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-content">
      <ul class="nav navbar-nav">
        <li class="${('', 'active')[page=='index']}"><a href="${tg.url('/')}">Welcome</a></li>
        <li class="${('', 'active')[page=='about']}"><a href="${tg.url('/about')}">About</a></li>
        <li class="${('', 'active')[page=='data']}"><a href="${tg.url('/data')}">Serving Data</a></li>
        <li class="${('', 'active')[page=='environ']}"><a href="${tg.url('/environ')}">WSGI Environment</a></li>
      </ul>

    % if tg.auth_stack_enabled:
      <ul class="nav navbar-nav navbar-right">
      % if not request.identity:
        <li><a href="${tg.url('/login')}">Login</a></li>
      % else:
        <li><a href="${tg.url('/logout_handler')}">Logout</a></li>
        <li><a href="${tg.url('/admin')}">Admin</a></li>
      % endif
      </ul>
    % endif
    </div>
  </nav>
</%def>

</html>

<%def name="bottom_scripts()">

 <script>
 </script>
</%def>

Test code:

http://localhost:8080/map
⚠️ **GitHub.com Fallback** ⚠️