How can I search nearest schools for any given post code like shown in following screenshot?
http://i.imgur.com/xjrMp.png
When I go to maps.google.com I don't see this option. Or is it only available through Google Maps API? How can I do this?
The Places API will do something like this. See the example at https://google-developers.appspot.com/maps/documentation/javascript/examples/place-search and alter the code to change "store" to "school" (and the location to something else, if necessary).
The example you quote probably has their own database of schools.
Andrew is exactly right. You'll need to call in places along with your maps.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
Basic setup:
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
// Places request
// ALL TYPES: https://developers.google.com/places/documentation/supported_types
var request = {
location: myLatLng,
radius: 500,
types: ['school']
};
This example will need some modifying when put into use.
I had to do this recently for a project of mine (sorry for the annoying polygon in this example), here is a jsFiddle.
Related
I need a googlemap with clusters, popup and list where you can click on.
Hoping to find a simple solution which I can easily add markers and have a marker list which points to the marker on the map.
I have successfully used markercluster.js
Just load all your markers into a json (in my example they are in the variable locations), then load them:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
return marker;
});
If you look at the example code, it will show you how easy it is.
The Google Maps JS API documentation is as clear as it comes.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I don't think there's an off-the-shelf solution that looks exactly like your example. Getting that list is going to require some HTML work to position/render the module, and Javascript/DOM integration to sync it with the map. Some rudimentary front-end development is involved and if that's not something you want to tackle, perhaps you could just make a custom Google Map and link to it.
https://www.google.com/maps/about/mymaps/
One question: How to implement GEO search tip as www.airbnb.com has?
When I start writing "Lond.." it auto-suggests "London" etc. The same with other points on map. Where to search information about it?
Have a look at this blog post from Google which describes how to use Google Places Autocomplete to accomplish what you're asking about.
(Note: there's a good chance that airbnb.com uses something other than the Google Places API, probably an in-house service - actually I just viewed source and they are using Google Places API for something)
See Demo
The code that toes the work
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
I am using geocomplete to load the map. My question is, is there any way to get the bound of the map. I used to use
var bounds = results[0].geometry.bounds;
to get the bound is not working here, my code is given below
$("#textfield").geocomplete({
map: ".map_canvas",
details: "form",
types: ["geocode", "establishment"]
})
.bind("geocode:result", function(event, result){
alert(result.geometry.bounds);
alert(result.bounds);
})
both the alerts show 'undefined' as the value.
To get the map, you can do this:
var map = $("#textfield").geocomplete("map")
then you should be able to use
map.getBounds()
or any other built in google map api methods.
Edit: Found this in the downloaded script, there is an example 'Api'.
You can use: Map.getBounds()api-doc. There isn't enough code in your question to tell why result may be null; if you can include some additional code, a link, or maybe set up a jsFiddle, it will allow everyone to take a deeper look.
I have a general question about Google Maps. I want to use Google Maps just for germany, but of course the neighbor countries are shown as well. The border of germany is rarely visible.
Is there a possibility to fade out the other, not used countries?
I was able to do this using the public World Country Boundaries.kml Fusion Table.
You'll need to add it as a Fusion Table Layer to your map.
Firstly initialize a map zoomed out right out, centered so we can see most countries:
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(30,0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
Next add the FusionTablesLayer:
var world_geometry = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk'
},
map: map,
suppressInfoWindows: true
});
That looks like this:
With regard to:
Is there a possibility to fade out the other, not used countries?
If you look at the Fusion Table you'll see there are columns for Name and ISO_2DIGIT. We can filter on these by passing a where condition to the FusionTablesLayer, e.g:
query: {
select: 'geometry',
from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
where: "ISO_2DIGIT IN ('US', 'GB', 'DE')"
},
To give:
For any one who ends up here in the future, this seems to now be handled very well by Google Charts, the latest implementation of the deprecated link above
https://developers.google.com/chart/interactive/docs/gallery/geochart
Old question, but: Google's deprecated Map Charts API looks like a better solution, if you do not need the map to be draggable:
https://developers.google.com/chart/image/docs/gallery/new_map_charts
Example: https://chart.googleapis.com/chart?cht=map:fixed=-60,0,80,-35&chs=600x350&chld=CA-BC|CN|IT|GR|US-UT&chdl=Vancouver|Beijing|Torino|Athens|Salt+Lake+City&chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274&chtt=Last+Five+Olympic+Hosts&chm=f2010+Winter,000000,0,0,10|f2008+Summer,000000,0,1,10|f2008+Winter,000000,0,2,10,1,:-5:10|f2004+Summer,000000,0,3,10|f2004+Summer,000000,0,4,10
This api will continue to work at lest until April 2015: https://developers.google.com/chart/terms
Important: The Image Charts portion of Google Chart Tools has been
officially deprecated as of April 20, 2012. It will continue to work
as per our deprecation policy.
14 years (!) after the original feature request, Google has enabled Data-driven styling.
One of the most commonly requested features you have asked for is access to the same boundaries and polygons used in Google Maps to build informative and engaging maps for your customers. Today, we are excited to announce the preview release of Data-driven styling for the Maps JavaScript API, which enables you to display and style Google boundaries.
Here is a demo and the official documentation.
Currently (API version 3) there seems to exist no possibility to increase border-thickness for single countries.
If you just want a map of Germany why not use this:
http://jvectormap.com/maps/countries/germany/
Germany is already available
I'm absolute newbie as for Google Map / Yahoo Map. I would like to know if it is technically possible to ask to show any city in any country DYNAMICALLY (I mean by passing parameters) and then to show some pictures OVER the map near the city ?
Thanks.
There's a multitude of ways you could accomplish this, some prettier than others.
You could use GInfoWindow to display a popup window with pictures in it at any location.
You could use one of the handy libraries offered here http://code.google.com/p/gmaps-utility-library-dev/ to assist you in displaying those images.
What I would recommend, however, is using http://econym.org.uk/gmap/ewindows.htm to create a window that is similar to GInfoWindow but that is styled by you. Just style the window so that it appears to simply be an overlaid picture.
You could choose to fool around with z-index's and manual positioning with a JavaScript library like jQuery.
Also, to answer the beginning of your question yes you can refocus the map anywhere using GMap's .setCenter() method. Documentation of setCenter(), GInfoWindow and much more available at http://code.google.com/apis/maps/documentation/reference.html
I just started learning this myself.
Here is a good link to get started:
http://code.google.com/apis/maps/
On your second question,
show some pictures OVER the map near
the city?
I like #andykram's response above, but I've implemented this previously using the Panoramio layer available for the Maps API. It can get a bit crowded but its an interface people are used to and because it is so simple to include it in a map, it just be the solution for you this time.
Just add the following to your map initialisation function.
var myLayer = new GLayer("com.panoramio.all");
map.addOverlay(myLayer);
As far as dynamically showing any city in the world in a Google Map, the solution is easily implemented - you need to geocode the name of the city. This can be done by triggering a function on an event like onclick.
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (point) {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
If you hit a hurdle, try this first - http://econym.org.uk/gmap/ - possibly the best resource for the GMaps API on the web.
GeoExt is a nice framework if you work with maps in general. You can access other kinds of maps too (OSM, GeoServer).