Does anyone know how i would move the pan/zoom control position of google maps whilst inside streetview?
I can position the controls to the right side on normal map view, but when streetview is activated the pan control and the zoom buttons switch over to the left hand side?
How would i go about telling these to position to the right whilst streetview is active?
Thanks!
I've tested the following code and it worked for me
map.get('streetView').setOptions({
panControlOptions: map.get('panControlOptions'),
zoomControlOptions: map.get('zoomControlOptions')});
the streetView has it's own control-options which will not be inherited from the map.
You must explicitly set these control-options for the streetView:
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.345573,-71.098326),
zoom: 14,
panControlOptions:{
position:google.maps.ControlPosition.RIGHT_TOP
},
zoomControlOptions:{
position:google.maps.ControlPosition.RIGHT_TOP
}
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
//apply the map-settings for panControl and zoomControl to the streetView:
map.get('streetView')
.setOptions({panControlOptions: map.get('panControlOptions'),
zoomControlOptions: map.get('zoomControlOptions')});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 400px; height: 500px"></div>
Related
There are many calls for help with the maps API where a blank white div is undesirable. In my case it's desirable.
I know how to make a map appear.
map.setCenter(new google.maps.LatLng(latitude, longitude));
I know how to make directions appear.
directionsService.route(request, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
Occasionally I just want the map element to "go white." Later I want to put a map or directions back in there.
I've tried this:
$('#map').empty();
It works, but after that I can never make a map appear again. What's the correct way?
I suppose I could make and delete map instances but this bug report says each destroyed map instance leaks 2MB memory, and Google officially discourages the practice (here and here). I'd really rather not overlay a white rectangle, or make the map display:none. Is there no better way?
(My application is a map next to an address entry form. When sufficient detail has been entered, a map automatically appears. If the field contents are deleted, the map goes blank again.)
I would just set the map div's innerHTML to "".
document.getElementById('map_canvas').innerHTML = "";
(but $("#map_canvas").empty(); works as well)
Once you do that you need to recreate and reinitialize the map object.
map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
proof of concept fiddle
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var displayMap = true;
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
if (displayMap) {
document.getElementById('map_canvas').innerHTML = "";
} else {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
displayMap = !displayMap;
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" id="btn" value="toggle map" />
<div id="map_canvas"></div>
Set the map visibility to hidden.
Better yet, use a class.
CSS:
.map-hide {
visibility: hidden;
}
jQuery:
$('#map').addClass('map-hide');
$('#map').removeClass('map-hide');
JavaScript (IE10+):
document.getElementById("map").classList.add('map-hide');
document.getElementById("map").classList.remove('map-hide');
Add the class to blank the map. Remove it when rendering the map.
Adding and removing a class is better in case multiple parts of the code turn visibility on or off for different reasons.
Setting a map's visibility to hidden is better than setting its display to none, which can permanently ruin map rendering. I saw one clue to this in the docs about Map.fitBounds() breaking.
I'm initializing a map with no controls because I've implemented some custom zoom controls in my page.
However, I'd like to add the standard zoom controls back to the map under specific circumstances, namely when I detect the window has been resized to a certain width. Conversely I would like to destroy them again at larger widths.
Is it possible to add the zoom control on the fly and if so, how?
In the API version 3 use setOptions to set zoomControl to true/false (similar question Dynamically add/remove controls [Google Maps]).
Demo:
// create map
var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
center: myLatlng,
zoom: 5,
zoomControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// functions for removing zoomControl
function toggleZoomControl(b) {
map.setOptions({
zoomControl: b
});
}
#map_canvas {
width: 50%;
height: 200px;
float: left;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
<input type="checkbox" onclick="toggleZoomControl(this.checked)" />zoomControl
I'm having a heck of a time trying to get a basic Google Map to show up. I've been on Stack Overflow for hours and haven't had any success so far. The closest I've gotten is the map loads 1/4 of a square, the top left quarter. But then if you try to drag, zoom, etc it just turns grey like the rest of the map. On a few occasions, with the same code, the map will load fully but only after a long time (not sure exactly how long, but > 5 minutes).
In my template I have
<div id="map" style="width: 500px; height: 400px;"></div>
And then in my backbone view
$.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback')
window.gMapsCallback = function(){
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
Any ideas what might be happening? I am also open to any suggestions on a superior way to load a google map into a backbone view.
Ok, turns out there were a number of issues, including embedding a map in a Bootstrap tab, not including a callback, defining the div height and width, setting a small delay to load the map, and setting css attributes for the map. Oi. My final solution turned out to be:
In the template
<script src='http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback'></script>
<div id="map" style="width: 500px; height: 400px;"></div>
In the stylesheet
#map img {
max-width: none;
}
#map label {
width: auto; display:inline;
}
In the Backbone View
setTimeout(function(){
var myLatlng = new google.maps.LatLng(53.1, -2.44);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// Create marker
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(53.1, -2.44),
title: 'The armpit of Cheshire'
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 10000, // metres
fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');
google.maps.event.trigger(map, "resize");
map.setZoom( map.getZoom() );
}, 100);
Painful. Notice that when I call the gmaps script I had to include the callback even though I never use it. Without it, it didn't work fully. No clue why.
I want to draw a custom rectangle which is resizable and draggable with a close button and
which is formed with the bounds returned by the query in the database.
Thanks
This is a rectangle resizable and dragabble. A little search and some trying would give you what you need.
function initialize() {
var myOptions = {
center: new google.maps.LatLng(44.5452, -78.5389),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(44.490, -78.649),
new google.maps.LatLng(44.599, -78.443)
);
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true
});
rectangle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Hope this helps!
I think the only thing you need to add is "draggable: true" in rectangle options.
So, it should be something like this;
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
This will make the rectangle resizable and draggable. Also in the body of the page create one button.
<body >
<button onclick="remove()">Close</button>
</body>
Inside remove function you can write your code to connect to database. You will have to declare the bounds outside initialize() to access it. This link might help you to understand how to connect google maps and MySQL. https://developers.google.com/maps/articles/phpsqlajax_v3
I read all the similar questions but mine is slightly different. The first time a JQuery Mobile dialog is displayed, the map loads fine inside the usual map_canvas div, but if the dialog is reloaded (i.e. go back and click on the button to open the dialog again), it is displayed only partially, zoomed out to a 3 or 4 and centered around the div's top-left corner.
There is no change in the div size (which is explicitly set) and for good measure a google.maps.event.trigger(map, 'resize'); is called.
I also tried to initialize the map after the dialog is shown but the result is the same.
Button code:
$("#dest-map-button").click(function() {
initializeMap(job_id,"map_canvas");
}
);
Function:
function initializeMap(job_id, map_div){
var pos = arrJobs[job_id].lat_lng.split(',');
var job_pos = new google.maps.LatLng(pos[0],pos[1]);
var driverLatLng = lat_lng.split(',');
var driver_pos = new google.maps.LatLng(driverLatLng[0],driverLatLng[1]);
var myOptions = {
zoom: 18,
center: driver_pos,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
map = new google.maps.Map(document.getElementById(map_div), myOptions);
var marker = new google.maps.Marker({
position: job_pos,
map: map,
title: "Job"
});
var marker2 = new google.maps.Marker({
position: driver_pos,
map: map,
title: "X",
});
google.maps.event.trigger(map, 'resize');
}
HTML:
<div data-role="page" id="dialog-destination-map" data-theme="e">
<div data-role="content">
<div id="map_canvas" style="height:300px; width:300px; position: relative; margin: 0px auto;">
map_canvas
</div>
</div>
</div>
Any ideas?
EDIT: this question seems describing exactly the same problem: JQuery Mobile & Google Maps Glitch
But the solution provided (caching) can't be used here as the map might need to change
After trying everything else, I finally stumbled upon the pageshow event. Calling initializeMap after all the page transitions are done rather than when clicking the button solved the problem:
$('#dialog-destination-map').live('pageshow',function(event){
initializeMap(job_id,"map_canvas");
}
);
I still wonder how come it was working at the first load then...
I Agree with #peter .. You do not need to create map on each pageshow event.. Instead, try this:
$(document).on("pagebeforechange", function()
{
if(mapObj){
center = mapObj.getCenter();
}
});
$("#mapPage").bind("pageshow", function()
{
google.maps.event.trigger(mapObj, "resize");
if(center)mapObj.setCenter(center);
});
var driverLatLng is being initialized with lat_lng.split(','); which hasn't been declared before.
You don't need to create a new map each time you visit the page. Create the map beforehand, e.g. on pageinit. On pageshow: google.maps.event.trigger(mapObj, "resize");