Solved

javascript to html map

Posted on 2016-10-20

1 solution

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

Top 10 email signature design tips

Article by: Exclaimer

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.

Exclaimer

How to Become a Web Developer

Article by: Ryan

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?

Setting Up a RSS Feed forWordPress

Video by: Alex

The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

Introduction to jQuery (Part 1)

Video by: Jason

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)