Question

I have a form that is dynamically inserted into the Google Map. However I cannot click any of the inputs. I believe I need to add a listener somewhere but I’m not sure.

Fiddle

    function googlemap() {

    // google map coordinates
    var posY = 37.765700,
        posX = -122.449134,
        location = new google.maps.LatLng(posY,posX),

        // offset location
        posY = posY + 0.055;
        offsetlocation = new google.maps.LatLng(posY,posX);

    var mapOptions = {
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: false,
        draggable: true,
        disableDoubleClickZoom: false,
        scrollwheel: false,
        zoom: 12,
        center: offsetlocation,
        // ROADMAP; SATELLITE; HYBRID; TERRAIN;
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    overlay.prototype = new google.maps.OverlayView();

    // create overlay marker
    overlay.prototype.onAdd = function() {

        blip = document.createElement('div'),
        pulse = document.createElement('div');
        blip.className = 'blip';
        pulse.className = 'pulse';

        // createa dialog and grab contents from #mapcontents
        boxText = document.createElement("div");
        boxText.className = "dialog";
        mapContents = $('#mapcontents').html();
        boxText.innerHTML = mapContents;
        $('#mapcontents').remove();
        blip.appendChild(boxText);

        // append 'blip' marker
        this.getPanes().overlayLayer.appendChild(blip).appendChild(pulse);
    }

    // update blip positioning when zoomed
    overlay.prototype.draw = function(){

        var overlayProjection = this.getProjection(),
            bounds = new google.maps.LatLngBounds(location, location),
            sw = overlayProjection.fromLatLngToDivPixel(bounds.getSouthWest()),
            ne = overlayProjection.fromLatLngToDivPixel(bounds.getNorthEast());

        blip.style.left = sw.x + 'px';
        blip.style.top = ne.y + 'px';



        // shift nav into view by resizing header
        var w = $('.dialog').width(),
            w = (w / 2) + 25,
            w = '-' + w + 'px';

            h = $('.dialog').height(),
            h = (h) + 100,
            h = '-' + h + 'px';

        $('.dialog').css({
            'margin-top' : h,
            'margin-left' : w
        });


    };

    var map = new google.maps.Map(document.getElementsByClassName('map')[0], mapOptions);

    // explicitly call setMap on this overlay
    function overlay(map) {
        this.setMap(map);
    }

    // center map when window resizes
    google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(location) });

    // center map when zoomed
    google.maps.event.addListener(map, 'zoom_changed', function() { map.setCenter(location) });

    // I have nfi what I'm doing but I think this click listener is part of the solution.
    google.maps.event.addListener('.dialog', 'click', function() {

        alert('ok');
    });

    // process contact form
    google.maps.event.addListener(map, 'domready', function() {

        $('button').click(function(e) {
            (e).preventDefault();

            alert('ok');

            return false;

            var name    = $(".contactform input[name='name']"),
                email   = $(".contactform input[name='email']"),
                message = $(".contactform textarea[name='message']"),
                error = false;

            // clear validation errors
            $('#contact input, #contact textarea').removeClass('error');

            if(name.val().length < 1)
                name.addClass("error");

            if(!/^[a-zA-Z0-9._+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,4}(\.[a-zA-Z]{2,3})?(\.[a-zA-Z]{2,3})?$/.test(email.val()))
                email.addClass("error");

            if(message.val().length < 1)
                message.addClass("error");

            // if error class exists
            if($(".error").length) return false;

            $(this).attr('disabled', true).prepend('<i class="load animate-spin"></i>');

            $.ajax({
                type: "post",
                dataType: "json",
                url: "lib/sendmail.php",
                data: $("#contactform").serialize()
            })
            .always(function(data) {

                $('h5').animate({opacity:0},function(){
                        $('h5').text("Email Sent!!")
                    .animate({opacity:1});
                });

                $('.contactform').animate({opacity:0},function(){
                        $('.contactform').html("<p class='success'>Thank You for your form submission. We will respond as soon as possible.</p>")
                    .animate({opacity:1});
                })

            });

        });

        return false;
    });


    // add overlay
    overlay = new overlay(map);
}

Any idea why I can’t click the inputs?

Answer 1

You just need to block propagation of mousedown map event to make inputs clickable:

google.maps.event.addDomListener(blip, 'mousedown', function (e) {
    e.cancelBubble = true;
    if(e.stopPropogation) {
        e.stopPropagation();
    }
});

And you can do the same for dbclick to prevent map zooming: http://jsfiddle.net/gfKWz/1/