CODEWITHSUNDEEP
jquerypythonhtmlgoogle-mapscherrypy
Navvy
Navvy

Reputation: 237

Using Google Maps JQuery in Python CherryPy

I have tried using the google maps API in JQuery within my Python. The code I have, works when put into a separate file, and ran as an HTML page, but when I combine it with my Python to HTML using CherryPy, the map does not show, but by inspecting the element in the webpage, the outline of where it should be shows, but without the map in it.

javascript = """
        $('document').ready(init);

        function init(){
        var mapOpt = {
          center:new google.maps.LatLng(51.508742,-0.120850),
          zoom:5,
          mapTypeId:google.maps.MapTypeId.ROADMAP
          };
        var map=new google.maps.Map(document.getElementById("googleMap"),mapOpt);

        $('.bar-percentage[data-percentage]').each(function () {
                            var progress = $(this);
                            var percentage = Math.ceil($(this).attr('data-percentage'));
                            $({countNum: 0}).animate({countNum: percentage}, {
                                duration: 2000,
                                easing:'linear',
                                step: function() {
                                // What todo on every count
                                    var pct = '';
                                    if(percentage == 0){
                                        pct = Math.floor(this.countNum) + '%';
                                    }else{
                                        pct = Math.floor(this.countNum+1) + '%';
                                    }
                                progress.text(pct) && progress.siblings().children().css('width',pct);
                                }
                            });
                        });
        }

        google.maps.event.addDomListener(window, 'load', init);
        """

    return """<html>
    <head>
        <title>Fitbit</title>
        <link href="/static/css/fitbit.css" rel="stylesheet">

        <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
        <script src="http://maps.googleapis.com/maps/api/js"></script>
        <script>{0}</script>

    </head>

    <body>
        <header>
            <img id="title" src="/static/images/fitbit.png" alt="FITBIT">
        </header>

        <nav>
            <ul>
                <li><a href="#">User Info</a></li>
                <li><a href="#">Show All</a></li>
                <li><a href="#">Steps</a></li>
                <li><a href="#">Calories</a></li>
                <li><a href="#">Distance</a></li>
                <li><a href="#">Active Minutes</a></li>
                <li><a href="#">Floors</a></li>
                <li><a href="#">Sleep</a></li>
                <li><a href="#">Activities</a></li>
            </ul>
        </nav>

        <section id="dateBar">
            <section id="back">
                <a href="#"><img alt="backDate" src="/static/images/navArrowL.png" width="40" height="40"/></a>
            </section>
            <time id="date">
                <h4>{1}</h4>
            </time>
            <section id="forward">
                <a href="#"><img alt="forwardDate" src="/static/images/navArrow.png" width="40" height="40"/></a>
            </section>
        </section>
        <article id="allInfo">
            <article id="dailyInfo">
                <article class="infoWindow">
                    <article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Steps</article>
                    <article class="total">{2}</article>
                    <div id="bar-1" class="bar-main-container azure">
                        <div class="wrap">
                            <div class="bar-percentage" data-percentage="{3}"></div>
                            <div class="bar-container">
                            <div class="bar"></div>
                        </div>
                    </div>
                  </div>
                </article>

                <article class="infoWindow">
                    <article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Calories</article>
                    <article class="total">{4}</article>
                  <div id="bar-2" class="bar-main-container emerald">
                    <div class="wrap">
                      <div class="bar-percentage" data-percentage="{8}"></div>
                      <div class="bar-container">
                        <div class="bar"></div>
                      </div>
                    </div>
                  </div>
                </article>

                <article class="infoWindow">
                    <article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Distance</article>
                    <article class="total">{5}</article>
                    <div id="bar-3" class="bar-main-container violet">
                    <div class="wrap">
                      <div class="bar-percentage" data-percentage="{9}"></div>
                      <div class="bar-container">
                        <div class="bar"></div>
                      </div>
                    </div>
                  </div>
                </article>

                <article class="infoWindow">
                    <article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Active Minutes</article>
                    <article class="total">{6}</article>
                    <div id="bar-4" class="bar-main-container yellow">
                    <div class="wrap">
                      <div class="bar-percentage" data-percentage="{10}"></div>
                      <div class="bar-container">
                        <div class="bar"></div>
                      </div>
                    </div>
                  </div>
                </article>

                <article class="infoWindow">
                    <article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Floors</article>
                    <article class="total">{7}</article>
                    <div id="bar-5" class="bar-main-container red">
                    <div class="wrap">
                      <div class="bar-percentage" data-percentage="{11}"></div>
                      <div class="bar-container">
                        <div class="bar"></div>
                      </div>
                    </div>
                  </div>
                </article>

                <article class="infoWindow">
                    <article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Sleep</article>
                    <article class="total">Current</article>
                    <div id="bar-5" class="bar-main-container red">
                    <div class="wrap">
                      <div class="bar-percentage" data-percentage="33"></div>
                      <div class="bar-container">
                        <div class="bar"></div>
                      </div>
                    </div>
                  </div>
                </article>

                <article class="infoWindow">
                    <article class="infoLogo"><img alt="backDate" src="/static/images/footprint.png" width="40" height="40"/>Activity</article>
                    <article class="total">Currnt</article>
                    <div id="bar-5" class="bar-main-container red">
                    <div class="wrap">
                      <div class="bar-percentage" data-percentage="33"></div>
                      <div class="bar-container">
                        <div class="bar"></div>
                      </div>
                    </div>
                  </div>
                </article>
            </article>
            <article id="userInfo">

            </article>

            <section id="allActivities">
                <div id="googleMap" style="width:500px;height:380px;"></div>
            </section>
        </article>

    </body>

    </html>""" #.format(javascript, currentDate, todaySteps, stepsPerc, todayCalories, todayDistance, todayActive, todayFloors, caloriesPerc, distancePerc, activeMinsPerc, floorsPerc)

The JQuery gets called when it loads the first time, but it doesn't seem to be loading the map. Can google maps be used in this way within CherryPy or do I have to use the proper google maps api for Python?

Thanks.

Upvotes: 0

Views: 195

Answers (1)

kaho
kaho

Reputation: 4784

Huh.. it works for me. Might be there are something wrong with the format function. (and you # it out to make it work or... you forgot to un# it?)

I tried your code and it seems to be working fine. I modified the format to be ...""".format(javascript, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0), and the maps show up.

Other ways to fix it include using %s, or adding the strings inline like:

"""...<script>"""+javascript+"""</script>..."""

If all these does not fix your problem, it would be helpful to include the error messages you are getting.

Hope this help

Upvotes: 1

Related Questions