So I have a fusion table and I can map it out. However, I'd like to know how to make it so that if I click on a specific page, the map will just show that specific place.
To make it clearer, it's similar to what Yelp is doing.
So if I search a local business, and I see the page, Yelp have that business on Google Map, zoomed in.
Another example: http://alamatku.com/direktori/united-parcel-service-inc-ups) - Here you can see that the map is specifically located for UPS.
I'd like to do something like this but I can't find a way. Anybody can help me perhaps? =D
Thank you so much in advance!
Here is an excelent example of querying the table with javascript. http://geochalkboard.wordpress.com/2011/05/19/adding-a-fusion-table-to-google-maps/
Fusion table has an SQL API which allows you to 'select' or 'query' table and the result of which you can use with google maps api. Go to this link for more details :
Google Fusion Tables API
While editing the table under Visualize > Map, click the 'options' link beside 'Showing all rows'.
Then create a filter for the row you want to find, 'id = 1234' for example. Click apply. This should filter the demo map to just one element.
Now, click the 'Get embeddable link' link. That should provide you with an embeddable code that you can edit. Should look something like this (note that I've masked my table id to #######):
<iframe width="500" height="300" scrolling="no" src="https://www.google.com/fusiontables/embedviz?viz=MAP&q=select+col4+from+#######+where+col0+%3D+'1234'&h=false&lat=42.90790860608937&lng=-78.84992963798828&z=7&t=1&l=col4"></iframe>
The important part for you is to find the filter condition:
where+col0+%3D+'1234'
This is what you want to edit when generating a link for different places. For instance in my case I would change '1234' to whatever id I've stored for my place.
Hopefully this steers you in the right direction. If you're using the javascript Google Maps API then there are other ways to do this.
Related
I am using the new google maps system and an embedded iframe to add my google map into my page with my custom locations.
What I am missing is a way to have a user search their address to see which location is nearest them.
The map lists local Disc Golf courses and I would like to incorporate a search bar that allows you to put in your address so you can see how close you live to the nearest course.
Any idea on how to accomplish this?
Here is my current iFrame code:
<iframe src="https://mapsengine.google.com/map/u/0/embed?mid=zgauQ93-BexQ.kryT1881iie4" width="640" height="480"></iframe>
Displayed on the site:
http://atxdiscgolf.com/
As you can see... no search bar! I want to be able to search addresses on this map so I can see how close they are to home! Please let me know!
Also let me know if you have any Disc Golf courses to add to my list!
I figured out how to do it!
First, I used the "sample code" found here:
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=fr
Then I read about KML layers so...
https://developers.google.com/maps/documentation/javascript/examples/layer-kml
I went to My Maps, clicked export as KML, checked to update when my map updates then directed the KML to the file location that I downloaded the KML file from from My Maps.
It worked! I have a searchable map with my custom overlay embedded!!
It won't let me post more than 2 links so I will post the link to my fiddle in the comments below:
Check out the sample code in the documentation. It adds a search box to the map, which is what it sounds like you're looking for. If you want to be able to get directions or calculate distances, you may have to use other libraries/apis, though Google Maps v3 does already have a lot of the methods already (like computeDistanceBetween).
I'm building an application where user-submitted posts are placed via their location as markers on a Google Map. The users are currently able to view the markers/posts on a map in relation to their current location.
What I'm aiming to do is allow the user to change the location of the map so that users can see the markers/posts in relation to another address, specifically via a form that allows them to enter an address and change the location of the map.
I found a YouTube video illustrating a pretty close approximation of what I'm aiming to do, but it unfortunately provides no code or instructions (http://www.youtube.com/watch?v=4uyIawlsvzU).
Is there a way to efficiently wrap an existing Google Map and the existing markers into a form such as this? I've searched for a solution but can't seem to find the proper way to achieve this. Many thanks for any feedback.
You need to search for LatLng by user specified address and to display it. I see not problems at all :)
Study Google Geocoding API for this (seems best solution for your case) and this example
I am trying reverse lookup of the locations from the maps.
Say, I have different locations in my database with their co-ordinates and details.
Now, whenever I zoomin/out or drag the map (in Mapquest) all entries should be displayed in a dropdown with the visible area of the map. It should update the list according to the map zoom level and position.
Is there anyway to do this. I am Ok with Google maps also.
Here is the link what I want to achieve.
http://oobgolf.com/courses/finder/
Basically...the business logic is like this:
You need to get the boundaries from the map object and then pass these as parameters via AJAX to the SQL query which fetches the records, e.g minLat/maxLat & minLng/maxLng ... these go into the WHERE condition. This will "cut out a rectangle" from your geo-data. You might adjust these values by 5-10% - so that points very close to the boundaries will not be painted to the map (that's just a cosmetic fix).
Just found some sample JS code on my drive for the Google Maps API (it uses jQuery):
function loadViewport() {
var b = map.getBounds();
$.minY = b.getNorthEast().lng();
$.maxY = b.getSouthWest().lng();
$.minX = b.getSouthWest().lat();
$.maxX = b.getNorthEast().lat();
$.url = "http://www.somehost.com/data.php?mode=viewport&minX="+$.minX+"&maxX="+$.maxX+"&minY="+$.minY+"&maxY="+$.maxY;
$.ajax({type:"GET",url:$.url,dataType:"json",success: parseJSON});
}
Populating to listing to the left will need to by done in function parseJSON() ...
The WHERE condition of the SQL would be something like that:
WHERE
(`location`.`latitude` BETWEEN ".(float)$minX." AND ".(float)$maxX.")
AND
(`location`.`longitude` BETWEEN ".(float)$maxY." AND ".(float)$minY.")
Of course the columns in the table need to be of data-type float - else this won't work for sure.
As you can see, I'm casting from string to float - in order to enable the comparison...
Hope this helps, the code for MapQuest may vary - but the logic should be quite the same.
Source
This logic works for the MapQuest APIs as well. You will need to pass the current extent of your map into the query so that you can query the database based on the extent of the map. The results from the query would then populate your drop-down menu, so all POIs currently showing on the map will have a corresponding item in the drop-down menu.
If you're using the MapQuest JavaScript API, take a look at the MQA.TileMap.getBounds method, which returns the current bounding box of the map extent. I've found the forums on the MapQuest Developer Network website to be extremely helpful when I've had questions, so don't hesitate to post a question or code sample there if you need help or need further clarification. Here's the link: http://developer.mapquest.com/web/products/forums/
I have a map of several counties I need to turn into a county select menu (i.e clicking Leicestershire will select Leicestershire.
I am using a php built system that this map will need to return the appropriate value to. I am thinking this will be a get in the url, checked for valid values in the backend.
How would you approach this? A html co-ordinate map? Some sort of Javascript? Flash?
I am aware all those solutions have one drawback or another. Does anyone know a better way of doing this? Or an existing opensource project?
Just an idea, if I read your problem correctly: I would personally use the Google Maps API for this. Plot each county onto your custom Google Map, then when you click each marker an info window could appear with "Select this County". Click the link and pass a value through the URL to your PHP script.
Used a html map system. Dreamweaver made it easy (first time I've used the design screen seriously)
I currently have a map mashup that has locations that I'm populating from my own database. A few users would like to also show that map on their site(s). I'd like to give them the ability to do that, but would like to retain the actual functionality of the map on my own site: like add "stuff" to places on the map through my a web form on my site. I could open the entire API to allow them to create their own form along with the data points, but most of the people wanting to put up the map aren't developers, they are just enthusiasts that have put together a personal page that they want to spice up.
I was thinking I could just provide a JavaScript of some kind that they could then take to place on their site, or maybe an IFRAME of some type, or...any ideas? Anyone implemented this? TIA.
I haven't done anything like this myself, but I think your idea to utilise an iframe is on the right track. In fact, this is how Google Maps generates its embed code.
Your app will need to generate a URL with all relevant Google Map parameters such as bounds, zoom level as well as your application-specific params. Any event that triggers the map to re-draw (drag, zoom, etc.) will generate a new URL.
If you try the embed link in Google Maps as an example, it generates a URL that looks something like this:
http://maps.google.com/maps?f=q&source=s_q&sll=45.434035,12.339057&sspn=0.003294,0.004812&ie=UTF8&ll=45.432724,12.338966&spn=0.006588,0.009624&t=h&z=17
This URL can then be wrapped up in an iframe which your end users can place on their web pages.
Re: resizing
Yes, it's possible to dynamically resize it if width/height is part of your application params that generates the embed code. Again using Google Maps as an example:
<iframe
src="http://maps.google.com/maps?f=q&source=s_q&sll=45.434035,12.339057&sspn=0.003294,0.004812&ie=UTF8&ll=45.432724,12.338966&spn=0.006588,0.009624&t=h&z=17&output=embed"
width="(width-param)" height="(height-param)"></iframe>
If you mean resized by user, after it's been displayed, I'm not sure.. most likely, yes.