Adding a customised Google map using Wordpress

CMS & WordPress
1

I have a client that would like a site built using Wordpress but it will be highly customised and they want a couple of dynamic features in particular they want a Google map with a drop pin feature like this one used on the E.ON website http://www.eonenergy.com/At-Home/Goi...city/?WT.svl=4

I know Wordpress has some Google maps plugins but they are not quite the same. Is it therefore possible to add the Javascript etc. necessary to add a Google API map that is as customised as the example. They would also like the address details and latitude/longitude that have been selected by the user to be sent in a form. Again, is this possible using Wordpress?

Any advice from any Wordpress users/experts out there would be much appreciated.

2

First, I can’t look at page

Second, and in answer to your question, almost for sure, yes. You could do it with Javascript or modifying the plug-in that is closer to what you want to achieve.

3

Sorry, here’s another example of the Google map they want A Shade Greener - Free Solar Panels | Free Electricity UK | Solar Power for Home | Solar Panel Suppliers

Would it be possible to add something like this to a Wordpress site?

4

Again, I don’t see why not :slight_smile:

Edit: I’ll be a bit more specific. WP will control where the map shows and how much space it will take but the features related to Google maps such as the pin depend on Google Maps API, not WP.

5

I write one of the WordPress map plugins so I have dealt with a lot of combinations of WordPress and Google Maps.

The key to understand how to build this out lies in what molona is saying: building this functionality has everything to do with using the Google Maps JavaScript API and little or nothing to do with WordPress. The “where did the click take place” is a function of the API.

The Maps API allows you to register “listeners” to items in a map or the map itself. A listener allows you to insert functionality whenever a certain event happens.

Here is an example of registering a listener for a right click.

The key thing to see here is that we have registered an event and defined some functionality to occur when the event fires.


google.maps.event.addListener(wpgmappitymap, 'rightclick',
  function(result) {
    var marker= new google.maps.Marker(
      {
      position : result.latLng,
      map : wpgmappitymap,
      icon : 'http://www.wordpresspluginfu.com/google_map_builder/sample/dwight.png'
      });
    mapclick(result);
  });

This is instructing the map to execute the defined callback function whenever the map is clicked. In this example, the callback to the event inserts some text about where the click took place into the page and then reverse geocodes the point it occurred to find the closest address. (check out the full code if you are curious about the geocoding or text insertion)

The callback is where you accomplish your goal, and this is where you can have Google Maps start to interface with WordPress. Maybe indirectly by populating the fields of a mail in form, may directly by firing off an AJAX request to WordPress with the results of the click.

The Google Maps API is awesome and really well documented. Have a read through and see what all events you can listen for and what data they return.

The JS in that example is here: http://www.wordpresspluginfu.com/google_map_builder/sample/clickevent.js