Adding a custom control to Google Maps

@ismailkimyacioglu

This plugin solves a specific problem, and does not allow to place your own controls on map. In future i may expose some JS API to hook into map object on runtime. This will still require developer to code.
Google Map API IS vast and it is not possible to build all these here.

You are free to modify the code, however i don’t recommend that.
You can go with you custom solution.

Thank you so much for the reply. Interestingly, I have checked many plugins and none of them offer such a feature. Maybe in the future.

Hi, ismailkimyacioglu

I just released v2.5.0 which expose some global variables which allow you to hook into map js.

Read more:
https://github.com/ankurk91/wp-google-map/wiki/Hook-into-JS

• This reply was modified 7 years, 9 months ago by ankurk91.

Hello ankurk91,

Sorry for the delay. However, I couldn’t understand what you mean by hooking into map js. Does it mean that I can add a man icon to reset the map to default address ?

@ismailkimyacioglu

Yes, now you can add a custom control to map.
This require you to write few lines of code.

Here is how you can do this,

/**
 * The CenterControl adds a control to the map that recenters the map 
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function AddCenterControl(controlDiv, map, originalCenter) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to center.
  controlUI.addEventListener('click', function () {
    map.setCenter(originalCenter);
  });

}

window.addEventListener('agm.loaded', function (e) {
  // do something after map is loaded
  console.log(window.AGM);
  var map = window.AGM.map;
  var originalCenter = map.getCenter();

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new AddCenterControl(centerControlDiv, map, originalCenter);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

}, false);

I have not tested it.
Hope this helps.