Google map is displaying only when its size get resized - javascript

I am loading google map in my webpage with some width and height.Here is my code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
//google.maps.event.trigger(map, 'resize');
/*$(window).resize(function() {
google.maps.event.trigger(map, "resize");
});*/
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon', 'polyline']
},
circleOptions: {
strokeColor: '#00DB00',
fillColor: 'green'
}
});
drawingManager.setMap(map);
}
style:
#map{
width:500px;
height:300px;
}
html:
<div class="cl col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div id="map"></div>
</div>
When I load the page,map is displaying like this
After resizing the map its displaying correctly.
What is the problem here?

I think you're missing the drawingManager.setMap(map); at the end of your initMap function.

Related

Remove Polyline tool from drawing manager

I want to remove PolyLine drawing tool from Google maps API V3, Sorry if this is a silly question. I'm new to this, I've searched everywhere before asking it in here. Thank You.
I've added the image below for more clarity. I want to remove that tool from the options.
I'm using the below code to initialize the drawingManager
drawingManager = new google.maps.drawing.DrawingManager({
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: {
draggable: false,
label: ""
},
// polylineOptions: {
// editable: false,
// },
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});
I get a javascript error with your posted code: ReferenceError: polyOptions is not defined.
You have a typo in your DrawingManager constructor, drawingModes belongs in the drawingControlOptions object (per the documentation) your code:
drawingManager = new google.maps.drawing.DrawingManager({
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,
],
should be:
var drawingManager = new google.maps.drawing.DrawingManager({
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,
],
},
(note the position of the closing } for drawingControlOptions)
proof of concept fiddle
code snippet:
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=drawing">
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8,
});
var drawingManager = new google.maps.drawing.DrawingManager({
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: {
draggable: false,
label: ""
},
/* polyOptions is not defined... */
// rectangleOptions: polyOptions,
// circleOptions: polyOptions,
// polygonOptions: polyOptions,
map: map
});
drawingManager.setMap(map);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Drawing Tools</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=drawing&v=weekly&channel=2" async></script>
</body>
</html>

Easiest way to calculate area of drawn polygon with google map

Javascript/google maps beginner here.
I am looking for a simple way to calculate the area of a polygon the user draws on the map.
Code Snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 53,
lng: 0
},
zoom: 13
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon']
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
<div>
<div id="map" style="width: 100%; height: 500px;"></div>
</div>
Use the google.maps.geometry.spherical.computeArea method
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
var area = google.maps.geometry.spherical.computeArea(polygon.getPath());
infowindow.setContent("polygon area="+area.toFixed(2)+" sq meters");
infowindow.setPosition(polygon.getPath().getAt(0));
infowindow.open(map);
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 53.000581,
lng: -0.005
},
zoom: 19
});
var infowindow = new google.maps.InfoWindow();
var polygon = new google.maps.Polygon({
path: [{lat: 53.000842,lng: -0.004903},
{lat: 53.000823,lng: -0.004798},
{lat: 53.000779,lng: -0.004823},
{lat: 53.000799,lng: -0.004935}],
map: map
});
var area = google.maps.geometry.spherical.computeArea(polygon.getPath());
infowindow.setContent("polygon area=" + area.toFixed(2) + " sq meters");
infowindow.setPosition(polygon.getPath().getAt(0));
infowindow.open(map);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon']
},
drawingMode: null
});
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
var area = google.maps.geometry.spherical.computeArea(polygon.getPath());
infowindow.setContent("polygon area=" + area.toFixed(2) + " sq meters");
infowindow.setPosition(polygon.getPath().getAt(0));
infowindow.open(map);
});
drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

alerts are not showing in geofencing when marker is outside of polygon geofence in google maps

