Getting a JavaScript error when trying to render map.
Hi,
I have installed the package, included the Google Maps API, and added the JavaScript code to my jQuery document ready function - But upon trying to render the map I'm getting the following error in FireBug.
I can confirm the umbraco:Item is returning the co-ordinates and zoom level correctly.
And in my jQuery document ready function I have the following:
if (typeof ItemEditing == 'undefined') { $('div[class=map]').each(function() {
$(this).addClass('mapdimensions'); var mapId = $(this).attr('id'); var value = $(this).html(); value = $.trim(value); var point = value.split(',');
var lat = parseFloat(point[0]); var lon = parseFloat(point[1]); var zoom = parseFloat(point[2]); fm.maps[fm.maps.length] = new GMap2(document.getElementById(mapId)); var m = fm.maps[fm.maps.length-1]; var p = new GLatLng(lat, lon); m.setCenter(p, zoom);
var marker = new GMarker(p); m.addOverlay(marker); }); }
I am using jQuery version 1.4.2 and I'm also including the Google Maps API with the following code:
Getting a JavaScript error when trying to render map.
Hi,
I have installed the package, included the Google Maps API, and added the JavaScript code to my jQuery document ready function - But upon trying to render the map I'm getting the following error in FireBug.
"fm is not defined"
Any idea what could be causing this?
Thanks
Not unless you post your code and provide a lot more information. Is the page available on a public URL?
Hi Darren,
Unfortunately it is not on a public URL, but the code I'm using is as follows.
In my template I have:
<div id="map1" class="map">
<umbraco:Item field="map" runat="server"></umbraco:Item>
</div>
I can confirm the umbraco:Item is returning the co-ordinates and zoom level correctly.
And in my jQuery document ready function I have the following:
if (typeof ItemEditing == 'undefined') {
$('div[class=map]').each(function() {
$(this).addClass('mapdimensions');
var mapId = $(this).attr('id');
var value = $(this).html();
value = $.trim(value);
var point = value.split(',');
var lat = parseFloat(point[0]);
var lon = parseFloat(point[1]);
var zoom = parseFloat(point[2]);
fm.maps[fm.maps.length] = new GMap2(document.getElementById(mapId));
var m = fm.maps[fm.maps.length-1];
var p = new GLatLng(lat, lon);
m.setCenter(p, zoom);
var marker = new GMarker(p);
m.addOverlay(marker);
});
}
I am using jQuery version 1.4.2 and I'm also including the Google Maps API with the following code:
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=[MY_KEY_IS_HERE]" type="text/javascript"></script>
Thanks, Dave
The error message is just that you haven't declared the fm variable. you need something like:
at the top of your script.
Hi Dave,
Not sure why you are using the "fm.maps" namespace/array at all... wouldn't the following work fine?
Cheers, Lee.
@lee - i think the example comes from an old blog post of mine. perhaps we need to blog an update??
Hi Darren,
Thanks for your response.
I've added 'var fm = {}' to my script but FireBug is telling me now that 'fm.maps is undefined'.
Dave
@dave - erm ok:
Thanks, it's working now.
It did indeed come from a blog post - Linked to from the project page
"Information on rendering maps on the front end of your Umbraco website is here: www.darren-ferguson.com/.../...mbraco-website.aspx"
Thanks for the help.
Dave
Could you mark the topic as solved please?
Thanks.
is working on a reply...