Hi Henri,

Is this happening on the front-end templates or the back-office data-type?

If it's the front-end template, not sure what it could be - depends on your implementation - any references to code snippets or screengrabs would be useful.

For the back-office, I haven't seen that happen - again any screengrabs (and which browser/version you are using) would be helpful.

Thanks, Lee.

Front end works just fine, and it works just fine also when adding datatype to document types. However, we also have a "wizard" kind of usercontrol to add nodes of this type. Added the control like this:

MapControl = new Our.Umbraco.GoogleMaps.DataTypes.SingleLocation.SingleLocationControl();
LocationPlaceholder.Controls.Add(MapControl);

the googles tell me that i should do google.map.trigger(map, 'resize'), but that namespace is not available, neither is the map object under UmbracoGoogleMap.

Here's a screengrab: http://imgur.com/PzuTE

Hi Henri,

I haven't tried using the SingleLocation control outside the data-type itself ... as long as ClientDependency is in place (to register the CSS/JS), it "should" work (don't hold me to that :-P)

Thinking that you would need to define the properties for the control before you add it to the placeholder:

MapControl = new Our.Umbraco.GoogleMaps.DataTypes.SingleLocation.SingleLocationControl()
{ DefaultLocation = "53.430785,-2.960515", DefaultZoom = 12, MapHeight = 375, MapWidth = 459 };
LocationPlaceholder.Controls.Add(MapControl);

Cheers, Lee.

Oh the properties are defined and set, i just skipped that part.

Well, it kinda does work, except for the fact that the map itself is rendered in the wrong place. It IS there, its just the wrong size and location.

Maybe somekind of refresh function that does the trigger resize? I've been looking at this problem for hours now and I don't really know what more I can try without editing the package..

[edit:] also noteworthy that it works just fine if you resize the browser window

Hi,

I have exactly the same problem, just that I'm not using the umbraco 4.7 google map datatype, I'm running umbraco 4.5.3 and I created my own google map datatype using the umbraco usercontrol wrapper.

I also noticed that if you click on the tab in which the google map is BEFORE it loads, then ther eis no problem. I'm thinking about a problem with the ajax loading the map in a div where display = none, but still don't know how to fix it.

I hope we will find a solution because I really have to fix this issue on an online website from one of my company's customer... :/

Cheers, Fred

[edit] and i forgot to say that custom google map datatype was working fine for allmost 1 year now, and suddenly this issue came, and I didn't changed anything in the code, so I'm really thinking about something about the google map API, but still can't find out what... :(

hi again, I worked all day to find something about this problem, haven't found the perfect solution yet, but still got a half one for now, add this in your javascript:

var mapTab = $("#map_canvas").parents(".tabpage").get(0);

        mapTab.onmousemove = test;




    function test() {



        if (!refreshed) {

            google.maps.event.trigger(maCarte, 'resize');

            maCarte.setZoom(maCarte.getZoom());

            refreshed = true;

           // alert("done");

        }

    } 

so as you can see this actually search for the main div that is used as the tabContainer, and as soon as you put your mouse in it it resizes the googlemap and that corrects the bug. I hope you can use this, or better improve it for your own needs.

Cheers, Fred

In my case it doesn't work since i dont have access to

google.maps.*

Unfortunately.. :/

wow, this is an other problem, maybe your javascript is before the API is called ? somewhere in de datatype they must use the  in order to access to the google map api. So the idea would be to put your javascript after this. I hope you will find something, If I find something else/better I'll post again, good luck with this !

ps: i'm not shure if we have the exact same problem but I also noticed that if my google map is in the first tab, the one that is visible at first when you go on a content, then there is no problem with the rendering, I couldn't put mine in the first tab, but if you can this could be a solution. 

Hi, I try to use Google Maps DataType v3 in a User Control .

In page_load I have:

MapControl = new Our.Umbraco.GoogleMaps.DataTypes.SingleLocation.SingleLocationControl() { DefaultLocation = "53.430785,-2.960515", DefaultZoom = "12", MapHeight = "375", MapWidth = "459" };

 plh_map.Controls.Add(MapControl);

While loading the page I get the following error

[NullReferenceException: Object reference not set to an instance of an object.]
   Our.Umbraco.GoogleMaps.Extensions.ResourceExtensions.AddResourceToClientDependency(Page page, Type resourceContainer, String resourceName, ClientDependencyType type, Int32 priority) +125
   Our.Umbraco.GoogleMaps.Extensions.ResourceExtensions.AddResourceToClientDependency(Control ctl, String resourceName, ClientDependencyType type) +90
   Our.Umbraco.GoogleMaps.DataTypes.SingleLocation.SingleLocationControl.OnLoad(EventArgs e) +110
   System.Web.UI.Control.LoadRecursive() +74
   System.Web.UI.Control.LoadRecursive() +146
   System.Web.UI.Control.LoadRecursive() +146
   System.Web.UI.Control.LoadRecursive() +146
   System.Web.UI.Control.LoadRecursive() +146
   System.Web.UI.Control.LoadRecursive() +146
   System.Web.UI.Control.LoadRecursive() +146
   System.Web.UI.Control.LoadRecursive() +146
   System.Web.UI.Control.LoadRecursive() +146
   System.Web.UI.Control.LoadRecursive() +146
   System.Web.UI.Control.LoadRecursive() +146
   System.Web.UI.Control.LoadRecursive() +146
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2207

What could be causing this?

I'm having exactly the same problem here:

I'm using Google Maps Data Type v2.1.0 in an Umbraco 6.1.5 install

my script looks like this:

<script>

   $(function () {  

       $('div.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]);

           var p = new google.maps.LatLng(lat, lon);

           var myOptions = {

               center: p,

               zoom: zoom,

               mapTypeId: google.maps.MapTypeId.ROADMAP

           };

           fm = new google.maps.Map(document.getElementById(mapId),

           myOptions);

           var marker = new google.maps.Marker({

               position: p,

               title: "We are here!",

               animation: google.maps.Animation.BOUNCE

           });

           // To add the marker to the map, call setMap();

           marker.setMap(fm);

       });

 });

  </script>

This script always worked perfectly in my projects.

And my html element looks like this:

<section class="row-fluid">

                            <div id="map" class="map">

                              @if (Model.Content.HasValue("activityGoogleMap"))

                                {

                                    <h2>Map</h2>

                                    @Model.Content.GetPropertyValue("activityGoogleMap")

                                }                        

                            </div>

                        </section>

Already spent have a day looking to solve this issue. It's driving me nuts!

Hi Anthony,

Try removing the <h2> tag from the <div class="map"> - as the JavaScript is trying to parse the text value, (CSV), but the H2 is breaking that.

Cheers,
- Lee

@Lee, thanks man, I was almost ready for the funny house. It works now!

I used:

 $timeout(function () { initialize(); }, 2000);

which makes it working.

When I have the map on the first tab, everything is fine, but it goes gray when the map on a tab not the first one.

I hope that makes sense.

is working on a reply...