Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • antao 81 posts 371 karma points
    Jul 03, 2013 @ 10:19
    antao
    0

    V6.1.2 and google maps module

    Hey everyone, good morning! 

     

    I'm working with v6 recently and I'm wondering if there is allready something for use of google maps on this version? 

     

  • Comment author was deleted

    Jul 03, 2013 @ 10:28

    Think this one would still work on v6 http://our.umbraco.org/projects/backoffice-extensions/google-maps-datatype (since no breaking datatype changes have happened)

  • antao 81 posts 371 karma points
    Jul 03, 2013 @ 10:49
    antao
    0

    Hey Tim, going to check it.

    Thanks for the feedback. Antão.

  • antao 81 posts 371 karma points
    Jul 04, 2013 @ 10:06
    antao
    0

    The google maps datatype still works perfectly OK.

  • Comment author was deleted

    Jul 04, 2013 @ 10:07

    Great :)

  • James Hayward 17 posts 37 karma points
    Feb 17, 2014 @ 09:33
    James Hayward
    0

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

    So I think I have set up 80% of back office fine, and I'm missing something so that my may is formatted and displays on the page..
    Is there a step by step guide avaialble or can anyone provide some guidance to what I need to look at. I think my issue could be in my template, but I'm not sure. 
    Regards
    James

     

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Feb 17, 2014 @ 10:22
    Dennis Aaen
    0

    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

  • James Hayward 17 posts 37 karma points
    Feb 17, 2014 @ 20:53
    James Hayward
    0

    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

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Feb 17, 2014 @ 21:45
    Dennis Aaen
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft