Clear Only Rectangle Drawing(Not Markers) - google-maps

Can you please take a look at this Demo and let me know how I can clear ONLY the Rectangle (Not Markers) after zoom in finshed.
I already tried adding the map.setMap(null); into rectanglecomplete but it is not working besides I think this might remove all drawing even the markers from the map which I do not want to do
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
map.fitBounds(r.getBounds());
map.setMap(null);
});
Update
I also tried this:
var drawings = [];
function deleteRect() {
for (var i=0; i < drawings.length; i++)
{
drawings[i].overlay.setMap(null);
}
drawings = [];
}
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
drawings.push(r);
map.fitBounds(r.getBounds());
deleteRect()
});
but still no success and I am getting the
Uncaught TypeError: Cannot read property 'setMap' of undefined
in the console!
code snippet:
var map;
var drawingManager
$(document).ready(function () {
var latlng = new google.maps.LatLng(49.241943, -122.889318);
var myOptions = {
zoom: 12,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE]
}
});
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
map.fitBounds(r.getBounds());
});
drawingManager.setMap(map);
});
body {
padding-top:25px;
}
#map_canvas {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
<div class="container">
<div class="well">
<div id="map_canvas"></div>
</div>
</div>

You can draw a transparent rectangle this way
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: {
fillColor: '#cccccc',
fillOpacity: 0,
strokeWeight: 5,
}
});
and for remove the rectangle use
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
map.fitBounds(r.getBounds());
r.setMap(null);
});
like this sample

Related

How I can left align the google maps

