I would like to have a blank google map, without any basemap showing roadmap, terrain, hybrid or satellite data: just a white background to display my layer only.
Is that possible?
hexblot was correct with his suggestion to look at custom map types documentation. Here is what I did to have a blank map (white background) without any control.
function initialize(){
var styles = [{
stylers:[{ color: "#ffffff" }]
}
];
var styledMap = new google.maps.StyledMapType(styles);
var centerlatlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 3,
center: centerlatlng,
disableDefaultUI : true,
mapTypeControlOptions: {
mapTypeIds: ['map_style']
},
mapTypeId: 'map_style'
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
map.mapTypes.set('map_style', styledMap);
}
you're most probably interested in custom map types, you can reference Google Maps documentation for that here :
https://developers.google.com/maps/documentation/javascript/maptypes?hl=en#CustomMapTypes
Related
I am trying to mark some spots on a google map. I am using google maps places javascript api.
function initialize() {
var mapProp = {
center: new google.maps.LatLng(userlatitude, userlongitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map = new google.maps.Map(document.getElementById("midsection"), mapProp);
var mapPosition = new google.maps.LatLng(-20.997110, 123.375544);
markers.push(new google.maps.Marker({
position: {
lat: -20.014006,
lng: 123.421746
},
map: map,
title: 'Mow my lawn',
animation: google.maps.Animation.DROP
}));
(if the Long/Lat are invalid, its because I randomly changed it for the purpose of this post)
I can see the marker drop down and bounce once. But then it disappears. I have tried setting the Zindex, changing the display and position type of the div canvas. But nothing I do seems to make the marker stay.
The problem ended up being hidden in my CSS.
it was just a Canvas: display:none call
I am using Google maps API for my project.
var elevator;
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(55.50, -129.35),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var address="CA,state"
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+address+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
});
});
Google Maps CA in maps.google.com
In My App through API
California Boundary is not shown in map which drawn through API. Any help will be useful.
Google Maps API leaves to the user the job of implementing anything outside the basic features.
Google Maps shares a lot of features in common with Google Maps API but it has always had an edge over his little brother.
For this particular case, you could use a google.maps.KmlLayer to display your desired boundaries. For this, you need a publicly available kml file. This means, if you find said kml, storing it in your public dropbox folder would suffice. Also, there's a size limit on kml files, so don't get carried away.
I guess you need more than just California, but here's an example just for CA
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
disableDefaultUI: true,
zoomControl: true,
center: new google.maps.LatLng(38, -111),
mapTypeId: "roadmap"
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://dl.dropboxusercontent.com/u/3133731/kml/california.kml',
map:map,
preserveViewport: true,
suppressInfoWindows: true
});
Here: I made you a jsFiddle.
This is my javaScript code.
(function() {
window.onload = function() {
// Creating a reference to the mapDiv
var mapDiv = document.getElementById('map');
// Creating a latLng for the center of the map
var latlng = new google.maps.LatLng(37.09, -95.71);
// Creating an object literal containing the properties
// we want to pass to the map
var options = {
center: latlng,
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(mapDiv, options);
}
})();
When i add the disableDefaultUI: true to the options variable and test it on my Browsers(Opera,Firefox,Chrome Canary) it does not disable the UI. I am currently using Eclipse Indigo on My Mac OSX version 10.6.8. Is there a problem with my browsers cache or something? My code seems to be okay. I can't understand why it does not render on the browsers.
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
I can't remember exactly why the disableDefaultUI property didn't do anything on maps I've worked on recently. The way I got round it was to control each ui element directly.
var options = {
// Required map properties here
// Set how Zoom is to look
zoomControl : true,
zoomControlOptions : {
style : google.maps.ZoomControlStyle.SMALL,
position : google.maps.ControlPosition.TOP_LEFT
}
}
While the example above modifies the Zoom controls to the compact plus and minus rather than slider, you can turn if off using:
zoomControl : false
All the other UI elements have these type of controls also. You can see them all here
I am using google maps api v3. In my map the current position name is showing larger than other names, but it is not easy to me to find it in the fist time, so I thought to style my current position, like, bold the text, change the color of the text, I searched but no answer.
This is my code:
function initialize() {
var latlng = new google.maps.LatLng(geoip_latitude(),geoip_longitude());
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Can I add a option to var myOptions = { to style my current location. In this case my current location is `colombo.
I think the best you can do within the confines of the API is to place something (such as a Marker object) on your current location. I don't believe the API permits you to style some labels and not others (and if it does, then it is probably not a way that is documented and straightforward).
May I know how to add numbering label to google map marker using google map api? Just add label, not trying to change the icon. Thank you.
If you don't want to use custom icons for each marker then I suggest looking into creating a label class with the OverlayView and then binding the position to the marker.
Or you could look at using something like: http://github.com/nmccready/google-maps-utility-library-v3-infobox
I think a better solution is to use a infoWindow. Something like this:
$(document).ready(function () {
var golfoMexico = new google.maps.LatLng(20.61536,-87.078975);
var settings = {
zoom: 18,
center: golfoMexico,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var pos1= new google.maps.LatLng(20.61536,-87.078975);
var infowindow = new google.maps.InfoWindow({
content: "Casa Stavola F8 II"
});
var companyMarker = new google.maps.Marker({ position: pos1, map: map,title:"Casa Stavola F8 II", visible:true});
infowindow.open(map,companyMarker);
});
Check out the example at http://www.geocodezip.com/basic8j.asp?filename=example_number.xml (for V2 of the API). There was also a question here about something similar - How can I create numbered map markers in Google Maps V3?.