More in this section

Forums / General Discussions / Google Maps and Java Script Widget

Google Maps and Java Script Widget

17 posts, 1 answered
  1. Tom Miller
    Tom Miller avatar
    52 posts
    Registered:
    27 Feb 2010
    25 Sep 2011
    Link to this post
    Trying to implement this just using the Java Script components

    From The Google site on implementing API 3.0

    1. We declare the application as HTML5 using the <!DOCTYPE html> declaration.
    2. We include the Maps API JavaScript using a script tag.
    3. We create a div element named "map_canvas" to hold the Map.
    4. We create a JavaScript object literal to hold a number of map properties.
    5. We write a JavaScript function to create a "map" object.
    6. We initialize the map object from the body tag's onload event.

    Questions:
    1. Does the "Java Script" widget add script tags automatically?  If yes, then similar questions as #2.
    2. How do I add items to the DIV tab of a section?  Each content element is always included in a DIV tab, so how do I modify the opening DIV tab?  I looked under "advance", and there doesn't seem to be an adhoc way to add to the DIV tag.
    3. Item #6 above, I see as a similar problem as #2 above but at a page level.  Is this dealt with the options of where to include the Script object?  If so, should I be using the "Before the closing body tag".

    I have more questions, but they will likely change depending on the answers to these questions.

    Thanks.
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    28 Sep 2011
    Link to this post
    Hello Tom Miller,

    1) Treat the editing area of the JavaScript as a JS file. In it you have to include only JS code. The script widget renders the script tags automatically.

    2) The easiest way to insert HTML to your page is to use the Content Block control. It has html mode which allows you to write html, insert div tags, etc. This means that you can use Content Block control in combination with the JavaScript widget to provide the needed HTML place holders in the Content Block and write necessary script in the JavaScript widget.

    3) The best approach is to include all custom scripts before the closing body tag. The reason for this is that there are other controls on the page that register embedded scripts when they are rendered. Usually those scripts are included in the head, and the best practice here is to include custom scripts before the body end tag so that they do not conflict.

    Kind regards,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Tom Miller
    Tom Miller avatar
    52 posts
    Registered:
    27 Feb 2010
    02 Oct 2011
    Link to this post
    Thanks for your suggestions.  Still not working but here is what I have done so far:

    #1  Drop a Java Script widget on the page; Set the URL to:http://maps.googleapis.com/maps/api/js?v=3&sensor=false; Choose the option: In the Head Tag.

    Google really seams to emphasis putting this in the Head, so I did.  This is working as I had the sensor option wrong and it was throwing an error.  sensor is to automatically sense the users location, nice for smart phones, but not needed for a website (most of the time).

    #2  Drop another Java Script widget on the page; Use the "Script" option
    function initialize() {
      var myLatlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("BankMap"), myOptions);
    }
    Use the option: "Before the Body Closing Tag" as you suggested.

    The last item I am stuck on is:

    <body onload="initialize()">

    How do I call "initilalize" when the form is opened?

    Thanks.
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    02 Oct 2011
    Link to this post
    Have you tried with jQuery?

    Change
    function initialize() {
    ...
    }

    To

    $(document).ready(function() {
      var myLatlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("BankMap"), myOptions);
    });

    (this assumes you have jQuery loaded, but who doesn't these days!  :)

    If you don't (or don't know) and that doesnt work try $telerik.$(document).ready instead

    Steve
  5. Tom Miller
    Tom Miller avatar
    52 posts
    Registered:
    27 Feb 2010
    03 Oct 2011
    Link to this post
    Neither of those worked.  I wonder if it is having a problem finding the div tag.  I am new with Sitefinity, newish with java script, and dabbled in ASP.Net.  Not sure if JQuery is active or not.  I did not turn it on for Sitefinity, but thought 4.x was using it by default.  I am currently running 4.2 with the hotfix.

    Thanks.
  6. Tom Miller
    Tom Miller avatar
    52 posts
    Registered:
    27 Feb 2010
    04 Oct 2011
    Link to this post
    At this point I am assuming that Google Maps won't work with Sitefinity.  Pretty disappointing.

    What is everyone else using? 

    Thanks for all the help.
  7. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    04 Oct 2011
    Link to this post
    It's got nothing to do with sitefinity once you're dealing with the clientside right...once the browser has the markup and scripts you might as well have written it all by hand, sitefinity is the tool to generate that markup more easily.

    So try changing it to this

    $telerik.$(document).ready(function() {

    Sorry I must have missed the reply in my inbox :)
  8. Tom Miller
    Tom Miller avatar
    52 posts
    Registered:
    27 Feb 2010
    04 Oct 2011
    Link to this post
    Thanks for all your help. 

    This didn't help either but it looks right compared to other stuff I am seeing in the page when looking at it with FireBug.

    How do I debug this thing?  I am only seeing one error and it is a jpg missing error from the skin (css) I am using.

    Sorry, I am just frustrated as this only took me a couple of hours to get working using straight HTML and I have worked / researched this thing for at least a day.

    Thanks again for being so patient with me.
  9. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    04 Oct 2011
    Link to this post
    Do this...go into firebug, into the console tab (enable it)

    Reload the page

    Do you see any script errors?

    Inside of the document.ready method, put in an
    alert("this is being called");
    and reload the page...see if you get that popup
  10. Tom Miller
    Tom Miller avatar
    52 posts
    Registered:
    27 Feb 2010
    04 Oct 2011
    Link to this post
    That worked, so it is calling the procedure. 
    I have the Script Manager turned on for this page.
    I rename the div id and the function call with the same, just in case I kicked a char.

    <div id="MapDir"> </div>

    var map = new google.maps.Map(document.getElementById("MapDir"), myOptions);

    Could the "document." part be wrong? 

    Maybe it needs to be $telerik.$(document)

    Nope, got an error GetElementByID is not a function
  11. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    05 Oct 2011
    Link to this post
    Ok so after this line:
    var map = new google.maps.Map(document.getElementById("BankMap"), myOptions);

    Put an alert
    alert(map);

    (with firebugs console tab open)

    What do you get?...any errors?  Popup with Undefined?

    If you do this...do you get an element?
    var item = document.getElementById("BankMap");
    alert(item);

    Answered
  12. Tom Miller
    Tom Miller avatar
    52 posts
    Registered:
    27 Feb 2010
    05 Oct 2011
    Link to this post
    I got it working.  Here is the code

    $telerik.$(document).ready(function(){
      var MapDiv=document.getElementById("MapDir");

      var myLatlng = new google.maps.LatLng(38.899501, -77.031656);
      var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(MapDiv, myOptions);
    })

    Clearly it didn't like finding the element within another.

    So breaking this out:  var MapDiv=document.getElementById("MapDir"); and using the MapDiv variable in this line:  var map = new google.maps.Map(MapDiv, myOptions);    made the difference.

    Where can I find out more info about $telerik.$(document) scripting capabilities.
     
    Thanks by the way!!!!
  13. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    05 Oct 2011
    Link to this post
    Good phew, I was digging bottom of the bag without being able to view it live with firebug :)

    Ok, so here's how it works...

    $ is the jQuery prefix...so $(document).ready is the jQuery method that runs when the DOM is finished rendering.

    So since the telerik RadControls use jquery for animations and things, they internally embed the latest version of it in the Telerik.Web.UI.DLL to be served to the page.  Now that page MIGHT also be loading another version of jQuery...most pages do right?  So to avoid conflicts, they wrap their jQuery with $telerik

    So knowing that, then $telerik.$(document).ready is technically the same as $(document).ready....just wrapped with their version.

    Now sitefinity ALSO embeds jQuery using the Resource controls on some widgets, and when active on the page, you could just use $ instead of $telerik

    So the $telerik object also has a bunch of OTHER things it can do: LINK

    Confused? :)
  14. Tom Miller
    Tom Miller avatar
    52 posts
    Registered:
    27 Feb 2010
    10 Oct 2011
    Link to this post
    It does make sense.  I just am having problem making the leap from the API to real usage.  I have some questions about creating a custom Navigator.  I will start a new thread on that.  Thanks for all your help. 

    I will end up writing a blog on the stuff I learned on doing Google maps.

    Thanks again.
  15. Bruce
    Bruce avatar
    3 posts
    Registered:
    08 Nov 2010
    09 Nov 2011
    Link to this post
    This is a very good discussion. Did the jquery did not work in Firefox only? I am having a similar issue with my JQuery code but it seems not to recognize $ as a function. My code works fine in IE. Did you both have similar issue when resolving the your Javascript?
  16. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    09 Nov 2011
    Link to this post
    @Bruce
      If you get $ not recognized I'd say it's one of two things

    1) jQuery isn't loaded before your script runs
    2) jQuery is loading twice perhaps?
  17. Bruce
    Bruce avatar
    3 posts
    Registered:
    08 Nov 2010
    09 Nov 2011
    Link to this post
    @Steve

    Well i assumed that may be the case. This is my layout.

    I added the JQuery Code on the master page. However i registered the jquery.js on the Page Template. 

    The jquery file is not loading. How do you usually load the jquery.js file?
17 posts, 1 answered