0

I am attempting to render this address: universal music 2100 Colorado Ave Suite #1 which resolves to this: https://maps.google.com/maps?q=universal%20music%202100%20Colorado%20Ave%20Suite%20#1&t=&z=9&ie=UTF8&iwloc=&output=embed

Noticed the #1? If I change that to universal music 2100 Colorado Ave Suite No 1 it resolves to https://maps.google.com/maps?q=universal%20music%202100%20Colorado%20Ave%20Suite%20No%201&t=&z=9&ie=UTF8&iwloc=&output=embed and it renders perfectly.

This is what I have:

const txtOnMap = 'universal music 2100 Colorado Ave Suite #1';

const handleMapUrl = `https://maps.google.com/maps?q=${txtOnMap}&t=&z=9&ie=UTF8&iwloc=&output=embed`;

<iframe frameBorder="0" src={encodeURI(handleMapUrl)} />

I have tried some others addresses with hashtags in them and it happened the same.

Any solutions to this?

Reacting
  • 5,543
  • 7
  • 35
  • 86

2 Answers2

2

encodeURI doesn't encode the # sign, so it remains a fragment identifier (not part of the URL sent to Google, but a local "jump to element with this ID" indicator).

You don't actually want to encode the whole URL in any event, you need to encode one component of it, so use encodeURIComponent on that component alone:

const txtOnMap = encodeURIComponent('universal music 2100 Colorado Ave Suite #1');

which produces the properly escaped:

"universal%20music%202100%20Colorado%20Ave%20Suite%20%231"

See more at Should I use encodeURI or encodeURIComponent for encoding URLs?

ShadowRanger
  • 143,180
  • 12
  • 188
  • 271
  • You can also refer to the URL Encoding documentation of Google Maps Platform: https://developers.google.com/maps/documentation/urls/url-encoding – Pagemag Jan 14 '20 at 01:54
1

This is happening because the hashtag needs to be escaped in the URL as it's a special character. This is done by converting it to %23

Working example is:

const txtOnMap = 'universal music 2100 Colorado Ave Suite #1'.replace('#','%23');


const handleMapUrl = `https://maps.google.com/maps?q=${txtOnMap}&t=&z=9&ie=UTF8&iwloc=&output=embed`;

var iframe = document.createElement('iframe');
iframe.src = encodeURI(handleMapUrl);

<iframe frameBorder="0" src={encodeURI(handleMapUrl)} />
JoelAK
  • 340
  • 2
  • 11