Please assist. Ive googled and gone through stack overflow but am unable to find this information anywhere. Is there a way to show only a specific continent, in my case Africa and hide all other unwanted continents in google maps. These maps shouldn't show at all. I came across this article -> Can i hide land masses with Google Maps API
But there is no specific example.
I am using Google Maps API 3.
Currently I have:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
//Implement map styling
var styles = [
{
"stylers": [
{"visibility": "simplified"}
]
}
];
var styledMap = new google.maps.StyledMapType(styles, {name: "MyMap"});
var mapOptions = {
center: new google.maps.LatLng(0.972198, 23.994141),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
draggable: false,
scrollwheel: false,
panControl: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
//Load kml of africa
var kmlMap = new google.maps.KmlLayer('http://myOverLay.kmz',
{
//suppressInfoWindows: false,
//map: map,
preserveViewport: true
});
kmlMap.setMap(map);
//map.mapTypes.set();
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
One option:
Cover the whole world except for a hole over your continent of choice. example of concept (US state of Virginia)
Limit the zoom and the bounds to prevent the map from going too far from showing that continent. description of how to limit the viewable area
Doesnt seem possible. Ended up using image mapster
Related
I do have a strange Problem with Google Maps API and a KML file.
When i initialize the Map with KML, everything works like charm.
Now my problem: After zooming into the map (zoom Level 10) the KML Layer inverts.
Here is the example:
var settings,map,marker,infowindow,consultant_fname,consultant_lname,consultant_zip,consultant_city,mapOptions;
var markers = [];
$(document).ready(function(){
mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.643186, 13.760376),
scrollwheel: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: true,
streetViewControl: false,
panControl:true,
panControlOptions : {
position: google.maps.ControlPosition.RIGHT_TOP
},
};
map = new google.maps.Map(document.getElementById('gmap'),mapOptions);
var ctaLayer = new google.maps.KmlLayer('https://www.creditnet.at/austria_3.kml',{
preserveViewport: true,
suppressInfoWindows: true,
map: map,
});
ctaLayer.setMap(map);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="gmap" style="width:700px;height:700px;"></div>
Hopefully anyone can help me.
Regards M.
Seems like a bug in the KML renderer.
As a workaround, you could use a third party KML parser (like geoxml3 or geoxml-v3), geoxml3 doesn't seem to have that artifact:
Example using geoxml3 (and a slightly modified KML to cover the whole world)
Note that for complex KML the tiled based rendering of KmlLayer will be more efficient and you may run into performance issues with the 3rd party parsers.
Trying to add a marker into a google map from a hidden variable on page load. Is this possible to do based on the address rather than the coordinates?
Code is:
var place = $('#hidden-place').val();
var markers = [];
var mapOptions = {
zoom: 15,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('google-map'),
mapOptions);
You could use the Geocoding service in the API - take a look at this example https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
In that example it lets you use a free form address and plots the first matching result as a marker.
This would get you started at least.
I want to embed a satellite Bing map without country / city information and without borders, basically I only want the satellite photos and add my custom pins. Is there a way to do that?
Right now, I create my map with:
var map = new Microsoft.Maps.Map(document.getElementById("bMap"),
{
credentials:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
center: new Microsoft.Maps.Location(35.173808, 90.402344),
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
zoom: 3,
disableZooming: true,
showCopyright: false,
showDashboard: false,
enableSearchLogo: false
}
);
For sure, you can use the mapTypeId property in the mapOption and replace your line:
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
By this line:
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
See the MSDN for reference: http://msdn.microsoft.com/en-us/library/gg427625.aspx
Also, in combination, you need to configure the label information by using the labelOverlay property:
var mapOptions =
{
credentials:"Your Bing Maps Key",
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: new Microsoft.Maps.Location(37.794973,-122.393542),
zoom: 17,
labelOverlay: Microsoft.Maps.LabelOverlay.hidden
}
//Load the map
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions );
Here is the MSDN reference:
http://msdn.microsoft.com/en-us/library/gg427628.aspx
http://msdn.microsoft.com/en-us/library/gg427602.aspx
See this screenshot to see what I'm going for. Just like it is on maps.google.com, I'd like to right click on the marker and have it bring up an option for directions. I'm trying to look through the Google Maps API3 Developer's Guide, but I'm having trouble finding a solution. Here's my current code:
function initialize() {
var myLatlng = new google.maps.LatLng(38.578809, -121.493758);
var mapOptions = {
zoom: 14,
center: myLatlng,
streetViewControl: false,
scaleControl: true,
scrollwheel: false,
mapTypeControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
}
}
var map = new google.maps.Map(document.getElementById('googlemaps'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Project Church Downtown'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
What you are asking for appears simple but actually requires quite a bit of work.
I suggest looking at this reverse geocoding guide:
https://developers.google.com/maps/documentation/geocoding/#ReverseGeocoding
as well as this directions service guide:
https://developers.google.com/maps/documentation/javascript/directions
Directions service example:
https://developers.google.com/maps/documentation/javascript/examples/directions-simple
You will need to determine the start point, either from a mobile user's current GPS or a desktop users approximate location using HTML5 geolocation. And then process the end point clicked and route the two locations.
For starters you can get the coordinates for a rightclick event.
google.maps.event.addListener(map, "rightclick", function(event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
});
Is there any way to remove the circular panning navigation control but keep the zoom control in the Google Maps V3 API? I've tried forcing it offscreen with jQuery but every time the map is updated it comes back. Any ideas? Thanks!
You may also have a look in here, you can remove/add specific controls when you declare your map:
var latlng = new google.maps.LatLng(40.44062, -79.99588);
var options = {
zoom: 14,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Taking Control of the Google Maps API V3 Controls
You can use google.maps.NavigationControlStyle.SMALL to display a small plus/minus zoom control, otherwise you'll have to create your own zoom control and add it to the map.
http://code.google.com/apis/maps/documentation/javascript/controls.html
In V3, when you define your options - you have the option of disabling/enabling any UI features:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
//panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}