i have code for geofencing , in that polygon shape is there while dragging one marker out side the polygon its giving alert , but i need it should give alert automatically when page loads instead of dragging manually to outside.
code
<head>
<meta charset="utf-8">
<title>GMaps.js — Geofences</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true&key=AIzaSyDci4vYApOxVdKqwlpXSv9h77AcWbNuzmQ&libraries=drawing">
</script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
</head>
<body onload="runMaps()">
<script>
var map;
$(document).ready(function () {
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
var path = [
[-12.040397656836609, -77.03373871559225],
[-12.040248585302038, -77.03993927003302],
[-12.050047116528843, -77.02448169303511],
[-12.044804866577001, -77.02154422636042]
];
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
},
markerOptions: { icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' },
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
polygon = map.drawPolygon({
paths: path,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
map.addMarker({
lat: -12.043333,
lng: -77.028333,
draggable: true,
fences: [polygon],
outside: function (marker, fence) {
alert('This marker has been moved outside of its fence');
}
});
map.addMarker({
lat: -12.041111,
lng: -77.021111,
draggable: true,
fences: [polygon],
outside: function (marker, fence) {
alert('This marker has been moved outside of its fence');
}
});
});
</script>
<div id="map" style="height:800px"></div>
</body>
I think this should do it. All the Gmaps.js is doing under the hood is
if (marker.fences) {
google.maps.event.addListener(marker, 'dragend', function() {
self.checkMarkerGeofence(marker, function(m, f) {
outside(m, f);
});
});
}
https://github.com/hpneo/gmaps/blob/master/gmaps.js#L851
So assign your markers to variables. On load, trigger the 'dragend' event on each of them:
var marker1 = map.addMarker({
lat: -12.043333,
lng: -77.028333,
draggable: true,
fences: [polygon],
outside: function (marker, fence) {
alert('This marker has been moved outside of its fence');
}
});
var marker2 = map.addMarker({
lat: -12.041111,
lng: -77.021111,
draggable: true,
fences: [polygon],
outside: function (marker, fence) {
alert('This marker has been moved outside of its fence');
}
});
google.maps.event.trigger(marker1, 'dragend');
google.maps.event.trigger(marker2, 'dragend');

Javascript HTML button click to add marker to map

Im using Google map API V3 with drawing manager to add and save markers to the map. It works fine with the default drawing manager tools. I have the drawingMode set to null so it is inactive until the marker button is clicked - this works with the default set up.
I now have my own custom HTML button that when clicked it activates the drawing manager MARKER tool:
<button id="add-event-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Event</button>
My Javascript is:
document.getElementById('add-event-button').onclick = function()
{
drawingMode: google.maps.drawing.OverlayType.MARKER;
}
But when it is clicked it does nothing, and returns 0 errors. I replaced
drawingMode: google.maps.drawing.OverlayType.MARKER;
with
alert("button was clicked ");
to see if it is reading the button click and it worked. So what should be added to activate the MARKER tool??
This works for me (and doesn't require jquery):
document.getElementById('add-event-button').onclick = function() {
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
}
Working 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.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
document.getElementById('add-event-button').onclick = function() {
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
}
}
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"></script>
<button id="add-event-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Event</button>
<div id="map-canvas"></div>
You probably need to do it via the drawingManager setOptions method, e.g.:
drawingManager.setOptions({
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.MARKER]
}
});
So in your case:
document.getElementById('add-event-button').onclick = function()
{
drawingManager.setOptions({
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.MARKER]
}
});
}
$("#add-event-button").click( function(){
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
});

How to check which map type is selected in Google Maps v3

I have a google map on a page. I need to check which map type the user has selected.
Can someone tell me how to perform this check?
//set map options
var mapOptions = {
center: newCenter,
zoom: newZoom,
styles: stylesArray,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID],
}
};
//create map
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
if (map.getCurrentMapType() == google.maps.MapTypeId.ROADMAP) {
//set the current map type
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}
map.getMapTypeId() returns the current mapTypeId.
document.getElementById('maptype').value=map.getMapTypeId();
working fiddle
working code snippet:
var mapOptions = {
center: {
lat: 45,
lng: -112
},
zoom: 4,
// styles: stylesArray,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID],
}
};
//create map
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
if (map.getCurrentMapType() == google.maps.MapTypeId.ROADMAP) {
//set the current map type
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}
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" value="get map type" onclick="document.getElementById('maptype').value=map.getMapTypeId();" />
<input type="text" value="" id="maptype" />
<div id="map-canvas"></div>

Categories

Resources