WhatsApp Web Location Tool

1 - explainer.md

WhatsApp Web Location Tool

Save the code below as a bookmarklet then open it in WhatsApp Web:

javascript:(function(){if(!window.Store||!window.Store.Chat)return window.alert("You need to open WhatsApp in order to continue");var c=window.Store.Chat.filter("active")[0];if(!c)return window.alert("You need to open a chat in order to continue");var b=window.prompt("Provide a Google Maps URL:");if(b){var a=/@(.*)\//g;if(!a.test(b))return window.alert("Please provide a valid URL");a=b.match(a)[0];a=a.slice(1,a.lastIndexOf(","));b=c.createMessageFromText("/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=");
b.type="location";a=a.split(",");b.lat=parseFloat(a[0]);b.lng=parseFloat(a[1]);c.addAndSendMsg(b)}})();

Why

Because as today WhatsApp Web lacks a feature that allows sending location. I expect they implement this feature without requiring this "hack", if possible also using the geolocation API.

Credits

URL parsing based on google-maps-coordinate-parser. JPEG Data URI from mathiasbynens/small

2 - source code.js

// It's self contained, just copy minify it with Closure Compiler
// (https://closure-compiler.appspot.com/home)
// then prepend "javascript:" to the result

;(function () {
  if (!window.Store || !window.Store.Chat) {
   return window.alert('You need to open WhatsApp in order to continue') 
  }

  const activeChat = window.Store.Chat.filter('active')[0]
  if (!activeChat) return window.alert('You need to open a chat in order to continue')

  const url = window.prompt('Provide a Google Maps URL:')
  if (!url) return

  const urlParseRegex = /@(.*)\//g
  const canParse = urlParseRegex.test(url)
  if(!canParse) return window.alert('Please provide a valid URL')

  // Format buffer
  let buffer = url.match(urlParseRegex)[0]
  buffer = buffer.slice(1, buffer.lastIndexOf(','))

  // Seems WhatsApp needs a thumbnail image for location messages.
  // In this case the smallest possible JPEG is used.
  // Other option is creating a <canvas> and generating some thumbnail image.
  const thumbnailImage = '/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k='
  const msgObject = activeChat.createMessageFromText(thumbnailImage)
  msgObject.type = 'location'

  const coordinateStr = buffer.split(',')
  msgObject.lat = parseFloat(coordinateStr[0])
  msgObject.lng = parseFloat(coordinateStr[1])

  activeChat.addAndSendMsg(msgObject)
}())