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>
Related
What I want to achieve:
I want to display a search box in google map. When a user search a location, result is displayed in map box. On the map, when a user RightClick, I want to store the marker in database.
Resource I tried to implement
storing marker to database:
https://www.sanwebe.com/2013/10/google-map-v3-editing-saving-marker-in-database
displaying search box in map
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
I tried to implement these two as one: here is my minimal code
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
var map;
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
With this code when I right click on the map, nothing happens i.e. neither the marker shows nor any error.
The map variable needs to be accessible from your create_marker function, therefore you declared it outside of your other functions. But also inside the map_initialize function. Remove the var declaration from there and it will work.
I have edited your original question to include a MCVE which means that I removed 90% of your code to keep only what you were after: adding a marker on right click.
Please take that as a suggestion for how to write your next questions.
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
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>
it's possible to get template text from 'childDiv' id when I initialize a Google Map? My code looks like this:
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}
google.maps.event.addDomListener(window, "load", initialize());
#map {
height: 450px;
width: 450px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
<div id="childDiv">testes</div>
</div>
When I debug this code after initialize map function, that my childDiv gone.
Jsfiddle: https://jsfiddle.net/ce4bpzhh/
That is the default way the google maps works. It will overwrite the contents of the div you specify for it.
There is an option, however, to tell it to keep the existing contents.
The option is noClear and you must set it to true.
From the Google maps documentation about mapOptions
noClear - Type: boolean
If true, do not clear the contents of the Map div.
Working example
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
noClear:true // ADD THIS OPTION
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}
google.maps.event.addDomListener(window, "load", initialize());
#map {
height: 450px;
width: 450px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
<div id="childDiv">testes</div>
</div>
I want to alert latitude and longitude value based on marker position.
I am unable to do it.
I have recently started learning about google maps api. Please help me along.
In below code my marker is correctly moving between different location but not showing
their latitude and longitude values.
<html>
<head>
<base href="<%=basePath%>">
<style type="text/css">
#map_canvas {
height: 430px;
width: 980px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var marker;
function initialize() {
var latlng = new google.maps.LatLng(18.9647, 72.8258);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
if (marker == undefined){
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
else{
marker.setPosition(location);
}
map.setCenter(location);
google.maps.event.addListener(marker, "click", function (event) {
alert(this.position);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
You don't want to create a separate event for displaying the event - make it part of the code that creates (or moves) the marker, as follows:
function placeMarker(location) {
if (marker == undefined){
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
else{
marker.setPosition(location);
}
map.setCenter(location);
alert(marker.position);
}
Rather than using an alert, you can get a much more beautiful effect by following the links given in this answer for a really cool tooltip effect. Definitely worth taking a look - the answer links both a tutorial and a demonstration.