Hi,

Yes this works great with 4.7, after installing, you have to go to the Developer section and add a new data type, then from the drop down list choose Google Maps.

Regards

Rich

thx .. i did that... created data type....

then I made one document type having propert mygooglemap with data type 'google map'. inserted this field on template.

now, when creating content page, I can see the field in which I can see ine textbox and search button. now I add address into textbox and press search button, map gets loaded accordingly, now I save and publish the page. but i cannot see map when I preview the page.

where am I going wrong?

Did you add any code to your template to show a google map?

Rich

no .. i have not added any code

The data type only allows you to select a  location via Google maps, you have to add code to your template to make use of the longitude & lattitude that gets held in Umbraco.

If you do some research on getting a google map to display on your site via the API then adding the Umbraco info is easy.

Rich

Hi hetaurhet,

When you search for a location and it loads into the map, you'll need to click on the pin/pointer and select "Use this location" from the speech bubble. Then click Save & Publish.

Reason for this is that your search may have multiple locations/results.

Cheers, Lee.

 hi Lee Kelleher,

I did what you said. but now its showing those values ( longitude & lattitude) .... and not map. so do I need to add some code as said by Rich Green? If yes, then guide me.

Hi hetaurhet,

The data-type itself is only for the Umbraco back-office, so it doesn't provide anything for the front-end templates.

However there is a good blog post by Darren about how to implement the map in your template: http://blog.darren-ferguson.com/2009/3/14/quick-tip-displaying-maps-on-your-umbraco-website.aspx

Cheers, Lee.

hii...

I saw the post and accordingly added google API javascript and script on that post in my template. But don't know from where to add JQuery specified in that post?

any help on this....

The CData tags arn't needed if your using this in a template, they are only there because I was using it in an xslt foreach.

Ben

is this code related to google map data type which I am using? I mean the package?

Yep, have you tried using it?

yes I tried this but i can not see anything...

you said that ... "Where googleMap is your coordinates." ..... so can you give more clarity about this? and where to replace in the above code?

also... i am not using xslt ... so how to write code for that?

hetaurhet

I am not certain if this will help you, but i was having a couple of issues getting this to display on my page. I followed the instructions from Ben (aghy) and nothing displayed, but Firebug was informing me that the data was being obtained.

A quick check and i realised that i needed to specify the dimensions of the container for the google maps. I therefore added the following to my CSS file:

#googleMap { height: 400px; width: 400px; }

A quick refresh and everything is now displaying perfectly.

Hope that helps.

Richard

hi Richard

let me try ... and I hope it works

ok... I can show the map now... but it is showing default location only... so where is the mistake..

hetaurhet

Have you followed the instructions mentioned by Lee Keller? Once you move the pin, you need to select it again and press the 'Use this location' link. This will update the Lat and Long. Then this will appear on your site. If you are, and the value is still not appearing is too output the co-ordinates on the page so you can visably see them. Make certain that the correct value is being used in Ben's code (did you call the property 'googleMap' or something else?)

Richard

hiii

I solved the problem.... in copy-paste, I just didnt replaced property name I am using. its working now...

thank you all for helping...

Glad you got it all working.

Richard

Ok, the reason I used multiple maps was because the company had several addresses they wanted to show.

This is how I've used them I've blanked a load of stuff out because this site isn't live yet and I don't want to get into trouble!

To produce this I first created an Offices DocType, this had properties on it like addressLine1, addressLine2, addressCity, addressPostcode, emailAddress, and googleMap. I also had a true/false to say whether to show the map or not.

I also had a Contact DocType which had Offices as allowed children so that in the Content Section the site structure would look like this:

So now all I have to do is create a template for the Contact DocType. This is where I inject this:

<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <script type="text/javascript">
    $.fn.googleMap = function(location,options) {
        var defaults = {
            lat: 53.41,
            long: -2.99,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            controls: ['GSmallZoomControl3D']
        };
     
        options = $.extend(defaults, options || {});
     
        if (location) {
            var value = $.trim(location);
            var point = value.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
        });
    };
  </script>

into the head using ContentPlaceHolders and in the body I have added a macro.

The macro points to an XSLT file but if you want you could use Razor.

