Google Maps and Java Script Widget

Posted by Community Admin on 03-Aug-2018 23:44

Google Maps and Java Script Widget

Sitefinity - General Discussions

All Replies

Posted by Community Admin on 25-Sep-2011 00:00

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.

Posted by Community Admin on 28-Sep-2011 00:00

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

Posted by Community Admin on 02-Oct-2011 00:00

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:maps.googleapis.com/.../js 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.

Posted by Community Admin on 02-Oct-2011 00:00

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

Posted by Community Admin on 03-Oct-2011 00:00

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.

Posted by Community Admin on 04-Oct-2011 00:00

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.

Posted by Community Admin on 04-Oct-2011 00:00

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 :)

Posted by Community Admin on 04-Oct-2011 00:00

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.

Posted by Community Admin on 04-Oct-2011 00:00

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

Posted by Community Admin on 04-Oct-2011 00:00

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

Posted by Community Admin on 05-Oct-2011 00:00

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);

Posted by Community Admin on 05-Oct-2011 00:00

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!!!!

Posted by Community Admin on 05-Oct-2011 00:00

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? :)

Posted by Community Admin on 10-Oct-2011 00:00

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.

Posted by Community Admin on 09-Nov-2011 00:00

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?

Posted by Community Admin on 09-Nov-2011 00:00

@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?

Posted by Community Admin on 09-Nov-2011 00:00

@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?

This thread is closed