Hi Adam

As you have discovered all this datatype does is return the latitude, longitude and the zoom level information in a string.

To put these coordinates in a map you'll need to use reference the google map API and write some javascript to show a card with a pointer on it.

How advanced should the map you want to insert be? Perhaps you can use this approach instead? http://www.proworks.com/blog/2010/02/13/umbraco-package-google-map-macro-for-the-rich-text-editor/

Looking forward to hearing more from you.

/Jan

Hi Jan

I found a javascripft that handles it now. And I did an xslt script that modifies the values I want like width, height and position.

Thanks Jan for the replay!

Hi Adam

As Jan said the datatype returns the coordinates, you need to load the map into an container.. usually a container like <div id="map"></div> where javascript use getElementById and load the map into the container.

You could take a look at this simple razor example http://our.umbraco.org/projects/developer-tools/cultiv-razor-examples the load google map.. there is not much razor code, most of it is done by javascript.

You could extract the files and look at the google map razor file, the javascript file and a few lines in css.

/Bjarne

Hey Bjarne,

Opted to try out the Cultiv stuff, looks great and I have replicated the code in my site but i still only get the google coords displaying...pretty sure I have the JS for maps etc all in place...?

Any ideas?

TIA

S

Hi Stephen

What does your html, javascript and razor code look like?

Do you get any errors in the browser console when loading the page? If everything is setup and the map is not loading it's usually because there are some javascript errors. Have you made sure to reference the google maps API as well?

/Jan

Thanks for the reply...

I have the following in my master page

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

and the following script

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

  @* If this seems too easy.. it is. The magic happens in /js/script.js. How's that for unobtrusive javascript! :-) *@

  @Model.googleMap

</div>

and my doc type data type is called "googleMap"

Must have missed something but can think what?

S

just checked my JS console and it's objecting to the first line of the JS...

$(function () {

Uncaught ReferenceError: $ is not defined

    loadMap();

    loadGallery();

    loadDatePicker();

});

dont see anything wrong there..

S

Hi Stephan

Have you checked that the jQuery library is called before the script above is called?

"$" is the same as "jQuery" and loads the function..

$(document).ready(function() {
  // Handler for .ready() called.
});

is equivalent to calling:

$(function() {
 // Handler for .ready() called.
});

Take a look a the documentation here: http://api.jquery.com/ready/

/Bjarne

Thanks Bjarne, I'll check that when I get home tonight and update this thread with results...i think you might be onto something though, I should have known to check this as its happened before to me.

S

Hey Bjarne, thats was the problem many thanks!

Hi Stephen

I'm glad you solved it.. I think we all once have forget to include jQuery, call the script in the correct order or something simular "stupid" mistakes :)

/Bjarne

is working on a reply...