How to left align the google maps, I mean the marker positions. Here is my JS
function showGoogleMaps() {
var latLng = new google.maps.LatLng(position[0], position[1]);
var mapOptions = {
zoom: 16,
zoomControl:false,
mapTypeControl:false,
streetViewControl: false, // hide the yellow Street View pegman
scaleControl: true, // allow users to zoom the Google Map
mapTypeId:ROADMAP,
center: latLng,
scrollwheel: false,
styles: styles
};
map = new google.maps.Map(document.getElementById('googlemaps'),
mapOptions);
// Show the default red marker at the location
marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: false,
title: 'Hello',
animation: google.maps.Animation.DROP
});
}
Here are the screenshots
The default marker location
How I want this to be
The marker or location is centered by default. I want that either to the left or right by default.
Thanks
A simple approach:
Initially set the width of the map to e.g 30%.
The center of the map now will be in the middle of these 30%.
Once the map is loaded set the width of the map to 100%.
function initialize() {
var goo = google.maps,
map = new goo.Map(document.getElementById('googleMap'), {}),
markers = [{
pos: new goo.LatLng(26.1445169, 91.7362)
}, {
pos: new goo.LatLng(26.2571285, 92.05991)
}, {
pos: new goo.LatLng(26.3143518, 91.0497609)
}, ],
bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; ++i) {
new google.maps.Marker({
map: map,
position: markers[i].pos
});
bounds.extend(markers[i].pos);
}
map.fitBounds(bounds);
goo.event.addListenerOnce(map, 'idle', function() {
this.getDiv().style.width = '100%';
goo.event.trigger(this, 'resize');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_wrapper,
#googleMap {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#googleMap {
width: 30%;
}
<div id="map_wrapper">
<div id="googleMap"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
To align the markers on the right additionally use the panBy-method:
function initialize() {
var goo = google.maps,
map = new goo.Map(document.getElementById('googleMap'), {}),
markers = [{
pos: new goo.LatLng(26.1445169, 91.7362)
}, {
pos: new goo.LatLng(26.2571285, 92.05991)
}, {
pos: new goo.LatLng(26.3143518, 91.0497609)
}, ],
bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; ++i) {
new google.maps.Marker({
map: map,
position: markers[i].pos
});
bounds.extend(markers[i].pos);
}
map.fitBounds(bounds);
goo.event.addListenerOnce(map, 'idle', function() {
this.getDiv().style.width = '100%';
this.panBy(-(this.getDiv().offsetWidth/1.5),0);
goo.event.trigger(this, 'resize');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_wrapper,
#googleMap {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#googleMap {
width: 30%;
}
<div id="map_wrapper">
<div id="googleMap"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

Google Maps API get place text like on iframe map

So I have found a couple of ways to get maps onto my page, the first version is by using an iframe like so:
<iframe src="https://www.google.com/maps/embed/v1/place?key=[APIKEY]&q=place_id:[PlaceID]"></iframe>
which gives a marker like the following image with the name of the place next to the marker:
However, this isn't perfect as it has that massive white box in the top left and according to many SO posts, you are unable to remove it.
So I thought I would try the js route so have the following code:
var map = new google.maps.Map(this, {
zoom: 15,
center: { lat: options.latitude, lng: options.longitude }
});
marker = new google.maps.Marker({
map: map,
title: options.title
});
marker.setPlace({
placeId: options.placeId,
location: { lat: options.latitude, lng: options.longitude }
});
var infowindow = new google.maps.InfoWindow(
{
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
Where all the options are filled in with proper values. However, this produces the following map which is better as it doesn't have the white box:
However, the second map doesn't have the shop text on the map even though it is using the same place id as the first one is.
Is there any way to change the js code so that it will include the place text like in the iframe version? I have searched all the documentation and examples but couldn't find any setting to do this
You can add that label to the map yourself. One option is to use an InfoBox:
function addMapLabel(text, latlng, map) {
var labelText = "<b>" + text + "</b>";
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "auto",
color: "#800000"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(10, -10),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
proof of concept fiddle
code snippet:
function addMapLabel(text, latlng, map) {
var labelText = "<b>" + text + "</b>";
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "auto",
color: "#800000"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(10, -10),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
var map;
var options = {
placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
latitude: 53.7153659,
longitude: -1.8790866,
title: "Dickies Tiles",
address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 15,
center: {
lat: options.latitude,
lng: options.longitude
}
});
marker = new google.maps.Marker({
map: map,
title: options.title
});
marker.setPlace({
placeId: options.placeId,
location: {
lat: options.latitude,
lng: options.longitude
}
});
var infowindow = new google.maps.InfoWindow({
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
addMapLabel(options.title, new google.maps.LatLng(options.latitude, options.longitude), map);
}
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>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>
Just in case anyone else needs this type of thing, I found a better plugin than the infobox one in my accepted answer (although I am leaving that as the accepted as it pointed me in the right direction). It is:
MarkerWithLabel.
It offers the same as InfoBox but also lets you click on the label, as you would the marker, to open the info window
An example of how I used it would be:
var map;
var options = {
placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
latitude: 53.7153659,
longitude: -1.8790866,
title: "Dickies Tiles",
address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 15,
center: {
lat: options.latitude,
lng: options.longitude
}
});
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(options.latitude, options.longitude),
map: map,
title: options.title,
labelContent: options.title,
labelAnchor: new google.maps.Point(-13, 15),
labelClass: "map-label",
labelStyle: {
border: 'none',
textAlign: 'center',
fontSize: '12px',
width: 'auto',
color: '#800000'
}
});
marker.setPlace({
placeId: options.placeId,
location: {
lat: options.latitude,
lng: options.longitude
}
});
var infowindow = new google.maps.InfoWindow({
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.map-label { text-shadow: -1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff; font-weight:bold; }
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>

how to place infowindow for the label on google map

I am plotting the markers on google map using infobox.js not using https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple which is working fine the code is as shown below
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
</style>
<script>
var map;
var AutoCircle = [
{
"latitude": '21.170931',
"longitude": '72.855607',
},
{
"latitude": '21.192533',
"longitude": '72.848750',
},
{
"latitude": '21.190178',
"longitude": '72.797578',
}
];
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat:21.181272, lng:72.835066},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
addLabel(AutoCircle);
}
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
function addLabel(circleArray){
for (var i=0;i<circleArray.length;i++) {
var circleData = circleArray[i]
var circleLatlng = new google.maps.LatLng(circleData.latitude, circleData.longitude);
// Add the circle for this city to the map.
var myOptions = {
content: 300+"*"+"<br>autos",
boxStyle: {
background: '#FFFFFF',
color: 'red',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
position: new google.maps.LatLng(circleArray[i].latitude,
circleArray[i].longitude),
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
zIndex: 100,
enableEventPropagation: true
};
var ib = new InfoBox(myOptions);
ib.open(map);
}
}
google.maps.event.addDomListener(window, "load", initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
how to add the infowindow which we click on the label
Please help
I couldn't make it work with a dynamically rendered div from a text string (if you use the domready event, you should be able to access the node by its id, not sure why that doesn't work), If I create the <div> as a DOM node, I can add a listener to it.
code snippet:
function addLabel(circleArray) {
for (var i = 0; i < circleArray.length; i++) {
var circleData = circleArray[i]
var circleLatlng = new google.maps.LatLng(circleData.latitude, circleData.longitude);
// Create div for infoBubble
var div = document.createElement("div");
// create text node
var text = document.createTextNode(300 + "*" + "\nautos\n" + circleData.content);
// append text to div
div.appendChild(text);
// add click listener to div
google.maps.event.addDomListener(div, 'click', (function(i, latLng) {
return function() {
infowindow.setContent('clicked on ' + i);
infowindow.setPosition(latLng);
infowindow.open(map);
}
}(i, circleLatlng)));
var myOptions = {
content: div, // use DOM node for content
boxStyle: {
background: '#FFFFFF',
color: 'red',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
position: new google.maps.LatLng(circleArray[i].latitude,
circleArray[i].longitude),
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
zIndex: 100,
enableEventPropagation: true
};
var ib = new InfoBox(myOptions);
ib.open(map);
}
}
var map;
var infowindow = new google.maps.InfoWindow();
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 21.181272,
lng: 72.835066
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
addLabel(AutoCircle);
}
google.maps.event.addDomListener(window, "load", initMap);
var AutoCircle = [{
"latitude": '21.170931',
"longitude": '72.855607',
"content": "content0"
}, {
"latitude": '21.192533',
"longitude": '72.848750',
"content": "content1"
}, {
"latitude": '21.190178',
"longitude": '72.797578',
"content": "content2"
}];
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>
If I understand your code correctly, the 'label' you refer to is an instance of the InfoBox class, which according to its docs, "fires the same events as a google.maps.InfoWindow":
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
So you should be able to do something like:
var infowindow = new google.maps.InfoWindow({
content: 'foo'
});
ib.addListener('click', function() {
infowindow.open(map, this);
});

Can't get markers to work on google maps

I've been trying for ages to get a marker on this map, same location as center, but can't get it to work.
<html>
<head>
<style>
#map {
width: 100%x;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(59.909968, 10.748012),
zoom: 16,
zoomControl: true,
scaleControl: true,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
I've tried following the instructions here, but I can't get it to work..
Any ideas? I had it working on my site using an iframe, but had issues scrolling past the full width map without getting caught zooming in, so I'm looking for a way to make this code to replace it.
Following the example you link to works for me (setting the marker to the map center):
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(59.909968, 10.748012),
zoom: 16,
zoomControl: true,
scaleControl: true,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
// from https://developers.google.com/maps/documentation/javascript/examples/marker-simple
var marker = new google.maps.Marker({
// change the position to the map center
position: map.getCenter(),
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Google Maps add remove Polyline

i've a question about 'removing Polylines' from Google Maps. In this document is explained, how can be added or removed a polyline. (https://developers.google.com/maps/documentation/javascript/examples/polyline-remove?hl=de)
But my situation is a little bit different.
I've a 'addPolyline' function, which adds polyline on Google Maps. With this function i can add Polylines, so i can return 'polyline Object', but i can't remove this polyine with same way.
If you click on 'addLines', it can be drawn a line, but if i click on removeLine, it will not be removed.
var map;
var flightPlanCoordinates;
function addPolyline(el){
polyName = new google.maps.Polyline({
path: el,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
return polyName;
}
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
}
function addLine(el) {
el.setMap(map);
}
function removeLine(el) {
el.setMap(null);
}
google.maps.event.addDomListener(window, 'load', initialize);
Here is Fiddle : http://jsfiddle.net/aldimeola1122/gna00zwb/
How can i achieve that, can you help me?
Thanks in advance.
You are creating a new polyline, then removing it.
<input onclick="removeLine(addPolyline(flightPlanCoordinates));" type=button value="Remove line">
If you want to remove the existing polyline, you need to keep a reference to it.
<input onclick="removeLine(polyline);" type=button value="Remove line">
<input onclick="polyline=addLine(addPolyline(flightPlanCoordinates));" type=button value="Add line">
working fiddle
var map;
var flightPlanCoordinates;
var polyline;
function addPolyline(el) {
polyName = new google.maps.Polyline({
path: el,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
return polyName;
}
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
}
function addLine(el) {
el.setMap(map);
return el;
}
function removeLine(el) {
el.setMap(null);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="panel">
<input onclick="removeLine(polyline);" type=button value="Remove line">
<input onclick="polyline=addLine(addPolyline(flightPlanCoordinates));" type=button value="Add line">
</div>
<div id="map-canvas"></div>