# Embed Dynamic numbers in embedded google map Need Urgent Help

**URL:** <https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590>\
**Category:** General\
**Created:** [May 25, 2017, 6:32am UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590 "2017-05-25T06:32:10Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![saliks](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@saliks](https://forum.freecodecamp.org/u/saliks)\
**Post date:** [May 25, 2017, 6:32am UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/1 "2017-05-25T06:32:10Z")

</div>

Hi,

This is my page link:- [http://almdesign-dev.in/tracklcl/](http://almdesign-dev.in/tracklcl/)  
Tracking Code:- JJI.1  
I want that the below number of latitude and longitude of map should show in embedded google map  
and the below numbers are displaying form this link:- [http://120.138.9.121:8888/psp/GetLRStatuslocation?p=JJI.1](http://120.138.9.121:8888/psp/GetLRStatuslocation?p=JJI.1)

Thanks in Advance

---

<div class="post-metadata">

**Author:** ![przemoo83](https://avatars.discourse-cdn.com/v4/letter/p/a88e4f/32.png) [@przemoo83](https://forum.freecodecamp.org/u/przemoo83)\
**Post date:** [May 25, 2017, 8:01am UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/2 "2017-05-25T08:01:37Z")

</div>

First of all I think you should use Google Maps API instead of placing a map in iframe

---

<div class="post-metadata">

**Author:** ![saliks](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@saliks](https://forum.freecodecamp.org/u/saliks)\
**Post date:** [May 25, 2017, 8:05am UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/3 "2017-05-25T08:05:14Z")

</div>

I am new in this it will be more help full if you guide me how to do it  
Thanks

---

<div class="post-metadata">

**Author:** ![przemoo83](https://avatars.discourse-cdn.com/v4/letter/p/a88e4f/32.png) [@przemoo83](https://forum.freecodecamp.org/u/przemoo83)\
**Post date:** [May 25, 2017, 8:08am UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/4 "2017-05-25T08:08:16Z")

</div>

So you want to dynamically display a location based on some lattitude and longitude or IP address? Because I don’t quite understand what your goal is…

---

<div class="post-metadata">

**Author:** ![saliks](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@saliks](https://forum.freecodecamp.org/u/saliks)\
**Post date:** [May 25, 2017, 8:28am UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/5 "2017-05-25T08:28:26Z")

</div>

My page displays google cordinates(22.079,82.139) as results, I would like to display the output as google map instead (as it appears here, [http://maps.google.com/?q=22.079,82.139](http://maps.google.com/?q=22.079,82.139))

also you can refer my code

JavaScript

```
<script>
function changeChannel(){
  document.getElementById("twitchFrame").src = "http://120.138.9.121:8888/psp/GetLRStatusWebLink?p=" +document.getElementById("channel").value;
}
function changeloca(){
  document.getElementById("Mapframe").src = "http://120.138.9.121:8888/psp/GetLRStatuslocation?p=" +document.getElementById("channel").value;
}
</script> 

```

HTML

```
Track Your Consignment:
<input type="text" id="channel"></input>
<button type="button" onClick="changeChannel(); changeloca();">Submit</button><br><br>
<iframe
    id="twitchFrame"
    src="about:blank"
    height="500"
    width="650"
    frameborder="0"
    scrolling="no"
    allowfullscreen="true">
</iframe><br>

<iframe
    id="Mapframe"
    src="about:blank"
    height="100"
    width="650"
    frameborder="0"
    scrolling="no"
    allowfullscreen="true">
</iframe>

```

Thanks

---

<div class="post-metadata">

**Author:** ![przemoo83](https://avatars.discourse-cdn.com/v4/letter/p/a88e4f/32.png) [@przemoo83](https://forum.freecodecamp.org/u/przemoo83)\
**Post date:** [May 25, 2017, 9:29am UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/6 "2017-05-25T09:29:18Z")

</div>

1. Set up your account at [https://developers.google.com/](https://developers.google.com/)
2. Get your API key for Google Maps API
3. Display your map and write a function that takes your coordinates as an input
4. You’re done: 🙂  
I set up an example for you here:  
[https://codepen.io/przemoo83/pen/mmoBYV](https://codepen.io/przemoo83/pen/mmoBYV)

---

<div class="post-metadata">

**Author:** ![saliks](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@saliks](https://forum.freecodecamp.org/u/saliks)\
**Post date:** [May 25, 2017, 12:28pm UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/7 "2017-05-25T12:28:36Z")

</div>

Thanks for your help

However i am looking at pulling google map coordinates from web page (DOM) and display as a map through google map api

---

<div class="post-metadata">

**Author:** ![przemoo83](https://avatars.discourse-cdn.com/v4/letter/p/a88e4f/32.png) [@przemoo83](https://forum.freecodecamp.org/u/przemoo83)\
**Post date:** [May 25, 2017, 12:32pm UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/8 "2017-05-25T12:32:08Z")

</div>

That’s exactly what you can do with the function I gave you 🙂  
Just get the coordinates from DOM and pass to the map.placeMarkers() function.

---

<div class="post-metadata">

**Author:** ![saliks](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@saliks](https://forum.freecodecamp.org/u/saliks)\
**Post date:** [May 25, 2017, 12:36pm UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/9 "2017-05-25T12:36:55Z")

</div>

How Can i Fetch Content from page it will be change according tracking code

---

<div class="post-metadata">

**Author:** ![saliks](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@saliks](https://forum.freecodecamp.org/u/saliks)\
**Post date:** [May 25, 2017, 12:37pm UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/10 "2017-05-25T12:37:26Z")

</div>

I can share my file to look into if you need

---

<div class="post-metadata">

**Author:** ![przemoo83](https://avatars.discourse-cdn.com/v4/letter/p/a88e4f/32.png) [@przemoo83](https://forum.freecodecamp.org/u/przemoo83)\
**Post date:** [May 25, 2017, 1:16pm UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/11 "2017-05-25T13:16:21Z")

</div>

First of all is there any other way to fetch these coordinates apart from an iframe? Because you cannot access contents of an iframe if it is fetched from different domains than yours

---

<div class="post-metadata">

**Author:** ![saliks](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@saliks](https://forum.freecodecamp.org/u/saliks)\
**Post date:** [May 25, 2017, 1:44pm UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/12 "2017-05-25T13:44:35Z")

</div>

This is the link to fetch the tracking code (This will keep changing).  
[http://120.138.9.121:8888/psp/GetLRStatuslocation?p=JJI.1](http://120.138.9.121:8888/psp/GetLRStatuslocation?p=JJI.1)

Yes it Is on a different domain, Is it possible fetch the coordinates from this page?  
Once I have pulled the coordinates i would like to display it just like your example

---

<div class="post-metadata">

**Author:** ![przemoo83](https://avatars.discourse-cdn.com/v4/letter/p/a88e4f/32.png) [@przemoo83](https://forum.freecodecamp.org/u/przemoo83)\
**Post date:** [May 26, 2017, 7:05am UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/13 "2017-05-26T07:05:17Z")

</div>

The problem with iframe is that when you fetch it from another domain security rules won’t let you to access it with javascript. I think I’ve seen a workaround using PHP and file\_get\_contents() but I’m not sure if it’s 100% valid solution. Maybe you can find an API that returns JSON or XML instead of IFRAME?

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 9:36am UTC](https://forum.freecodecamp.org/t/embed-dynamic-numbers-in-embedded-google-map-need-urgent-help/119590/14 "2021-01-17T09:36:54Z")

</div>