Solved

javascript to html map

Posted on 2016-10-20
8
131 Views
Last Modified: 2016-10-20
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>
0
Comment
Question by:ITsolutionWizard
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41853101
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
 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 41853112
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
 
LVL 9

Expert Comment

by:Karen
ID: 41853149
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
Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 41853175
I need plain JavaScript
0
 
LVL 9

Expert Comment

by:Karen
ID: 41853185
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
 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 41853222
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
 
LVL 1

Author Comment

by:ITsolutionWizard
ID: 41853229
and how to call  getIP(json) ? what I need to put inside of json?
0
 
LVL 9

Accepted Solution

by:
Karen earned 500 total points
ID: 41853240
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question