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
Related
I'm starting to develop an application that will have Google Maps.
I studied the help of Google Maps Api and I'm with doubt to add an overlay. The below is the correct way to do it:
Create maps
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
Add overload:
function add() {
var myLatlng = new google.maps.LatLng(-34.397, 150.646);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); /* It is correct?
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
marker.setMap(map);
};
Is there a way to get the mapsOptions, or rather not recaregar the map completely, or is this how it works?
remove the var-keyword when creating the map in initialize() .
When you do so, the map-variable is global accessible and you may call marker.setMap(map); inside add() without creating a new Maps-instance.
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}
});
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
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.