Show me the code! – By Davanum Srinivas

September 11, 2008

[Ubiquity] map-directions using Google Maps

Filed under: Uncategorized — Davanum Srinivas @ 9:05 am

Since Ubiquity does not yet allow remote htmls for commands, you will need to place the directions.html in your plugins’s templates directory (mine is at “~/.mozilla/firefox/Profiles/vg9n6k0x.default/extensions/ubiquity@labs.mozilla.com/chrome/content/templates”). TODO: It would be nicer to use address nouns.

CmdUtils.CreateCommand({
  name: "map-directions",
  takes: {"address": noun_arb_text},
  icon: "chrome://ubiquity/skin/icons/map.png",
  execute: function( directObj ) {
    var location = directObj.text;
    var url = "http://maps.google.com/?q=";
    url += encodeURIComponent(location);
    Utils.openUrlInBrowser( url );
  },
  preview: function(pblock, directObj) {
    var location = directObj.text;
    CmdUtils.showPreviewFromFile( pblock,
                                  "templates/directions.html",
                                  function(winInsecure) {
      winInsecure.showDirections( location );
    });
  }
});
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSsTL4WIgxhMZ0ZK_kHjwHeQuOD4xQJpBVbSrqNn69S6DOTv203MQ5ufA"
            type="text/javascript">
    </script>
    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>-
    <style>
    body{
      overflow: hidden;
      margin: 0px;
    }
    /* preview pane for google results and initial map preview */
    div[name="preview-pane"] {
      font-family: sans-serif;
      color: #bfbfbf;
      background: #272750;
    }
    #preview-pane {
      height: 275px;      
    }
    #map {
      width: 400px !important;
      height: 250px !important;
      float: left;
      cursor: pointer;
      border: 5px solid #0066cc;
      -moz-border-radius: 5px 0px 5px 5px;
    }
    </style>
    <script type="text/javascript">
    google.load('search', '1');
    google.load('maps', '2');
    function showDirections(searchTerm) {
      map = new GMap2(document.getElementById("map"));
      directionsPanel = document.getElementById("route");
      directions = new GDirections(map, directionsPanel);
      directions.load(searchTerm);
    }
    </script>
  </head>
  <body onunload="GUnload()">
    <div style="overflow:hidden;">
      <div id="preview-pane" name="preview-pane">
        <div id="map"> </div>
      </div>
    </div> 
  </body>
</html>
About these ads

6 Comments »

  1. Hey, great command. But it doesn’t work here. If I type in your command (map-directions sharon, ma to yawkey way, boston, ma), nothing happens. I don’t even get any map then.

    Are there any instruction on how to use this properly?

    Comment by FuNKeR — November 4, 2008 @ 6:11 am

  2. I am working on this currently.

    Then, you must replace all instances of ‘G’ with ‘google.maps.’ (i.e. ‘GMap2′ would then look like ‘google.maps.Map2′ and ‘GDirections’ would look like ‘google.maps.Directions’).

    The reason you have to do it in this fashion is because you are trying to use ajax. Google AJAX uses google maps in the manner I specified.

    Hope this helps.

    Comment by Bradley — November 14, 2008 @ 12:45 pm

  3. I am working on this currently.

    You must replace all instances of ‘G’ with ‘google.maps.’ (i.e. ‘GMap2′ would then look like ‘google.maps.Map2′ and ‘GDirections’ would look like ‘google.maps.Directions’).

    The reason you have to do it in this fashion is because you are trying to use ajax. Google AJAX uses google maps in the manner I specified.

    Hope this helps.

    Comment by Bradley — November 14, 2008 @ 12:46 pm

  4. Hi!, i want to know, how to put arrow like icon of a moving object on Google maps using Gmap API`s.
    This icon must always show the forward direction of object-movement

    Mohit

    Comment by Mohit — December 3, 2008 @ 6:35 am

  5. Thanks!
    Nice Idea

    Comment by Domingo — February 18, 2009 @ 4:43 pm

  6. code doesnt work and there is no such thing as a template folder, i had to make it myself, update your command please. even replaced

    -

    body{
    overflow: hidden;
    margin: 0px;
    }
    /* preview pane for google results and initial map preview */
    div[name="preview-pane"] {
    font-family: sans-serif;
    color: #bfbfbf;
    background: #272750;
    }
    #preview-pane {
    height: 275px;
    }
    #map {
    width: 400px !important;
    height: 250px !important;
    float: left;
    cursor: pointer;
    border: 5px solid #0066cc;
    -moz-border-radius: 5px 0px 5px 5px;
    }

    google.load(‘search’, ’1′);
    google.load(‘maps’, ’2′);
    function showDirections(searchTerm) {
    map = new  google.maps.Map2(document.getElementById(“map”));
    directionsPanel = document.getElementById(“route”);
    directions = new  google.maps.Directions(map, directionsPanel);
    directions.load(searchTerm);
    }

    Comment by Anon TheUnknown — April 28, 2009 @ 6:37 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Shocking Blue Green Theme Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

Join 131 other followers

%d bloggers like this: