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
Related
I Use Leaflet Map Plugin. i Write this code for create and load google map tiles in LeafLet
var map = L.map('map').setView([31.2744015, 48.7251283], 18);
// load a tile layer
//Satellite:
L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
mapTypeId: google.maps.MapTypeId.SATELLITE,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
}).addTo(map);
this code work fine. But I Want Load another google Map option in this plugin Like 3D View map
But will this be done?
thanks for help me.
Two things:
Loading map tiles from Google using just a L.TileLayer contravenes the terms&conditions of Google Maps (the part about "accessing the content only through the Google Maps API"). Do not be surprised if Google gets angry at that.
As pointed out in the answers to the question «Leaflet Map API with Google Satellite Layer» , look in the Leaflet plugins list. In particular, GoogleMutant might be of interest.
As of now, Leaflet is able to display 2D maps only. There are no plans to make it display oblique imagery, or provide tilt capabilities.
If you need these features, you might want to have a look at other web mapping libraries, such as https://www.mapbox.com/mapbox-gl-js/api/ or https://cesiumjs.org/. These can handle more degrees of camera freedom, and some degree of terrain elevation display.
https://labs.mapbox.com/bites/00093/
pls see the source code of it , as
window.setInterval(function(){
$('.rotating').attr('style','-webkit-transform:rotateZ('+angle+'deg);-moz-transform:rotateZ('+angle+'deg);-moz-transition:-moz-transform 0.75s;');
if ($('.rotating').length>0) $('.pivotmarker').attr('style','-webkit-transform: rotateY('+angle+'deg);-moz-transform: rotateY('+angle+'deg);-moz-transition:-moz-transform 0.75s;');
angle=angle*-1;
},1500);
may it help
I have multiple addresses on the same street with the same house number, but with different apartment numbers. Google Maps Geocoding Service (v2) doesn't go down to apartment level accuracy for many addresses and just returned me the exact same geocode coordinates for them.
So the problem is that when I go to display them, only one pushpin shows up no matter how much you zoom in. And my question is; what is a good way to render multiple pushpins at the exact same house address? I've seen how craigslist.org creates a spiral out of the pushpins on their new map feature, but was wondering what my other options are as that seems like a workaround at best.
Ideas?
I solved this using Google's dynamic chart icons which allow you to put a number in the pin identifying that there are multiple markers on this exact some point. Basically, you call their "chart" url with some query params and they give you back your numbered icon which you can then place/set in the existing marker you have on that spot.
var markerImage = createMarkerImage(numDuplicates + 1);
existingMarker.setIcon(markerImage);
function createMarkerImage(text)
{
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + text + "|FF8985|000000",
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
return pinImage;
}
NOTE: This solution uses a deprecated google API with no end date posted.
"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."
UPDATE:
I have moved away from the above solution since it's deprecated (and has performance impact for many markers) in leiu of the same end effect of a numbered marker, but using a path of coordinates defining polygon in the shape of a marker along with a .png for the marker shadow. Only reason I used my own custom marker is because I needed to create individual markers, each with a unique color (and possibly an embedded number), which the vanilla markers don't support.
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.
Is it possible to disable map controls by adding some variables to the Google Maps embed code?
no you can't, but if you use the javascript api you can do this:
map = new google.maps.Map(document.getElementById("map_canvas"), {
panControl: false,
zoomControl: false,
scaleControl: false,
});
This can be done in one step in V3:
Add this to your mapOptions:
disableDefaultUI: true
That's the 8 stepts to can create a static map like this map of Berlin without controls:
http://maps.googleapis.com/maps/api/staticmap?center=52.569916,13.408571&zoom=8&format=png&sensor=false&size=300x200&maptype=roadmap
Here the 8 steps
Go to http://gmaps-samples-v3.googlecode.com/svn-history/r328/trunk/styledmaps/wizard/index.html
Type in your address in the top right corner
Now you can still style and zoom a bit
Click on the "Static Map"
Copy the Link,
Paste it in the address bar
Play around with the parameters (e.g. size)
Instert the ready image on your page
It would seem that google has implemented a tiered pricing model for the maps that are using the api, embed maps have unlimited uses while dynamic maps don't. The selected accepted answer, while still accurate, is only valid if you are willing to setup a paid account. For map implementation with more control that won't cost as much (if anything) I recommend map-box.
https://www.mapbox.com/pricing/
I don't think you can disable map controls using the embedded code in a clean way.
You could make them disappear via css if you find the class or id if the controls.
This is not a good solution because in the feature the code might break.
The best solution is to make a custom map using the javascript api v3.
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).