Google Maps API - Search XML Markers - javascript

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

Related

Google map with search integrate in to wix website

I need to integrate google map in to Wix with following circumstances.
Address auto completion field. (the field must create via wix element)
The address field must have auto completion facility.
When input a address, it should mark on the map.
When map dragged, the center coordinates should pass to another text field in wix site.
I did lot of searches and didn't find a proper way to do this.
I completed the dragged part is using window.parent.postMessage and it's working find.
the issue is how can i create this auto completion address field
It seems like the AddressInput element is what you're looking for.

Save Leaflet Screenshot a form

I have researched this endlessly but cannot find exactly what I am after, so hopefully, I can get some advice here. I am pretty new to coding and learning by doing, so please forgive any errors in the request.
I have built a Leaflet map using various libraries where the user draws a polygon on over an area and they have the option to save the map.
The map all works and currently the user can either download the map or it saves as a screenshot by creating a new image container in the body of the page.
There is a form that the user completes with some supplementary information that is then sent to me. My problem is I do not want the user to have to download the file and then reupload it as a file to the form.
I would like to basically put the screenshot into the form and that gets sent to me and/or it gets saved automatically to a folder on the backend somewhere. I am stuck with how to put an image into a form without the need to upload it. Therefore if I can work out how to save the image to a folder that would be perfect.
I am by no means expecting someone to do my project for me, but if someone could point me in the correct direction to start that would be great. If any more info is required or snippets of code I can add if required.

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.

Automatic add marker on Google Maps from database

I've followed this tutorial to plot markers from a database on my GMaps page. I have 2 type of markers (Green: marker status on my DB equals zero; Red: marker status on my database equals one) and I need to update the marker icon everytime a change is made on DB status column. I also want to adapt this code to add markers on map everytime I got a new line on my DB. The question is that I can't refresh the entire page, I'm allowed to refresh only the markers.
Someone know a way to do this? I'm using MySQL, PHP and JavaScript on my page.
You will have to use AJAX to do this. You can load the map via AJAX, and use setInterval() to reload the map and show the changes. In this way you are not reloading the page, you can reload just the contents of a <div> with the map's contents.

Categories