0

e.g. I have a file named: /SW1A2AA.htm

In the HTML I need to show the following image with the source for the image to include the filename (without the extension). I.e.:

<img src= "https://maps.googleapis.com/maps/api/staticmap?center=sw1a2aa&zoom=18&size=640x480">

Obviously if I need to do this for lots of pages, it would be easier if there was a way to amend the search string to depend on the filename (without the extension).

Please tell me there is a simple way to produce that result!

Thanks

ffflabs
  • 17,166
  • 5
  • 51
  • 77
Arron
  • 73
  • 1
  • 10
  • 1
    what should be that static map center? Because right now, google can't know what location does sw1a2aa represent. – ffflabs Nov 17 '14 at 17:09
  • If you have filename in URL, it's possible to take it from there by using JavaScript - window.location.pathname and then generate src – Marian Gibala Nov 17 '14 at 17:22
  • amenadiel the img src works fine, and the static map center is correct for the location 'sw1a2aa' – Arron Nov 18 '14 at 08:02
  • mgibala - how would I use window.location.pathname in the src in this instance? – Arron Nov 18 '14 at 08:03

1 Answers1

0

Here is my solution for your example (SW1A2AA.htm). Empty src attribute is not valid, so we use //:00 - you can read more about this solution here.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>

<img id="map" src="//:0">


<script>
// grab the URL. I'm working locally so in my case it is /C:/Users/myLogin/Desktop/SW1A2AA.htm
var pageURL = window.location.pathname; 

// find the last position of the "/"
var fileNamePosition = pageURL.lastIndexOf("/"); 
// take file name and delete last 4 characters (SW1A2AA.htm -> SW1A2AA)
var fileName = pageURL.slice(fileNamePosition+1,-4);
// create src
var mapSrc = "https://maps.googleapis.com/maps/api/staticmap?center=" + fileName + "&zoom=18&size=640x480"; 

// update map src attribute
var map = document.getElementById("map");
map.setAttribute("src", mapSrc);


</script>
</body>
</html>
Community
  • 1
  • 1
Marian Gibala
  • 874
  • 7
  • 9
  • I have tried

    to write file name onto page in html. JavaScript as follows:     – Arron Nov 19 '14 at 14:29
  • Yes, sorry! I tried to use the same javascript and call it in the and <p id=""> tags, and didn't realise you can't do that!</p> – Arron Nov 20 '14 at 08:07