May 6, 2012

Hacking javascript: a contact form in a google maps info window


One of my goals last year was to be a better javascript programmer. After I finished the travel map I searched for ideas for new small projects. I came up with the idea to add a contact from to a google maps info window.

Beside the google maps api and jquery mapped contact form uses jquery.validate for fancy offline validation. Jquery.form is used to send and ajax request with the entries to a simple php backend. The backend php script just sends an email with the input.

It was a bit tricky to make the form and the jquery plugins playing well inside the map info window. But finally i found a nice solution. Thats how it looks like:

[mcf id=”map_canvas” width=”640px” height=”400px” map_center=”48.6909283, 8.939690299999938″ map_zoom=”10″ listener=”mouseover” locations=”(office, 48.6909283, 8.939690299999938, house_blue,;”]

Mapped contact form works really well if you have multiple offices or stores and offer a user friendly way to contact each of them.

It’s available in different flavours for some dollars:

Javascript edition – Mapped contact form pro

Php edition – Mapped contact form pro Php

WordPress Edition – Mapped contact form pro WordPress


ajax, google maps, google maps api, JavaScript, jquery, jquery.from, jquery.validate, php

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked

Information about Data protection

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Hi Jens, I love this mapped contact form pro, it is a great concept.
    However, I found a few issues with javascript conflicts with up to date versions of jquery.
    It works well with jquery 1.6.1 but it does not function correctly with versions 1.11 or 1.12.
    If I try to fall back to 1.6.1 many other elements on my site break down.
    Do you plan to upgrade the existing javascript files in Mapped Contact Form so it works with up to date jquery?
    I’ve only just purchased this and I’m that impressed with it I really want it to work, it would be a great shame to let this go because it really is a fantastic concept.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}