Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    can you have a image url with variables

    hello, my ultimate goal is to have this display a 8x8 grid of images (google map images)that will update based on a variable.i wanted to be able to change stuff such as zoom, starting location, styles, ect and then run it. atm i just have the single image to figure it out as i have minimal knowledge with scripting and am trying to figure it out.
    this is the code i have so far.
    Code:
    <!DOCTYPE html>
    
    <html>
    
    <body>
    
    
    <script>
    
    
    var vzoom=15
    var vsize="640x640"
    var vmaptype="roadmap"
    
    
    	var x1=51.363244, y1=4.847011;
    	var x2=x1-10, y2=y1-10;
    
    
    
    document.write(x1);
    document.write("<p></p>");
    document.write(x2);
    document.write("<p></p>");
    //these were for visual aid that the variables were working
    
    
    
    //this image is the unedited link that works
    document.write('<a href="http://maps.googleapis.com/maps/api/staticmap?center=52.37907,4.844264&zoom=13&format=png&sensor=false&size=640x480&maptype=roadmap&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080"><img src="http://maps.googleapis.com/maps/api/staticmap?center=52.37907,4.844264&zoom=13&format=png&sensor=false&size=640x480&maptype=roadmap&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080" border="0"> </a>')
    
    //this is the edited link with variables that wont load properly(properties are blank from the first variable on)
    document.write('<a href="http://maps.googleapis.com/maps/api/staticmap?center="x1","y1"&zoom="vzoom"&format=png&sensor=false&size="vsize"&maptype="vmaptype"&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080"><img src="http://maps.googleapis.com/maps/api/staticmap?center="x1","y1"&zoom="vzoom"&format=png&sensor=false&size="vsize"&maptype="vmaptype"&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080" border="0"> </a>')
    
    //this is another edited version that wont load(properties show the edited text) 
    document.write('<a href="http://maps.googleapis.com/maps/api/staticmap?center=x1,y1&zoom=vzoom&format=png&sensor=false&size=vsize&maptype=vmaptype&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080"><img src="http://maps.googleapis.com/maps/api/staticmap?center=x1,y1&zoom=vzoom&format=png&sensor=false&size=vsize&maptype=vmaptype&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080" border="0"> </a>')
    
    
    </script>
    ive been trying to get the variables working. but im new and i dont know what to do.
    ive searched for hours and am tired of it. im sure someone will be able to solve this. i plan on using this to create multiple masks of the same area. thanks for any help in advance.

  • #2
    Tel
    Tel is offline
    New to the CF scene
    Join Date
    Feb 2013
    Location
    Norfolk, UK
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well there are much more elegant ways of doing it, but this is one simple method that works. (Just tested it.)

    Code:
    var x1=51.363244, y1=4.847011;
    
    myText1 = '<a href="http://maps.googleapis.com/maps/api/staticmap?center=';
    myText2 = '&zoom="vzoom"&format=png&sensor=false&size="vsize"&maptype="vmaptype"&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080"><img src="http://maps.googleapis.com/maps/api/staticmap?center=';
    myText3 = '&zoom="vzoom"&format=png&sensor=false&size="vsize"&maptype="vmaptype"&style=element:labels|visibility:off&style=feature:transit|visibility:off&style=feature:landscape|visibility:off&style=feature:administrative|visibility:off&style=feature:poi|visibility:off&style=feature:road|color:0x808080" border="0"> </a>';
    
    myCode = myText1 + x1 + ',' + y1 + myText2 + x1 + ',' + y1 + myText3;
    document.write(myCode);

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    im going to elaborate incase i wasnt clear on what im trying to acomplish
    just open and try changing the center=x,y and press enter. a different map will apear. so basically i wanted to have a html doc that will open and have the center x,y ect, as a variable that you could change before loading it. im new to scripting and javascript seemed like a logical way to introduce variables to html doc. but i have no idea if everything im doing is completely wrong or if my code is just written incorrectly.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,617
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    Well, just for starters, you need to stop using document.write(). document.write() ceased being NEEDED when Netscape 4 replaced Netscape 3 and became even less helpful once MSIE 5 arrived. Say about 13 years ago.

    And then:
    Code:
    <a id="maplink1"><img id="mapimg" style="border: none;"></a>
    ....
    ... 
    <script type="text/javascript">
    var link = document.getElementById("maplink");
    var image = document.getElementById("mapimg");
    
    var vzoom=15
    var vsize="640x640"
    var vmaptype="roadmap"
    var x1=51.363244, y1=4.847011;
    var x2=x1-10, y2=y1-10;
    
    link.href = "http://maps.googleapis.com/maps/api/staticmap"
              + "?center=" + x1 + "," + y1
              + "&zoom=" + vzoom 
              + "&format=png"
              + "&sensor=false"
              + "&size=" + vsize 
              + "&maptype=" + vmaptype 
              + "&style=element:labels|visibility:off"
              + "&style=feature:transit|visibility:off"
              + "&style=feature:landscape|visibility:off"
              + "&style=feature:administrative|visibility:off"
              + "&style=feature:poi|visibility:off"
              + "&style=feature:road|color:0x808080";
    
    image.src = "http://maps.googleapis.com/maps/api/staticmap"
              + "?center=" + x1 + "," + y1
              + "&zoom=" + vzoom
              + "&format=png"
              + "&sensor=false"
              + "&size=" + vsize
              + "&maptype=" + vmaptype
              + "&style=element:labels|visibility:off"
              + "&style=feature:transit|visibility:off"
              + "&style=feature:landscape|visibility:off"
              + "&style=feature:administrative|visibility:off"
              + "&style=feature:poi|visibility:off"
              + "&style=feature:road|color:0x808080";
    Last edited by Old Pedant; 02-03-2013 at 05:20 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    ylguf (02-03-2013)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,617
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    And now that I did all that I realized the the href and src are identical, so...

    Code:
    <a id="maplink1"><img id="mapimg" style="border: none;"></a>
    ....
    ... 
    <script type="text/javascript">
    var link = document.getElementById("maplink");
    var image = document.getElementById("mapimg");
    
    var vzoom=15
    var vsize="640x640"
    var vmaptype="roadmap"
    var x1=51.363244, y1=4.847011;
    var x2=x1-10, y2=y1-10;
    
    url = "http://maps.googleapis.com/maps/api/staticmap"
              + "?center=" + x1 + "," + y1
              + "&zoom=" + vzoom 
              + "&format=png"
              + "&sensor=false"
              + "&size=" + vsize 
              + "&maptype=" + vmaptype 
              + "&style=element:labels|visibility:off"
              + "&style=feature:transit|visibility:off"
              + "&style=feature:landscape|visibility:off"
              + "&style=feature:administrative|visibility:off"
              + "&style=feature:poi|visibility:off"
              + "&style=feature:road|color:0x808080";
    
    link.href = url;
    image.src = url;
    What are x2 and y2 for??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i was going to have a grid of images not just one. and i wanted it to offset the image based on the position of the first image. not like css position but the actual map center position. so kinda like

    image1=x1,y1 image2=x2,y1
    image3-x1,y2 image4=x2,y2
    Last edited by ylguf; 02-03-2013 at 05:47 AM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,617
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    Ahhh...got it.

    Okay...so now you have the means to do so, and better than using document.write().

    Can I ask what the point of the <a> is?

    Since the URL is the same as that of the image, if the user clicks on it then it will just open that one image alone in the window, replacing the entire grid. Surely that's not what you are after??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    you have been a huge help thank you so much. im new to scripting i didnt realize that is what <a> did. i was just reading online tutorials, that are apparently like 13 years old lol, trying to figure it out.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •