2 Replies - 8722 Views - Last Post: 28 August 2013 - 03:54 PM

#1 Black_Lion   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 31-March 13

Google maps button click event

Posted 28 August 2013 - 02:51 PM

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:

<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('txtBoxMaps');



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

&nbsp;<input type="text" id="txtBoxMaps">

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

        <div id="GMap1" style="height: 240px; width:570px" ></div>

Is This A Good Question/Topic? 0
  • +

Replies To: Google maps button click event

#2 andrewsw   User is online

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6552
  • View blog
  • Posts: 26,566
  • Joined: 12-December 12

Re: Google maps button click event

Posted 28 August 2013 - 03:42 PM

I assume, logically, that this:

google.maps.event.addListener(map, 'click', function(event) {

would add a click event to the map itself, it has no connection to your button (how could it, the button or its id isn't mentioned anywhere in the code?).

You could investigate the JS method addEventListener, which is the correct way to attach an event, or use the onclick attribute:

<input type = "button" id="btnDisplay" value = "Display" onclick="doSomething()" />

BTW Please don't name your input input.. it can only be confusing, and possibly cause a conflict at some stage; use a little imagination. But this is just my opinion, a lot of people do this, naming a form form, etc..

This post has been edited by andrewsw: 28 August 2013 - 03:46 PM

Was This Post Helpful? 1
  • +
  • -

#3 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Google maps button click event

Posted 28 August 2013 - 03:54 PM

This is also a good resource to read on the click event from devdocs.io, it is sometimes over whelming to use the Mozilla documentation, albeit a great place to get the full story about javascript.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1