I want to show 3 map type controls: ['roadmap', 'satellite', 'hybrid'] on GoogleMap in my website, but it always show only 'roadmap', and 'satellite' with a checkbox 'Label' under 'satellite' as dropdown menu.
Here is the code:
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid'],
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
}
});
}
How can I show 3 of them(map type controls) in a row on google map.
Create a custom control for the hybrid-mapType
Related
I need to include pan effect and zoom effect without the help of control tools. The implementation in mobile and tablet so i dont need that tool bars instead of that touch zoom and drag panning effects are needed. Is it possible to implement ? Looking for suggestions
var myLatlng = new google.maps.LatLng(Lat, Long);
var myOptions = {
zoom: 10,
maxZoom : 24,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false
}
Here is the code:
Just add disableDefaultUI: true
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true, // <- this
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
Example
I have a page with a Google Map generated. I want to be able to use the address bar to change the zoom and center point. E. g.:
www.example.com/mymap?zoom=10¢er=10,15
www.example.com/mymap?zoom=10&lat=10&lng=15
I remember that there was a similar combination that worked, but now I can't get any results with it.
Here is my function:
function initialize() {
// create the map
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(10,15),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(8, 12),
new google.maps.LatLng(12, 18));
var options = {
bounds: defaultBounds
};
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var infowindow = new google.maps.InfoWindow(
{ size: new google.maps.Size(150,50)});
Are you looking for something like this (translated to the Google Maps API v3 from Mike Williams' v2 tutorial):
http://www.geocodezip.com/v3_MW_example_linktothis.html?lat=42.359783&lng=-71.092800&zoom=18&type=h
I have two Google Maps setups on a site that I'm developing, and I want to apply custom markers to both of them. This is what I have written -
var coordinates_1 = new google.maps.LatLng(x, x);
var coordinates_2 = new google.maps.LatLng(x, x);
var map_1_options = {
zoom: 14,
center: coordinates_1,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map_2_options = {
zoom: 14,
center: coordinates_2,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var marker_1 = new google.maps.Marker({
position: coordinates_1,
map: map_1,
icon: '/images/marker.png'
});
var marker_2 = new google.maps.Marker({
position: coordinates_2,
map: map_2,
icon: '/images/marker.png'
});
var map_1 = new google.maps.Map(document.getElementById('location_1'), map_1_options);
var map_2 = new google.maps.Map(document.getElementById('location_2'), map_2_options);
I guess the script can be optimised but that's not the important issue here. What happens is I don't get any error messages (or missing images), and I get both maps displayed at their right location but no markers are showing. The images are 32x32px if that matters.
Any help would be appreciated.
You must first create map_1 and map_2 before you use them as map-property for the markers.
On load, I'm setting up the map:
map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(40, -100),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
I have a variable called current_location that I need to populate with what is essentially 40, -100 ... or the default LatLng that I've declared above.
What is the method to get this? google.maps.getLatLng or something similar??
var current_location = map.getCenter();
Or you could say:
var current_location = new google.maps.LatLng(40, -100);
map = new google.maps.Map(document.getElementById("map_canvas"), {
center: current_location,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
How can I hide map types bar on Google Maps?
(hide Ter, and Earth on menu bar)
I create code from http://maps.google.com
I suggest you to look at this:
http://code.google.com/apis/maps/documentation/javascript/controls.html
Short:
mapTypeControl: false
this will hide map types bar.
or here is init function:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Vahagn's answer will completely hide the bar. But it's not clear from your question if this is what you want to do, or if you only want to hide just the options for Terrain and Earth. If the latter, you could try:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE
]
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Basically you need to set the property mapTypeControl to false like this:
mapTypeControl: true,
here is a live example of a page that offers customization with respect to look and feel.