javascript to html map

I have below html codes
inside of map. how can i capture the json.ip into html ip= json.ip?

I am actually able to get the public ip. Just try to put the ip value into html


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!-- START: Here's the IP stuff -->
  <script type="application/javascript">
      function getIP(json) {
          alert("My public IP address is: " + json.ip);
      }
  </script>
  <script type="application/javascript"
          src="http://api.ipify.org?format=jsonp&callback=getIP">
  </script>
  <!-- END: IP Stuff -->
</head>
<body>
    <form id="form1">
    <div>
    <map name="planetmap">
     <area shape="rect" coords="0,388 185,429" alt="Chino, CA" target="_blank" href="http://www.gdfg.biz/ClickRecoder.aspx?rentalLocation=SMC-Chino&URL=http://www.sharsdfgfd.com?ip=">
   </map>
    </div>
    </form>
</body>
</html>
LVL 1
ITsolutionWizardAsked:
Who is Participating?
 
KarenConnect With a Mentor Analyst programmerCommented:
function getIP(json) {
    var x = document.getElementsByTagName("area");
    if (x.length) {
        for (j=0;j<x.length;j++) {
            x[j].href+= json.ip;
        }
    }
} 

Open in new window


You should not need to call getIP, it looks like it is a callback and so api.ipify.org will call it.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
You want the IP address to appear on the page? Try this:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!-- START: Here's the IP stuff -->
    <script type="application/javascript">
        function getIP(json) {
            document.write("My public IP address is: " + json.ip);
        }
    </script>
    <!-- END: IP Stuff -->
</head>
<body>
    <form id="form1">
    <div>
        <map name="planetmap">
            <area shape="rect" coords="0,388 185,429" alt="Chino, CA" target="_blank" href="http://www.gdfg.biz/ClickRecoder.aspx?rentalLocation=SMC-Chino&URL=http://www.sharsdfgfd.com?ip=">
        </map>
    </div>
    </form>
    <p>
    <!-- START: More IP stuff -->
    <script type="application/javascript"
        src="http://api.ipify.org?format=jsonp&callback=getIP">
    </script>
    <!-- END: more IP stuff -->
    </p>
</body>
</html>

Open in new window

Always select your code and click the CODE button at the top of the question/comment window to format your code to be styled for easy parsing.
0
 
ITsolutionWizardAuthor Commented:
i do not want ip appear on the webpage. I need to go ip="json.ip"
Your solution does not work to me. Thanks
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
KarenAnalyst programmerCommented:
if you are using jquery in your project, it is easy

function getIP(json) {
    $("area").attr("href","http://www.gdfg.biz/ClickRecoder.aspx?rentalLocation=SMC-Chino&URL=http://www.sharsdfgfd.com?ip=" + json.ip);
}

Open in new window


It can be done in plain javascript but is a bit more complicated, let me know if you need that.
0
 
ITsolutionWizardAuthor Commented:
I need plain JavaScript
0
 
KarenAnalyst programmerCommented:
function getIP(json) {
    var x = document.getElementsByTagName("area");
    if (x.length) {
        x[0].href = "http://www.gdfg.biz/ClickRecoder.aspx?rentalLocation=SMC-Chino&URL=http://www.sharsdfgfd.com?ip=" + json.ip;
    }
}
0
 
ITsolutionWizardAuthor Commented:
But I do have more than 1 area. Both above solutions won't work...

<map name="planetmap">
     <area shape="rect" coords="0,388 185,429" alt="Chino, CA" target="_blank" href="http://www.gdfg.biz/ClickRecoder.aspx?rentalLocation=SMC-Chino&URL=http://www.sharsdfgfd.com?ip=">

     <area shape="rect" coords="0,388 185,4292" alt="Pomona, CA" target="_blank" href="http://www.gdfg.biz/ClickRecoder.aspx?rentalLocation=SMC-Ponoma&URL=http://www.sharsdfgfd.com?ip=">


   </map>
0
 
ITsolutionWizardAuthor Commented:
and how to call  getIP(json) ? what I need to put inside of json?
0
All Courses

From novice to tech pro — start learning today.