How can I put a Street View button on a fairly typical Google Map so that it is inline with the standard Map/Satellite/Hybrid buttons in the top right corner? I've seen one example of this that I can't find any longer. So, I know it's possible.
Yes indeed, one can specify control positions in the map's options--look for control positioning in the online docs.
How to specify Google maps controls positions
For positioning the street view control in the top right corner add
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
to your map's options.
Check this demo (that uses the Google maps API version 3):
var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
center: myLatlng,
zoom: 5,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
#map_canvas {
width: 300px;
height: 200px;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
Here's an another example for control positioning in the official documentation.
Control placement identifiers
These are all possible positions for Google maps controls (from TOP_LEFT to BOTTOM_RIGHT):
+----------------+
+ TL TC TR +
+ LT RT +
+ +
+ LC RC +
+ +
+ LB RB +
+ BL BC BR +
+----------------+
For a full list of positions and how they work see https://developers.google.com/maps/documentation/javascript/3.exp/reference#ControlPosition
Changing a control position programmatically
You can also change the position dynamically after creating the map using the SetOptions method of the google.maps.Map class. In this example I create a map as above with streetViewControl in position TOP_RIGHT and then change it to LEFT_BOTTOM:
var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
center: myLatlng,
zoom: 5,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// now change position to LEFT_BOTTOM changing streetViewControlOptions
// with setOptions
map.setOptions({
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
#map_canvas {
width: 300px;
height: 200px;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
Related
I wanted to ask if it would be possible/realistic to have a google map and then use a mouse over to show google street view in a seperate box?
eg: I have a google map of a Long/Lat created using standard syntax:
var mymap = new google.maps.Map(document.getElementById('divContainer'), {
zoom: 17,
center: new google.maps.LatLng(-37, 144),
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: true,
streetViewControl: false
});
Then with the map a use could run the mouse over the map and see the street view if a box/div that either followed the mouse around of sat to the side etc.
This is a interesting use case. I think possible to do it.
You can do it with StreetViewPanorama class - as a first argument you pass an HTML element that will be the container for the street view and the second one is the options(StreetViewPanoramaOptions object)
Then we need to capture the mousemove event when the mouse is over the map, get the LatLngBounds of the cursor and update StreetViewPanorama position with setPosition() method. If you want to somehow rotate the point-of-view while updating the position you can use setPov() method(see StreetViewPanorama class).
You can have another code that will take care to move the small street view window(pano), but this I leave to you :)
Let's have a look on the following example:
function initialize() {
var fenway = {
lat: 42.345573,
lng: -71.098326
};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
google.maps.event.addListener(map, 'mousemove', function(e) {
panorama.setPosition(e.latLng);
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 100%;
width: 45%;
}
.as-console-wrapper{
display:none !important;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize">
</script>
<div id="map"></div>
<div id="pano"></div>
Let me know if this works for you. This is just an idea to help you implement your specific use case and probably not the exactly right solution, but I hope you have a starting point now :)
First of all this is not a duplicate question . Other questions on Stack overflow and other sites don't have the complete thing I am asking for. I do not want a button below the iframe.
I want a button say button like a small red circle over the map in the down right corner of the iframe
Red Circle Button Sample - I want to keep a button like this in bottom right corner of the div/iframe
I have created a fiddle to make you understand the issue.The link is at the last part of the question
Code
HTML
<div id="map"></div>
<script>
var map;
var marker;
var location1 = {
lat: 34.0522,
lng: -118.2437
};
function initMap() {
var myOptions = {
zoom: 13,
center: location1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
marker = new google.maps.Marker({
position: location1,
map: map,
title: 'Click to zoom'
});
}
function changeCenter(center) {
map.setCenter(center);
marker.setPosition(center);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<button type="button" onclick="javascript:changeCenter(location1);">Location 1</button>
CSS
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
#map {
height: 90%;
width: 100%;
}
Also another thing that is not happening - I have kept the default zoom level at 13 , now when I am zooming in 3 times or say zooming out 3 times then when I click on the button I am getting zoom location of my default position as 10 or 16, not that original 13. Please help me with this thing also
#saravana has only solved a little part of my question.
Here is my updated fiddle
updated FIDDLE with zoom issue solved
The major thing is still there - I want to create a custom button over the map. Please help me with that
Please replace your changecenter function to below code
function changeCenter(center) {
map.setCenter(center);
map.setZoom(13);
marker.setPosition(center);
}
You can set zoom level by using map.setZoom() function. Cheers!!!
Update:
Please replace your html code to below code in fiddle
we have to add custom button or image manually in the google map. I hope this will help
<div id="map"></div>
<div><img src="http://www.clker.com/cliparts/X/9/P/m/2/g/transparent-red-circle-md.png" width="25px" style="position: fixed;z-index: 9999; right:10px; top:225px; float: right;" onclick="javascript:changeCenter(location1);"></div>
<script>
var map;
var marker;
var location1 = {
lat: 34.0522,
lng: -118.2437
};
function initMap() {
var myOptions = {
zoom: 13,
center: location1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
marker = new google.maps.Marker({
position: location1,
map: map,
title: 'Click to zoom'
});
}
function changeCenter(center) {
map.setCenter(center);
map.setZoom(13);
marker.setPosition(center);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<button type="button" onclick="javascript:changeCenter(location1);">Location 1</button>
I would like to know if there's a way to prevent a Google map marker from being clickable. I thought this is something that could be set up in the map options using the following code.
map_options: {
clickable: false,
},
I found this in a really old blog post:
http://www.technoreply.com/how-to-make-google-map-marker-non-clickable/
However I'm not sure if this option has been deprecated or not.
To prevent a marker from being clickable, set its clickable property to false (won't make much difference if you don't have something to handle the click event, except prevent the cursor from changing).
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 marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
clickable: false
});
}
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
I have to show large zoom slider option which was available in previous version of google map api (v3.21). I have already specified the version in the src of script but it won't work. Below is my code:
html, body {
height: 100%;
margin: 0;
}
<div id="googleMap" style="height: 100%;width: 1349px;"></div>
<script type="text/javascript">
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('googleMap'), {
center: {lat: -34.397, lng: 150.644},
zoom: 2,
streetViewControl: false,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize&v=3.21&signed_in=true"></script>
The "old" pan and zoom control has been removed. If you still want that functionality, you need to create your own custom control to implement it.
Related questions (include examples of a custom pan/zoom control):
Google maps custom control always appears below the default controls (contains a custom pan control)
googlemaps api3, demogallery example “Custom Small Navigation Control” (contains a custom pan/zoom control)
The Zoom control is now just a "+" and "-" button - there is no longer
a slider. The default position of the Zoom control has changed from
TOP_LEFT to RIGHT_BOTTOM
to know more check
Zoom control
block in this link What's New in the v3.22 Map Controls
I've developed a zoom slider for IE11. It could also work for Chrome and Mozilla, updating the css properties.
https://github.com/bubango/zoom_slider_IE11
Not sure if you're still looking for a zoom slider, but I made one recently and maybe you or anyone else can use it.
Create a zoom constructor...
function ZoomControl(controlDiv, map, min, max, currentZoom) {
var controlUI = document.createElement('input');
controlUI.type = 'range';
controlUI.value = currentZoom;
controlUI.min = min;
controlUI.max = max;
controlUI.style.position = "fixed";
controlUI.style.top = "95%";
controlUI.style.left = "50%";
controlUI.style.transform = "translate(-50%, -50%)";
controlUI.style.width = "400px";
controlDiv.appendChild(controlUI);
controlUI.addEventListener('click', function() {
map.setZoom(parseFloat(controlUI.value));
});
google.maps.event.addListener(map, 'zoom_changed', function(){
controlUI.value = map.getZoom();
});
}
and use it when you create a map.
function initMap() {
//initial map options
var options = {
center: startLatLng,
zoom: 3,
minZoom: 3,
maxZoom: 15,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
}
map = new google.maps.Map(id('map'), options);
var centerControlDiv = document.createElement('div');
var centerControl = new ZoomControl(centerControlDiv, map, options.minZoom, options.maxZoom, options.zoom);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
}
Your result will have a slider that looks like the attached image.
In my web application, I am using Google Maps JavaScript API v3. In a web page I am creating a google map using following code:
var centerLatLng = new google.maps.LatLng(obj.centerlat, obj.centerlong);
var myOptions = {
center: centerLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: true
};
var map = new google.maps.Map(document.getElementById("map_convas"), myOptions);
var markerArray = obj.locations;
var triangleCoords = new Array();
for(var x=0;x<markerArray.length;x++){
triangleCoords.push(new google.maps.LatLng(markerArray[x].latitude, markerArray[x].longitude));
}
var polypath = new google.maps.Polyline({
path: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polypath.setMap(map);
This code shows map correctly. Then I have a button under that map. When I click on that button another google javascript map should be displayed in a div called map_convas_1, which is in the same page. Code for this I wrote is following:
$('#secondmapbtn').unbind("click");
$('#secondmapbtn').bind('click', function(){
var centerLatLng2 = new google.maps.LatLng(secondcenterlat, secondcenterlong);
var myOptions2 = {
center: centerLatLng2,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: true
};
$('#map_convas_2').show();
var map2 = new google.maps.Map(document.getElementById("map_convas_2"), myOptions2);
var secondMarkerArray = secondobj.locations;
// putting markers in map
for(var i=0;i<markerArray.length;i++){
var myLatlng = new google.maps.LatLng(secondMarkerArray[i].latitude, secondMarkerArray[i].longitude);
var marker = new google.maps.Marker({
clickable: true,
position: myLatlng,
map: map2,
zIndex: i
});
marker.setIcon('marker_icon.png');
}
});
HTML for both divs are
<div id='map_convas'></div>
<div id='map_convas_2'></div>
and css is:
#map_convas{
position: absolute;
border-radius: 8px;
width:657px;
height:592px;
top: 50px;
left: 100px;
}
#map_convas_2{
position: absolute;
border-radius: 8px;
width:657px;
height:592px;
top: 700px;
left: 100px;
display:none;
}
After clicking button, second map is shown but its not showing correctly. I am attaching screenshots that how first and second maps look like. If I comment the first map instance code then second map works fine. It means that problem comes when I create second map instance. Does anybody know that why second map is not OK and how to solve this problem?
After this line
var map2 = new google.maps.Map(document.getElementById("map_convas_2"), myOptions2);
add
google.maps.event.trigger(map2, 'resize');
You may need to move that new line down the code a little, or set a Timeout. The issue is that the .show() is taking some time to reset the map size in the DOM, and the API is being told the map still has zero size when it sets it up. Consequently you only get the minimum number of tiles to show a zero-size map in the top-left corner.
<style>
.map img { background-color: transparent; }
#map-canvas { width:400px; height:450px; }
</style>