The API http://zippopotam.us/ gives Citynames and Coorindates to a Zipcode. The JCI-PRO-Plugin can use that for a “Zipcode to City-Search”:

---

Germany United States

---

---

Examples: Houston, US, TX | Munich, DE, Germany

---

This done this way:

1 .JCI-Template:

[jsoncontentimporterpro id=ID_OF_TEMPLATE httpstatuscodemustbe200=no]

2. twig-template:

• url:

  http://api.zippopotam.us/{% if urlparam.co %}{{urlparam.co}}{% else %}US{% endif %}/{% if urlparam.zip %}{{urlparam.zip}}{% else %}80636{% endif %}

• urlparam4twig: zip#co
• twig-code (“/zippopotamus/” is the URL to the WordPress-Page with the Shortcode):

  {% if urlparam.co %}{% set coun = urlparam.co %}{% else %}{% set coun = "US" %}{% endif %}
  <form action=/zippopotamus/>
  <select name="co" id=jciinput>
  <option value="DE" {% if coun =="DE" %}selected{% endif %}>Germany</option>
  <option value="US" {% if coun =="US" %}selected{% endif %}>United States</option>
  </select>
  <input type=text name=zip placeholder="Insert Zipcode" value="{% if urlparam.zip %}{{urlparam.zip}}{% else %}80636{% endif %}">
  <input type=submit id=jciinput value="Search Zipcode for City">
  </form>
  <hr>
  {% if places %}
  <strong>Found:</strong><br>
  <ol>{% for p in places %}<li>
  <a href="https://www.google.com/maps/search/{{p.latitude}},{{p.longitude}}" target="_blank">{{ attribute(p, 'place name') }} ({{ attribute(p, 'state abbreviation') }})</a>
  </li>{% endfor %}</ol>
  {% else %}
  no City to this Zipcode {{urlparam.zip}} found
  {% endif %}
  <style>
  #jciinput {
      border-radius: 5px;
      width: 320px;
      height:35px;
      background: #eee;
   color: black;
  }
  </style>
  <hr>
  Examples: <a href="/zippopotamus/?co=US&zip=77004">Houston, US, TX</a> | 
  <a href="/zippopotamus/?co=DES&zip=80636">Munich, DE, Germany</a>