Locating the Searchbox on Google Maps with the angular-google-maps library

Question

Locating the Searchbox on Google Maps with the angular-google-maps library

I am currently working on positioning the Google Maps searchbox variable in a way that allows it to stay fixed under markers as they are listed. I am utilizing the Angular Google Maps library for this purpose, which provides a directive known as <ui-gmap-search-box>. However, in order for this directive to function properly, it needs to be placed inside the

<div id="map_canvas"></div>

, while the list of markers remains outside of that specific div.

javascript angularjs google-maps

Answer 1

Answer №1

Utilizing the custom control functions offered by the Google Maps API would be beneficial in this scenario.

To position your controls on the top left corner of your maps, you can create click event listeners for your control and handle your tasks from there.

For more details on Custom Controls, please consult the official documentation.

In addition, modifications were made to this sample, resulting in the example provided here. I hope it proves helpful.

var map;
//var chicago = new google.maps.LatLng(41.85, -87.65);

/**
 * The CenterControl adds a control to the map that recenters the map on Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
controlUIs = [];

function CenterControl(controlDiv, map) {


  locations = [new google.maps.LatLng(37.7833, -122.4167),
    new google.maps.LatLng(37.3382, -121.8863),
    new google.maps.LatLng(37.4223662, -122.0839445),
    new google.maps.LatLng(37.8694772, -122.2577238),
    new google.maps.LatLng(37.7919615, -122.2287941),
    new google.maps.LatLng(37.6256441, -122.0413544)
  ];
  for (var i = 0; i < locations.length; i++) {
    // 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';
    controlUIs[i] = controlUI;
    controlDiv.appendChild(controlUIs[i]);

    // 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 = 'Location ' + i;
    controlText.location = locations[i];
    controlUIs[i].appendChild(controlText);


    // Setup the click event listeners: simply set the map to
    // Chicago
    google.maps.event.addDomListener(controlUIs[i], 'click', function(click) {
      map.setCenter(click.target.location)
    });
  }

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(37.6326196, -122.1568744)

  }
  map = new google.maps.Map(mapDiv, mapOptions);

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

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

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

      html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0;
        padding: 0;
      }

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

<div id="map-canvas"></div>

Answer 2

Utilizing the custom control functions offered by the Google Maps API would be beneficial in this scenario.

To position your controls on the top left corner of your maps, you can create click event listeners for your control and handle your tasks from there.

For more details on Custom Controls, please consult the official documentation.

In addition, modifications were made to this sample, resulting in the example provided here. I hope it proves helpful.

var map;
//var chicago = new google.maps.LatLng(41.85, -87.65);

/**
 * The CenterControl adds a control to the map that recenters the map on Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
controlUIs = [];

function CenterControl(controlDiv, map) {


  locations = [new google.maps.LatLng(37.7833, -122.4167),
    new google.maps.LatLng(37.3382, -121.8863),
    new google.maps.LatLng(37.4223662, -122.0839445),
    new google.maps.LatLng(37.8694772, -122.2577238),
    new google.maps.LatLng(37.7919615, -122.2287941),
    new google.maps.LatLng(37.6256441, -122.0413544)
  ];
  for (var i = 0; i < locations.length; i++) {
    // 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';
    controlUIs[i] = controlUI;
    controlDiv.appendChild(controlUIs[i]);

    // 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 = 'Location ' + i;
    controlText.location = locations[i];
    controlUIs[i].appendChild(controlText);


    // Setup the click event listeners: simply set the map to
    // Chicago
    google.maps.event.addDomListener(controlUIs[i], 'click', function(click) {
      map.setCenter(click.target.location)
    });
  }

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(37.6326196, -122.1568744)

  }
  map = new google.maps.Map(mapDiv, mapOptions);

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

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

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

      html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0;
        padding: 0;
      }

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

<div id="map-canvas"></div>

Answer 3

Answer №2

Instead of using the search box provided by the library, I decided to implement the Google Maps API search box.

In my main.js file:

var searchBox = function() {
  var input = document.getElementById('autocomplete');

  var searchBox = new google.maps.places.SearchBox(input);

    google.maps.event.addListener(searchBox, 'places_changed', function() {
  });

}; // end searchBox

The searchBox() function is called within $scope.init().

Within index.html:

<input id="autocomplete" ng-model="newPlace" type="text">

Answer 4

Instead of using the search box provided by the library, I decided to implement the Google Maps API search box.

In my main.js file:

var searchBox = function() {
  var input = document.getElementById('autocomplete');

  var searchBox = new google.maps.places.SearchBox(input);

    google.maps.event.addListener(searchBox, 'places_changed', function() {
  });

}; // end searchBox

The searchBox() function is called within $scope.init().

Within index.html:

<input id="autocomplete" ng-model="newPlace" type="text">

Locating the Searchbox on Google Maps with the angular-google-maps library

Answer №1

Answer №2

Similar questions

I encountered an issue while operating my next.js application which utilizes solidity smart contracts. The error message "Cannot read properties of undefined" was displayed during the process

what is the duration for which a browser stores an ajax response in cache

What causes AngularJS to generate an error when attempting to construct a URL for the src attribute of an iframe?

The event.target.x attribute on the <i /> tag element

Utilizing Bootstrap Plugins with Nuxt.js: A Step-by-Step Guide

What is causing the click event handler to only function on the initial page?

Accessing a form by inputting a personal identification number

Utilizing Enum Types in Angular Templates

Safari is encountering an issue with the value provided for the width/height attribute in the <svg> element, as it is not a recognized

Injecting service dependencies for the purpose of testing controller functionality

Troubleshooting: jQuery addClass() function not functioning properly in conjunction with attr("href", something)

locate the following div using an accordion view

Each time forEach is called, it increments the previous result by 1

Organize data that is deeply nested

Error TS2339 encountered in ngx-uploader: There is no property called 'lastModifiedDate' on the type 'File'

Transform ajax functionality into jquery

The npm package installation process encountered difficulties in accessing the Chart.Js library

I am unable to utilize the backspace function within a text box generated by JavaScript

Why does this image slider begin with blankness?

Leverage AngularJS to effectively parse JSON data using scope variables