I'm having problems with the Google Maps API V3. The map loads correctly but the zoomControl is partially hidden. The panControl is shown and works perfectly, although in the screenshot it's not turned on.
I've tried setting: zoomControl: true and disableDefaultUI: true as well to no avail.
My javascript is as follows:
function initializeMap(manuId, lat, lng, centerLat, centerLng,zoom){
var latlng = new google.maps.LatLng(centerLat, centerLng);
var myOptions = {
zoom: zoom,
center: latlng,
disableDefaultUI: true,
zoomControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
draggable : true
};
var mapDiv = document.getElementById("map_canvas");
if(!mapDiv){
var mapDiv = document.getElementById("map_canvas_"+manuId);
}
var map = new google.maps.Map(mapDiv,
myOptions);
var myLatlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
getPolygon(manuId, map);
}
var map;
function showManuMap(manuId, container, manuLat, manuLon, locLat, locLon, zoom){
showManuMap(manuId, container, manuLat, manuLon, locLat, locLon, zoom, null);
}
function showManuMap(manuId, container, manuLat, manuLon, locLat, locLon, zoom, marker){
map = new google.maps.Map(jQuery("#" + container)[0], {
zoom: zoom,
center: new google.maps.LatLng(manuLat, manuLon),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true,
scrollwheel: false,
draggable : true
});
if (locLat && locLon) {
new google.maps.Marker({
position: new google.maps.LatLng(locLat, locLon),
map: map,
icon : "https://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"
});
}
if (marker != null) {
new google.maps.Marker({
position: new google.maps.LatLng(manuLat, manuLon),
map: map,
icon: marker
});
} else {
new google.maps.Marker({
position: new google.maps.LatLng(manuLat, manuLon),
map: map
});
}
if (manuId) {
getPolygon(manuId, map);
}
}
Without more information it's a little hard to be sure, but I had this issue when I included Twitter bootstrap in my page. Specifically it was setting all img tags to have a max-width of 100%. I fixed the issue by doing " #my-map-canvas img { max-width: none }" where #my-map-canvas was the id of the canvas for my map.
Taken from Google's API page: https://developers.google.com/maps/documentation/javascript/controls#Adding_Controls_to_the_Map
Adding Controls to the Map
You may wish to tailor your interface by removing, adding, or modifying UI behavior or controls and ensure that future updates don't alter this behavior. If you wish to only add or modify existing behavior, you need to ensure that the control is explicitly added to your application.
Some controls appear on the map by default while others will not appear unless you specifically request them. Adding or removing controls from the map is specified in the following MapOptions object's fields, which you set to true to make them visible or set to false to hide them:
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}
Related
I have the following code in javascript which is my default, I have a button for the user to move the map more easily (without having to use both fingers/or CTRL)
I know there's an attribute called gestureHandling: "greedy" but I can't figure out how to set it programatically with javascript without presetting the attribute or rebuild/reconstruct the map, how do I do that ?
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng,
disableDefaultUI: true,
mapTypeControl: false
});
Store your settings in an object and apply them when you need to using the setOptions() function on the map object;
// The Settings Object
let mapSettings = {
zoom: 15,
center: myLatLng,
disableDefaultUI: true,
mapTypeControl: false
}
// Your initial Map load
window.onload(function(){
map = new google.maps.Map(document.getElementById('map'), mapSettings);
});
// Used when you want to apply different gesture handling
function greedyMap(){
mapSettings.gestureHandling = 'greedy';
map.setOptions(mapSettings);
}
<button onclick="greedyMap()">Example</button>
Per the documentation, gestureHandling is a MapOptions property.
MapOptions that don't have a dedicated setter/getter can be set using setOptions
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
map.setOptions({
gestureHandling: 'greedy'
});
});
code snippet:
/**
* This sample sets the gesture handling mode to 'cooperative',
* which means that on a mobile device, the user must swipe with one
* finger to scroll the page and two fingers to pan the map.
*/
function initMap() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng,
gestureHandling: 'cooperative'
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
console.log("before:" + map.gestureHandling);
map.setOptions({
gestureHandling: 'greedy'
});
console.log("after:" + map.gestureHandling);
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 80%;
}
<input type="button" value="click" id="btn" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
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);
}