I am unable to view the rotation icon when I create a google map setting the
type id to satelite as shown below.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading: 0
});
Can anyone please help me with this
Per Google maps docs:
rotateControl enables/disables the appearance of a Rotate control for
controlling the orientation of 45° imagery. By default, the control's
presence is determined by the presence or absence of 45° imagery for
the given map type at the current zoom and location. You may alter the
control's behavior by setting the map's rotateControlOptions to
specify the RotateControlOptions to use. You cannot make the control
appear if no 45° imagery is currently available.
Also, rotateControl appears only if zoom is high enough. For example, this map will not show rotateControl:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: -37.8136, lng: 144.9631},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
But if you zoom it a bit more, it will show rotateControl:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: {lat: -37.8136, lng: 144.9631},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
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
this is code i use to initialize the map, nothing special.
function initializeMap() {
var mapArray = document.getElementById("latLong").value.split("_");
var latLng = new google.maps.LatLng(mapArray[0], mapArray[1]);
var mapOptions = {
center: latLng,
zoom: 10,
tilt: 30,
zoomControl: true,
panControl: false,
streetViewControl: true
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({ position: latLng, map: map, title: mapArray[2] });
}
latitude is -39.3455 and longitude is -8.0554. however when the map displays the marker is in the middle of the ocean, where point 0,0 is. Why is this happening? I tried a few browsers, nothing different. I tried to hardcode the values from a google example showing canada and I did see canada, however it does not want to work with my values.
Usually 0,0 will be displayed when the coordinates are not valid. Try to switch the order, maybe you made a mistake there.
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
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.
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).