Google Search Map - javascript

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.

Related

SearchBox in Form using react-google-maps

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

Display Bing Map on Modal

I've been trying to cutomize the display of Address Bing Map Location in CRM form. Instead of displaying it by default, I want it to display on modal popup. So once the user clicked on the address, the modal popup should display with the Map on it. What do you guys think is the better approach should I used? Should I just enable the Showing of Bing Maps through system configuration then hide it by default once the page is loaded, then append it to the modal once the address is clicked or just make a function that will create a bing Map? Actually I'm working on the second choice but didn't able to make it right. Here's the code I have so far, been using this through console, yes it display the Map but really dont have an Idea what credentials should I put.
`$("#address1_composite").click(function(){
alert();
var map = null;
map = new Microsoft.Maps.Map(document.getElementById('SDKmap'), null)
})
Hope that my explanation is clear enough to understand the requirement.
`
I highly recommend that you load the map ahead of time, or delay until it is first needed, but then only hide/show it using your click events. Otherwise a user code end up loading the map multiple times in a single page view which would generate lot of transactions and make it very costly very fast.

Search box with choice of search engines

So here's the deal. I'm creating a personal start page for every time I open up a new tab or window on my browser. In my current start page, I have a search field which immediately searches in Google for me. However, many times I search for images or videos or wikipedia etc. I want to eliminate having to click on (for example) Images after my Google search. I would like to have a dropdown box next to my search, and be able to choose images, following which it would automatically search in Google Images, instead of going to standard Google.
Here's an example of what I'm thinking about:
https://dribbble.com/shots/871091-Search-Box
So the default would be blue, which will do a standard Google search. If I want to search for an image, I click the red icon in the dropdown before the search, which would automatically do a Google Image search. I'd prefer having a dropdown box, and not an option list.
Is this possible? If so, can someone help me with how to go about doing it? I am not a web developer, but I am comfortable with basic and intermediary concepts of HTML, CSS and JavaScript. Linking me some tutorials to this would be helpful, if they exist. I wasn't able to find any in my searches, but maybe I've been using the wrong terms.
Cheers.
The feature you're looking for is called search engines. You can map a keyword to a search engine.
For instance I can type y nyancat in the omnibar to search for "nyancat" on YouTube.
Similarly you can set one up for google images.

Google Maps API - Search XML Markers

EDIT: Just some background information - the system is set up using mySQL to store each marker's info, which is then converted into an XML file by some PHP code, which then displays it via the Maps javascript file. I currently have about 10 markers, which are stored in the mySQL database. Upon loading the map, all the markers are loaded.
I am currently using the Maps API v3 to display markers, and to display their infoWindows in a div. That's all good so far.
What I'd like to do it add a search functionality.
From what I understand, the API does have a search function, but when I tried it on the example in the documentation, it did a search across the whole map. I want it to only search amongst my markers.
EDIT: As I mentioned in the EDIT at the top, all markers are displayed at the initialize() - therefore, when someone searches for a location, the closest match would be selected. In the case of my map, the infowindow is displayed and split across 2 'html' sections, outside the map area (i.e., there is no bubble display on the actual map)
EDIT: Initially, I was worried that someone would come along and copy my idea if I posted the URL, but I'm sure it's been done already! Scr*w it - CityMap Prototype
So, I guess I'd need to find/create some sort of system that searches the XML file. Initially, the user would only be able to search for locations by name. Later, I'm sure I could come up with creative uses for the search.
Can anyone point me in the right direction?
EDIT:
After posting this, I found a tutorial on W3C - PHP Example - AJAX Live Search. It searches for links from an XML file, and then displays them in the temporary search results under the bar, as you type. Does anyone know how I can link this search function to the markers?
From what I can understand, I'd need to somehow link to each marker via XML, but that's the extent to my guess.
Thanks
From my understanding the api's search functionality is not for local files but for the whole map(world), if you are doing php I would recommend for the time being utilizing the tutorial you found and then linking the search functionality to performing some sort of javacript response which would perform the action which you are looking for upon search. I am not sure what this functionality is as you already would have the markers plotted on the map from the sound of your question. Let me know if you need more on this not sure if you are in a php/ruby/asp environment. (or if you are in a truly html environment) hth

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