Link to Google Maps

dave_m13
Kilo Contributor

‎05-15-2013 02:38 AM

Hi All

I wonder whether anyone has put a link to google maps from the location selected.

So a user enters a site, based on the Location/Postcode in Service, would then like a link/macro or something that will open up that location google maps.

I can use the map pages to get all locations etc. but just unsure how to open at that specific location selected.

Any help appreciated.

Cheers

0 Helpfuls
  • 1,942 Views
4 REPLIES 4

Mark Stanger
Giga Sage

‎05-15-2013 06:58 AM

You inspired a blog post on ServiceNowGuru this morning. Enjoy!

http://www.servicenowguru.com/system-ui/ui-actions-system-ui/open-google-map-location-record/


0 Helpfuls

dave_m13
Kilo Contributor
In response to Mark Stanger

‎05-15-2013 07:32 AM

Mark

You are a legend this is brilliant, works a treat.

Shame I have had to work, would have liked to go to Knowledge13.

Thank you very much
Dave


0 Helpfuls

Mark Stanger
Giga Sage
In response to dave_m13

‎05-15-2013 08:09 AM

I'm glad it worked! Hopefully we'll have another opportunity to meet in the future.


0 Helpfuls

adiddigi
Tera Guru

‎05-15-2013 08:22 AM

Alongside mark, I also wanted to do this after seeing your post, But Mark's solution should be a better one. Here is my solution, take a look at it if you would like to show it on Service Catalog form. This is what I did.

I didn't know Mark was also trying to do this...
Create a UI Macro to display Google Maps - 



<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
  </style>
  <script>  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCqBv_yue3EVDVkIcGvMkZWFyLactEhTnQQ&sensor=true">
  </script>
  <script>
  function initialize() {
  
var latitude;
    var longitude;
   
    var geocoder = new google.maps.Geocoder();
    var address = $(loc).innerHTML
    geocoder.geocode( { 'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
       latitude = results[0].geometry.location.lat();
       longitude = results[0].geometry.location.lng();
       var mapOptions = {
        center: new google.maps.LatLng(latitude, longitude),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(latitude, longitude),
        map: map,
        title: $(loc).innerHTML
      });


    }
  });

   

  }
  google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>
<body>
<div id="loc" style="display:none">${jvar_location}</div>
  <div id="map-canvas"/>
</body>
</html>
</j:jelly>




The UI page which calls this UI Macro :



<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate var ="jvar_location">

var loc =RP.getParameterValue('loc');
loc;

</g:evaluate>

<g:call function="google_maps.xml" arguments="jvar_location"/>
</j:jelly>


and finally, a client script to do a DOM injection into a Catalog Item :



function onChange(control, oldValue, newValue, isLoading) {

if(isLoading) return;
var location = g_form.getDisplayBox('location').value;
var URL = 'google_maps.do?loc='+location;
var a = new Element('a', {onclick: "popupOpenStandard('"+URL+"')"}).update("Location");
console.log(control.id);
var par = $(control).up();
console.log('obj',par);
$(par).insert(a);


}



This client script is written onChange of a reference field of Service catalog.

Mark already did it, I'm just giving you a solution to give some purpose to 2 hours i spent(not knowing Mark was working 🙂 )...


0 Helpfuls