<!-- The fun starts here -->
<xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
  <div>
    <xsl:attribute name="class">
      <xsl:choose>
        <xsl:when test="position() = 1">
          <xsl:text>office first</xsl:text>
        </xsl:when>
        <xsl:when test="position() = last()">
          <xsl:text>office last</xsl:text>
        </xsl:when>
        <xsl:otherwise>
          <xsl:text>office</xsl:text>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:attribute>
    
    <h2 class="officeName"><xsl:value-of select="@nodeName"/></h2>
    
    <xsl:if test="string(./showAddress) = 1">
      <address>
        <span class="addressLine addressName">Name</span>
        <span class="addressLine"><xsl:value-of select="./addressLine1" /></span>
        <span class="addressLine"><xsl:value-of select="./addressLine2" /></span>
        <span class="addressLine"><xsl:value-of select="./addressCity" /></span>
        <span class="addressLine"><xsl:value-of select="./addressPostcode" /></span>
      </address>
      
      <div class="directions">
        <a class="showPostcodeInput" href="" title="Directions to {addressPostcode}">View Directions <img src="/images/arrow-down.png" alt="" /></a>
        <div class="postcodeInput">
          <span>Enter postcode:</span>
          <input class="postcodeFrom" type="text" />
          <a href="#" title="Directions to {addressPostcode}">&gt;</a>
        </div>
      </div>
      
      <div id="googleMap_{@id}" class="gMap"></div>
      
      <script type="text/javascript">
        <![CDATA[
          $(document).ready(function (){
            $("#googleMap_]]><xsl:value-of select="@id"/><![CDATA[").googleMap("]]><xsl:value-of select="./googleMap"/><![CDATA[");
          
            $(".postcodeInput>a").click(function(){
              var startAddress = $(this).parent().find("input").val();
              var endAddress = "]]><xsl:value-of select="./addressPostcode"/><![CDATA[";

              window.open("http://maps.google.co.uk/maps?saddr=" + startAddress + "&daddr=" + endAddress, "");
              return false;
            });

          });
        ]]>
      </script>
      
    </xsl:if>
    
    <div class="contact">
      <span class="contactLine"><xsl:value-of select="./telephoneNumber"/></span>
      <span class="contactLine"><xsl:value-of select="./faxNumber"/></span>
      <span class="contactLine"><a href="mailto:{./emailAddress}"><xsl:value-of select="./emailAddress"/></a></span>
    </div>
    
  </div>
</xsl:for-each>

<script type="text/javascript">
  $(document).ready(function(){
    $(".directions").show();
    $(".showPostcodeInput").click(function(){
      $(this).parent().find(".postcodeInput").toggle();
      return false;
    });
  });
</script>

The css for the google all this is

.office .gMap{
  float: right;
  width: 200px;
  height: 150px;
  display: block;
}

I will eventually do a blog post when I have a blog to post it on. 

I've just noticed I've also included the view directions thing which when you click it drops down asking for a postcode and then directs them to google maps which plots a route from the postcode or location they entered to the postcode of the address they wanted.

Oh and on the xslt you must tell it to output html not xml because in xml it wont output empty divs like the googlemaps div.

Hope this helps

Ben

even I have thought something like this ..... but was stuck with xslt ...but will try ur solution ...... thanks... i have same requirement as urs ... so mostly this will help... will revert to you ....

hello aghy

I tried ur code.... but address is coming and no map is shown .....

I have two doc types ... Contact us and contact ... in contact doc type have two properties 'address' of type textbox multiple and 'contactsGoogleMap' of type googlemap.

I also have one template called Contact us in which I placed following code,

<link href="/css/style.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript">
    $.fn.googleMap = function(location,options) {
        var defaults = {
            lat: 53.41,
            long: -2.99,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            controls: ['GSmallZoomControl3D']
        };
     
        options = $.extend(defaults, options || {});
     
        if (location) {
            var value = $.trim(location);
            var point = value.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
        });
    };
  </script>

and my xslt code is as follows ... very simple ...

