SearchBox in Form using react-google-maps - javascript

Created a Modal having Form, and I want to add a place SearchBox.
All I need is the Name of the Place and Not the Map.
Using this Project - react-google-maps
I'm trying to use the above mentioned project and according to it.
I am able to get the "Customized Search Box".
How can I just use the searchbox and not the whole map.
And also it's messed up in zIndex.
The "as" written in the Placeholder box is transparent and
search suggestions i.e "ashley homestore" are at the back of the box.
How to fix it?
Thanks.

Solution was pretty simple to switch to
Google React Placeholder Autocomplete
by kenny-hibino

Related

Displaying a select box on click start in React DnD?

Displaying a select box on click start in React DnD?
https://react-dnd.github.io/react-dnd/examples/nesting/drag-sources
I read the docs, but I don't see anything that allows me to show a select box. I am wondering if there's an easy way to do this, or I need to implement some low-level vanilla js code like the author of vi-select did:
https://github.com/Simonwep/selection/blob/01d781ead3768aa2e1b78489b0c88a0f2e9c3597/packages/vanilla/src/index.ts
Is there some solution in simple React?

How to add my own custom places at autocomplete Places search box?

I have implemented autocomplete search box. From here,
Places search box
I have seen this question, how-to-display-custom-places-in-google-maps-api-search-results
But it was unable to help me. The accepted answer is not showing custom places in auto completed result.
Now I want to show also my own custom places (from a JSON list of places) along with Google's place suggestion at autocomplete result. How can I implement this?

Google Search Map

Something has crossed my mind recently and I can't seem to really find an answer .. I have tried few times and without success.
How do you get a google search box with places and locations without having the map on the same page.
You basically choose the place , then press search and it redirects to a map.
The part where I am stuck is that I just want the google search box from here , without the map ? Any ideas ?
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
Here is another example :
To resume : Is it possible to have just the search box ? Then click a button and redirect to another page with the map.
I haven't used it without the map, but I think you need to al least bound the SearchBox to an input and and then how you handle results is up to you, including redirecting to a different page.

styling the input box autocomplete

I was wondering if it's at all possible to style the autocomplete box that appears from input fields.
( I know This question is the same but that doesnt have a answer and since its a few months old i figured i made a new post about it)
That image is of my login screen with the autocomplete box being all square and bulky compared to my input field. If it's not possible to style the box i'll simply turn autocomplette off but if it's at all possible i would be very interested.
New screenshot:
Yeah you can't do that since it's browser based. Here's a great example in jQuery that uses autocomplete. I use it all the time for sites - super slick.
http://www.devbridge.com/sourcery/components/jquery-autocomplete/
You can't modify the browsers' native functionality. Your best option is to find a plugin that overrides the autocomplete drop-down functionality and modify the code and style to your liking. Please take a look at jQuery's autocomplete plugin. http://jqueryui.com/autocomplete/#custom-data

Is a textarea the most appropriate UI element to show/hide link text like in Google Maps?

I need to show a link on my page and I'm looking for examples of how to do it well.
I looked at Google Maps and it seems like they display the link in a textarea inside a show/hide span:
For example, if you go to a Google Maps address, on the far top right of the map there is a hyperlink called "Link" and when you click it, a small overlay pops up over the map.
http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Cupertino,+CA,+United+States&sll=37.0625,-95.677068&sspn=35.547176,55.634766&ie=UTF8&hq=&hnear=Cupertino,+Santa+Clara,+California&ll=37.355422,-122.032013&spn=0.139453,0.217323&z=12
The textarea seems to be a good option here because their links are very long.
Is that the best UI element for this case?
Another option is to pop it up into a jQuery UI overlay and simply display the whole thing as text.
Would appreciate any pointers on where to look for this.
My vote goes for textbox (<input type="text />) because it's easy to implement so that the links is selected when you enter the box. This makes it easy for the user to copy the link.

Categories