Solved

javascript to html map

Posted on 2016-10-20

1 solution

Medium Priority

147 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>

<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>

</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>

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

Join The Community

8 Comments

LVL 22

Expert Comment

by:Kim Walker

ID: 418531012016-10-20

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.

LVL 1

Author Comment

by:ITsolutionWizard

ID: 418531122016-10-20

i do not want ip appear on the webpage. I need to go ip="json.ip"
Your solution does not work to me. Thanks

LVL 9

Expert Comment

by:Karen

ID: 418531492016-10-20

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.

LVL 1

Author Comment

by:ITsolutionWizard

ID: 418531752016-10-20

I need plain JavaScript

LVL 9

Expert Comment

by:Karen

ID: 418531852016-10-20

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;
}
}

LVL 1

Author Comment

by:ITsolutionWizard

ID: 418532222016-10-20

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>

LVL 1

Author Comment

by:ITsolutionWizard

ID: 418532292016-10-20

and how to call getIP(json) ? what I need to put inside of json?

LVL 9

Accepted Solution

by:Karen

Karen earned 2000 total points

ID: 418532402016-10-20

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.

Featured Post

Question has a verified solution.

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

Beginner's Guide to HTML and CSS

Article by: Experts Exchange

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.

Create a responsive confirmation popup using HTML, CSS, jQuery and Promises

Article by: Julian

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises

How to Update Your WordPress Site Version

Video by: Alex

The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…