Friday, May 2, 2014

Share It

Google maps API to show map after button click using text input value javascript with hide and show

Posted by Unknown , 12:20 AM Be the first to comment!
Hi friends, in this tutorial I am going to discuss about Google maps API using javascript. I worked with a project in which a user will add his address and that address needs to be shown in a map. This looks like a complex task but is a very simple task. Google Maps provides an API code to display maps and we are going to use that code here.

How it works?

Google maps API gives the developers to add maps to their projects using the API code that is provided by Google Maps.

In present tutorial I have the code that shows a map after button click. Here we have a input textbox in which we need to give the address of our wish and click the button below the textbox. Then a map of the particular address is displayed at the bottom.

Here the button text changes after the button is clicked. First the button contains "show".
After click the text will be changed as "hide".
That means I have added show/hide to the map area to show/hid the map when the button click event changes.
You can look at the demo below.

Code to show/hide:

    var obj = document.getElementById(unique + "map_area");
    var subm = document.getElementById("subm");
    if (obj.style.display=="none"){
      obj.style.display='block';
      subm.value = 'Hide';
    } else if(obj.style.display=="block"){
      obj.style.display='none';
      subm.value = 'Show';
    }

Google maps API Code:

var map = null;
    var geocoder = null;
    function showAddress(address, unique) {
          if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById(unique + "map_area"));
        map.setUIToDefault();
        geocoder = new GClientGeocoder();
      }
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 15);
              var marker = new GMarker(point, {draggable: true});
              map.addOverlay(marker);
              GEvent.addListener(marker, "dragend", function() {
                marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
              });
              GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
              });
          GEvent.trigger(marker, "click");
            }
          }
        );
      }
Here is the entire code below. Just copy the below code and save it with any name in .html extension.
Full Code for google map with text box and button having show/hide funtionality.
<html>
  <head>
    <title>Google map TricksTown</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=3" type="text/javascript"></script>
    <script type="text/javascript">
    var map = null;
    var geocoder = null;
    function showAddress(address, unique) {
          if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById(unique + "map_area"));
        map.setUIToDefault();
        geocoder = new GClientGeocoder();
      }
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 15);
              var marker = new GMarker(point, {draggable: true});
              map.addOverlay(marker);
              GEvent.addListener(marker, "dragend", function() {
                marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
              });
              GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
              });
          GEvent.trigger(marker, "click");
            }
          }
        );
      }
    var obj = document.getElementById(unique + "map_area");
    var subm = document.getElementById("subm");
    if (obj.style.display=="none"){
      obj.style.display='block';
      subm.value = 'Hide';
    } else if(obj.style.display=="block"){
      obj.style.display='none';
      subm.value = 'Show';
    }
    }
    </script>
  </head>

  <body>
    <form action="" onsubmit="showAddress(this.address.value, this.unique.value); return false">
     <input type="hidden" name="unique" value="" />
     <input type="text" name="address" value="balajinagar" />
     <div class="view-map" title="View map"><input type="submit" id="subm" value="Show" /></div>
    </form>
    <div id="map_area" style="display:none; width: 615px; height: 200px"></div>

  </body>
</html>

Demo:
Author: Bhanu Chander Bathini (CEO, Tricks Town.)
Hey friends, I am Bhanu Chander a Web Designer/Developer, Content writer, Freelance SEO analyst and a blogger. I am pursuing my M.Tech in Computer Science and Engg. You can contact me on bhanu4funn@gmail.com for web design solutions at low cost with effective SEO.
Free Mobile Balance →
Labels: , ,

0 comments:

Subscribe to: Post Comments (Atom)