I have a map in div with absolute position inside of a container that is absolute too. Also map's size is calculated from top, bottom, left and right css properties.
Clicking on polyline calls fitBounds on map, and instead of fitting it zooms out to 0.
Example is here: fiddle (to reproduse this situation enter the fullscreen mode, click on first polyline, outzoom and click on second)
Any suggestions why it's happening?
<body onload="initialize()">
<div id="map_container" style="position: absolute; width: 100%; height: 100%;">
<div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px">
</div>
</div>
</body>
and js code
var mapOptions = {
zoom: 7,
center: {lat: 52, lng: 12.5}
}
var firstPolylineCoordinates = [
{lat: 52, lng: 12},
{lat: 52, lng: 13}
];
var secondPolylineCoordinates = [
{lat: 51, lng: 12},
{lat: 51, lng: 13}
];
function initialize(){
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var bounds = new google.maps.LatLngBounds();
var firstPolyline = new google.maps.Polyline({
path: firstPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
firstPolyline.setMap(map);
firstPolyline.addListener("click", function(polyMouseEvent){
bounds.extend(firstPolylineCoordinates[0]);
bounds.extend(firstPolylineCoordinates[1]);
map.fitBounds(bounds);
});
var secondPolyline = new google.maps.Polyline({
path: secondPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
secondPolyline.setMap(map);
secondPolyline.addListener("click", function(polyMouseEvent){
bounds.extend(secondPolylineCoordinates[0]);
bounds.extend(secondPolylineCoordinates[1]);
map.fitBounds(bounds);
});
}
You are using the same bounds for the two polyline "zoom" operations. When you click on the second polyline, you end up zooming to the bounds for both polylines (which is not what you want).
Declare the bounds variable inside the polyline click listener functions:
firstPolyline.addListener("click", function(polyMouseEvent){
var bounds = new google.maps.LatLngBounds();
bounds.extend(firstPolylineCoordinates[0]);
bounds.extend(firstPolylineCoordinates[1]);
map.fitBounds(bounds);
});
proof of concept fiddle
code snippet:
var mapOptions = {
zoom: 7,
center: {lat: 52, lng: 12.5}
}
var firstPolylineCoordinates = [
{lat: 52, lng: 12},
{lat: 52, lng: 13}
];
var secondPolylineCoordinates = [
{lat: 51, lng: 12},
{lat: 51, lng: 13}
];
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var firstPolyline = new google.maps.Polyline({
path: firstPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
firstPolyline.setMap(map);
firstPolyline.addListener("click", function(polyMouseEvent) {
var bounds = new google.maps.LatLngBounds();
bounds.extend(firstPolylineCoordinates[0]);
bounds.extend(firstPolylineCoordinates[1]);
map.fitBounds(bounds);
});
var secondPolyline = new google.maps.Polyline({
path: secondPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
secondPolyline.setMap(map);
secondPolyline.addListener("click", function(polyMouseEvent) {
var bounds = new google.maps.LatLngBounds();
bounds.extend(secondPolylineCoordinates[0]);
bounds.extend(secondPolylineCoordinates[1]);
map.fitBounds(bounds);
});
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<body onload="initialize()">
<div id="map_container" style="position: absolute; width: 100%; height: 100%;">
<div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px">
</div>
</div>
</body>
Related
I can't seem to find any documentation about updating the path of an icon (marker) in the Google Maps API. In this particular example I'm trying to change the fillOpacity of the icon from 0 to 1.
var myIcon = {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: "#ff00ff",
fillOpacity: 0,
strokeColor: "#ff00ff",
strokeWeight: 2
};
var marker = new google.maps.Marker({
position: position,
icon: myIcon,
map: map,
title: 'My Marker>'
});
marker.addListener('click', function() {
this.setOptions({icon:{fillOpacity: 0.5}}); // Not working
this.setIcon({fillOpacity: 0.2}); // Not working either
});
The "icon" is an anonymous object. You need to set the whole object again:
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setIcon(myIcon);
});
or:
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setOptions({
icon: myIcon
});
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -25.363882,
lng: 131.044922
}
});
var myIcon = {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: "#ff00ff",
fillOpacity: 0,
strokeColor: "#ff00ff",
strokeWeight: 2
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: myIcon,
map: map,
title: 'My Marker>'
});
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setIcon(myIcon);
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<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>
The generated path is composed of series of circles. I want it to be a line. Thanks!
var directionsDisplay = new google.maps.DirectionsRenderer({
map:map, polylineOptions:{strokeColor: '#98c28a',
strokeOpacity: 0,
strokeWeight: 4,
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#98c28a',
fillOpacity: 1,
scale: 2,
strokeColor: '#98c28a',
strokeOpacity: 1,
},
offset: '0',
repeat: '10px'
}]}, suppressMarkers:true });
Remove the icons from your Polyline definitions, and make the strokeOpacity non-zero
var directionsDisplay = new google.maps.DirectionsRenderer({
map:map,
polylineOptions:{
strokeColor: '#98c28a',
strokeOpacity: 1.0,
strokeWeight: 4
},
suppressMarkers:true
});
proof of concept fiddle
code snippet:
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 directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
polylineOptions: {
strokeColor: '#98c28a',
strokeOpacity: 1.0,
strokeWeight: 4,
},
suppressMarkers: true
});
var directionsService = new google.maps.DirectionsService();
directionsService.route({
origin: "New York, NY",
destination: "Boston, MA",
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
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>
<div id="map_canvas"></div>
I am implementing University campus map.
I am trying to make put color on some buildings and add event on each of them.
I've tried to use marker's but it didn't work for me.
I have a sample page that provides the things what I am trying to do.
http://maps.uottawa.ca/
any idea how they made it?
I think you should try using polygons. It maybe a little bit time consuming creating the shapes, but the result could be similar. See my example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>Ottawa</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 600px;;
width: 600px;
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var infowindow;
var polyArr = [
[ [
{lat: 45.4216323644096, lng: -75.679592192173},
{lat: 45.421722258490796, lng: -75.67935079336166},
{lat: 45.421029929177294, lng: -75.67869432270527},
{lat: 45.421176302703834, lng: -75.67835435271263},
{lat: 45.42096027218897, lng: -75.67815452814102},
{lat: 45.42071082416096, lng: -75.67878015339375}
],
'#800000', '#C0C0C0', '<div><h2>Advanced Research Complex (ARC)</h2><br>25 Tempelton Street</div>'
],
[ [
{lat: 45.42114947542994, lng: -75.6796009093523},
{lat: 45.42078801197042, lng: -75.67929714918137},
{lat: 45.420673642190714, lng: -75.67935682833195},
{lat: 45.42061010332411, lng: -75.67929714918137},
{lat: 45.42055833086142, lng: -75.67939773201942},
{lat: 45.42049243856756, lng: -75.6793400645256},
{lat: 45.42044301929665, lng: -75.67946344614029},
{lat: 45.42051314758246, lng: -75.67952111363411},
{lat: 45.42050655835125, lng: -75.67953586578369},
{lat: 45.42052632604257, lng: -75.6795559823513},
{lat: 45.42045478579363, lng: -75.67973837256432},
{lat: 45.42051032362633, lng: -75.67974105477333},
{lat: 45.42051408890116, lng: -75.67976787686348},
{lat: 45.42054279911343, lng: -75.67976653575897},
{lat: 45.42054232845426, lng: -75.67974641919136},
{lat: 45.420644932045036, lng: -75.67973971366882},
{lat: 45.42075271268039, lng: -75.67983828485012},
{lat: 45.42076212582654, lng: -75.67983694374561},
{lat: 45.420867552956295, lng: -75.67992009222507},
{lat: 45.42094426989573, lng: -75.67974239587784},
{lat: 45.42088402592753, lng: -75.67968674004078}
],
'#800000', '#C0C0C0', '<div><h2>Power Plant (CTE)</h2><br>720 King Edward</div>'
]
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: 45.42118901035543, lng: -75.67925691604614},
draggableCursor: 'crosshair'
});
infowindow = new google.maps.InfoWindow();
for (i = 0; i < polyArr.length; i++) {
var pBuilding = new google.maps.Polygon({
paths: polyArr[i][0],
fillColor: polyArr[i][1],
fillOpacity: 0.9,
strokeColor: polyArr[i][2],
strokeColor: polyArr[i][2],
strokeOpacity: 0.8,
strokeWeight: 3
});
pBuilding.setMap(map);
google.maps.event.addListener(pBuilding, 'click', (function(pBuilding, i) {
return function() {
infowindow.setPosition(polyArr[i][0][0]);
infowindow.setContent(polyArr[i][3]);
infowindow.open(map);
}
})(pBuilding, i));
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
Also here: https://jsfiddle.net/6y5a5bp9/
I hope it helps!
When you draw a circle in google maps api it has a point right in the center of it and when you move the circle by that point(if not by that point i get bounds changed and then center changed events) what kind of event is triggered ?
I have tried "center_changed", "dragend", "bounds_changed", nothing is triggered if circle is moved by that point.
drawingManager.setDrawingMode($scope.G.drawing.OverlayType.CIRCLE);
drawingManager.set('circle',{
strokeWeight: 3,
strokeOpacity: 1.0,
fillOpacity: 0.3,
fillColor: "red",
draggable: true,
geodesic: true,
editable: true,
suppressUndo: true
});
here's the code i set up drawing manager, and after that i just draw a circle on the map.
Pic:
The DrawingManager won't let you change the center until the circlecomplete event fires. Add a 'center_changed' event listener to the circle when the 'circlecomplete event fires, use that to capture the changes of the center position.
google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {
google.maps.event.addListener(circle, 'center_changed', function (e) {
document.getElementById('info').innerHTML = circle.getCenter().toUrlValue(6);
});
});
working fiddle
code snippet:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var 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.CIRCLE
]
},
markerOptions: {
icon: 'images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
google.maps.event.addListener(circle, 'center_changed', function(e) {
document.getElementById('info').innerHTML = circle.getCenter().toUrlValue(6);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="info"></div>
<div id="map-canvas"></div>
i'm trying get the radius after editing circle, i am using the drawingManager library for draw the circle into map. the next part is a part of the code.
<script type="text/javascript">
function initialize() {
var mapOptions = {
//center: new google.maps.LatLng(-34.397, 150.644),
center: new google.maps.LatLng(4.705, -74.113),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
redondo = new google.maps.Circle(document.getElementById('map_canvas'),mapOptions);
var 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.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {
icon: 'Images/marker_sprite.png'
},
circleOptions: {
strokeColor: '#FF0000',
fillColor: '#DF0101',
fillOpacity: 0.3,
strokeWeight: 2,
editable:true
},
rectangleOptions: {
strokeColor: "#FF0000",
strokeWeight: 2,
fillColor: '#DF0101',
fillOpacity: 0.35,
},
polygonOptions: {
strokeColor: "#FF0000",
strokeWeight: 2,
fillColor: '#DF0101',
fillOpacity: 0.35,
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
radius = circle.getRadius();
document.getElementById("radio").innerHTML=radius;
redondo=circle;
});
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(Polygon) {
var vertices = Polygon.getPath();
var pocision="";
for (var i=0; i < vertices.length; i++){
var xy=vertices.getAt(i);
pocision += "<br>"+ xy.lng() +" , " + xy.lat();
document.getElementById("posicion").innerHTML=pocision;
}
//document.getElementById("posicion").innerHTML= Polygon.getPaths(latlang).tostring;
});
var redondo= new google.maps.circle();
google.maps.event.addListener(redondo, 'radius_changed', function(){
--///////// in this part of the code don't enter
alert('buenaS');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width: 500px; height: 400px; display:table-cell"></div>
<div style="margin:0px 0px 0px 800px; display:table-cell">
Posicion: <span id="posicion" style="display:none"></span><br>
Radio = <span id="radio"></span>
</div>
i was searching the event handler to change radius and call 'radius_changed' but to me don't work
Observe the radius_changed event of the circle:
google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
radius = circle.getRadius();
document.getElementById("radio").innerHTML=radius;
redondo=circle;
//observe radius_changed
google.maps.event.addListener(redondo,'radius_changed',function(){
alert(this.getRadius())
})
});