Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. JavaScript
  4. Button click event in Google Maps

Button click event in Google Maps

Scheduled Pinned Locked Moved JavaScript
javascriptcomhardwareiottools
2 Posts 2 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • U Offline
    U Offline
    User 9875787
    wrote on last edited by
    #1

    I am working with Google Maps embedded on my webpage. What I want is to create a button click event, so that after a user has entered an address into a textbox (called txtBoxMaps), they can click a button which will display the new location on the same webpage. I tried using: google.maps.event.addListener(map, 'click', function(event) but when I click the button (btnDisplay) nothing happens. I can see the google map but it doesnt change after the "Display" button is clicked. Here is my code below:

        .style1
        {
            width: 104px;
        }
        .style2
        {
            width: 144px;
        }
        #GO
        {
            width: 92px;
        }
        #Display
        {
            width: 113px;
        }
    

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript">

    function Initialize() {
    
    
        var mapOptions = {
            center: new google.maps.LatLng(-33.01, 27.9),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    
        var map = new            google.maps.Map(document.getElementById('GMap1'), mapOptions);
    
    
        google.maps.event.addListener(map, 'click', function(event) {
        mapZoom = map.getZoom();
        startLocation = event.latLng;
        var input = document.getElementById('TextBox1');
    
        });
    

    }

    google.maps.event.addDomListener(window, 'load', Initialize);
    

    </script>

    <input type="text" id="TextBox1"/>
    <input type = "button" id="btnDisplay" value = "Display"/>

    J 1 Reply Last reply
    0
    • U User 9875787

      I am working with Google Maps embedded on my webpage. What I want is to create a button click event, so that after a user has entered an address into a textbox (called txtBoxMaps), they can click a button which will display the new location on the same webpage. I tried using: google.maps.event.addListener(map, 'click', function(event) but when I click the button (btnDisplay) nothing happens. I can see the google map but it doesnt change after the "Display" button is clicked. Here is my code below:

          .style1
          {
              width: 104px;
          }
          .style2
          {
              width: 144px;
          }
          #GO
          {
              width: 92px;
          }
          #Display
          {
              width: 113px;
          }
      

      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
      <script type="text/javascript">

      function Initialize() {
      
      
          var mapOptions = {
              center: new google.maps.LatLng(-33.01, 27.9),
              zoom: 13,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
      
          var map = new            google.maps.Map(document.getElementById('GMap1'), mapOptions);
      
      
          google.maps.event.addListener(map, 'click', function(event) {
          mapZoom = map.getZoom();
          startLocation = event.latLng;
          var input = document.getElementById('TextBox1');
      
          });
      

      }

      google.maps.event.addDomListener(window, 'load', Initialize);
      

      </script>

      <input type="text" id="TextBox1"/>
      <input type = "button" id="btnDisplay" value = "Display"/>

      J Offline
      J Offline
      jkirkerx
      wrote on last edited by
      #2

      You have to divide the functions in 2 or 3 parts Initilize, drawMap And then call drawMap on the button click

      function intialize() {
      drawMap();
      }
      function drawMap() {
      var mapOptions = {
      center: new google.maps.LatLng(-33.01, 27.9),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById('GMap1'), mapOptions);
      google.maps.event.addListener(map, 'click', function(event) {
        mapZoom = map.getZoom();
        startLocation = event.latLng;
        var input = document.getElementById('TextBox1');
      });
      

      }

      1 Reply Last reply
      0
      Reply
      • Reply as topic
      Log in to reply
      • Oldest to Newest
      • Newest to Oldest
      • Most Votes


      • Login

      • Don't have an account? Register

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • World
      • Users
      • Groups