Hey Tim, going to check it.

Thanks for the feedback. Antão.

The google maps datatype still works perfectly OK.

Great :)

Looking for some help with this... coming from wordpress so all is a little foreign but getting there!

• Have installed http://our.umbraco.org/projects/backoffice-extensions/google-maps-datatype (tick)
• Have select in document type "google maps" (tick)
• Created a new Document Type google maps seems to be working. 
• Save to publish document - not showing map. 

Hi James and welcome to our,

When you say Save to publish document - not showing map, I think you mean on the frontend of your website.

Have you seen Darren Ferguson´s blogpost about how to displaying maps on your Umbraco website.

http://blog.darren-ferguson.com/2009/3/14/quick-tip-displaying-maps-on-your-umbraco-website.aspx

I have used it before and here is how my template looks like:

I had a div for the map called map_container

<div id="map_container" class="map_placeholder"></div>

And the javascript looks like this: where my alias for the Google map field on the document type is googleMap

 <script type='text/javascript'>
    $(document).ready(function () {
          $("#map_container").googleMap("<umbraco:Item ID="Item1" field="googleMap" runat="server"></umbraco:Item>");
    });
    </script>
    <script type="text/javascript">

        $.fn.googleMap = function (location, options) {
            var defaults = {
                lat: -33.302959,
                long: 151.419733,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
                controls: ['GSmallZoomControl3D']
            };

            options = $.extend(defaults, options || {});

            if (location) {
                value = $.trim(location);
                var point = location.split(',');
                options.lat = parseFloat(point[0]);
                options.long = parseFloat(point[1]);
                options.zoom = parseFloat(point[2]);
            };

            var center = new google.maps.LatLng(options.lat, options.long);

            var map = new google.maps.Map(this.get(0), $.extend(options, { center: center }));

            var storeMarker = new google.maps.Marker({
                position: center,
                map: map,
                title: ""
            });
        };
    </script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

Hope this helps,

/Dennis

Thanks Dennis thats what I'm after... Yes you are right in regards to front end.

Assume we control the dimensions of the map through the class using using our CSS?

/James

Hi James,

Yeah for the Google Maps, to get visible on the frontend you have give the map containing div a width and and height using css. It could be by using a stylesheet or by inline styling.

The CSS inline in your head section:

<style>
    #map_container{
       height:500px;
       width:569px;
   }
</style>

CSS in a stylesheet:

#map_container{
   height:500px;
   width:569px;
}

Adding the width and height on div by using style attribute:

<div id="map_container" class="map_placeholder" style="width:569px;height:500px;"></div>

/Dennis

is working on a reply...