<!-- start writing XSLT -->
  <ul class="news_list">

    <!--<xsl:call-template name="featuredNewsItem">
      <xsl:with-param name="selectedItem" select="$featuredArticle" />
    </xsl:call-template>-->
    
    <xsl:for-each select="$currentPage//* [@isDoc and string(./umbracoNaviHide) != '1' and name()='Contact']">
      <li>
      <xsl:value-of select="./address" />      
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <div id="googleMap_{@id}" class="gMap"></div>
      
      <script type="text/javascript">
        <![CDATA[
          $(document).ready(function (){
            $("#googleMap_]]>
        <xsl:value-of select="@id"/><![CDATA[").googleMap("]]><xsl:value-of select="./contactsGoogleMap"/>
        
        
      
      </script>
      
      </li>

    </xsl:for-each>
    


  </ul>

.. in above contactsGoogleMap is property of the type googlemap in 'Contact' doc type ....

... in style.css I have put following class....

.contact .gMap{
  float: right;
  width: 200px;
  height: 150px;
  display: block;
}

Ok, 

Change your xslt to be like this:

<ul class="news_list">
  <xsl:for-each select="$currentPage//Contact [@isDoc and string(./umbracoNaviHide) != '1']">
    <li>
      <xsl:value-of select="./address" />
      <div id="googleMap_{@id}" class="gMap"></div>
      <script type="text/javascript">
        <![CDATA[
          $(document).ready(function (){
            $("#googleMap_]]><xsl:value-of select="@id"/><![CDATA[").googleMap("]]><xsl:value-of select="./contactsGoogleMap"/><![CDATA[")
          });
        ]]>
      </script>
    </li>
  </xsl:for-each>
</ul>

instead of using "and name() = Contact" to just get your Contact document types you can use //Contact to get any Contact documents directly under the currentpage.

and put this in your template:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

and your css would need to be something like:

ul.news_list li .gMap{
  float: right;
  width: 200px;
  height: 150px;
  display: block;
}

To help with working out any errors on your website you should use firebug, it will say if there are any javascript errors.

Ben

thank you .... it works now...

one last query.....

can I show nodes (my contacts) according to dropdown value selected on Contact Us node/ say dropdown values will have coutry names... and child nodes will have one of the address fields as country.... by default all contacts will appear.

There are two ways of doing this, either using javascript on your Contact Us page, or using templates.

Javascript method: You have a select box with please select as the first choice, then add an event to it so that when the user changes it you hide all the contacts and display only the one selected. In the select box you would have the text as the name/address of the contact and as the value you could use the node id of the contact then change your xslt so that you could identify each contact using their node id. For example:

<div class="contact" id="contact_{@id}">

</div> 

Template method: You could create a template for your contacts and have it use the Contact us page as a master template. This is a little more complicated to explain but doesn't use javascript. Let me know if you want to know this way and I can write it up tonight.

Ben

yes.. i want to use template method........ can you guide me?

also.... one more question...... if we have many contacts then that many nodes will be created... ... we have many such contacts... so can I use some other method?

hello...

please anyone can tell .... how can I open googlemap in lightbox?

I have stucked again...

now I want to showgoogle map in new content page... for that I have made simple template and separate doc type with googlemap data type...

here is my template code...

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
 <html>
  <head>
  <link rel="stylesheet" href="/css/style.css" type="text/css" />
  <!-- Google map scripts starts -->
  
<script type="text/javascript">
    $.fn.googleMap = function(location,options) {
        var defaults = {
            lat: 53.41,
            long: -2.99,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            controls: ['GSmallZoomControl3D']
        };
     
        options = $.extend(defaults, options || {});
     
        if (location) {
            var value = $.trim(location);
            var point = value.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
        });
    };
  </script>
  
  </head>
<body>  
  

 

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>  
<script type="text/javascript">
       
          $(document).ready(function (){
            $("#map_container").googleMap("<umbraco:Item field="contactsGoogleMapForCenters" runat="server"></umbraco:Item>");
          });

</script>  
  <div id="map_container" class="gMap1"></div>
  <!--
    <img src="../images/NoGoogleMap.png" alt="Could not load store map" style="margin-top:-20px;"/>
  -->
 
</body>
</html>

</asp:Content> 

I have content structure something like....

Contacts

    - Contact 1

        - Contact map

... contact map is made from above specified template and doc type ...

but it is not showing the map .... and giving following error ...

$ is not defined ...

Hey,

Sorry I haven't replied for a long time. If you have a new idea you need help on it would be better if you started a new thread because you have already marked this thread as solved so not many people will come to help.

For you latest question, $ is not defined is usually because you haven't included jQuery in the head above where $ is used. Check out Googles jQuery and add it to the head.

For the lightbox I would start a new thread but for I have always used overlays, check out Flowplayers Overlays. 

If you have many Contacts you want to show then maybe the Locator Razor Style package would be better for you. I have never used it so if you need any help with it probably best to ask in the packages forum. 

Ben

ok... i am starting new post... and will continue my problem into that..... as its still not working

Hey all, great thread for getting me up to speed on how to use this...i think i'm close!...i have the following code taken from ben's OP.

<div id="googleMap" class="gMap"></div>
    
      <script type="text/javascript">
        <![CDATA[
          $(document).ready(function (){
            $("#googleMap").googleMap("]]><umbraco:Item field="googleMap" runat="server" /><![CDATA[");
          });
        ]]>
      </script>

I also have the JS in the head content and the CSS to display the map...have i got this right? No map is displaying...origonal code is below...

<script type="text/javascript">
        <![CDATA[
          $(document).ready(function (){
            $("#googleMap").googleMap("]]><xsl:value-of select="googleMap"/><![CDATA[");
          });
        ]]>
      </script>

Sorry to bump such an old thread, but I have been looking through this and working with it, and using the code above, all I get is just my DIV is empty. I've picked the point and saved/published, but just empty.

Any help will be appreciated.

is working on a reply...