I have this code where when the user clicks on the map like 3 times a polygon is created as well as a marker in each nodal point. Anyone knows how I could calculate the middle point of the polygon and drop a marker there as well ? thanks. here is my code.
var poly;
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map'),
{
zoom: 14,
center: new google.maps.LatLng(12.303022,76.644917),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
poly = new google.maps.Polygon(
{
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#000000",
fillOpacity: 0.26
});
poly.setMap(map);
google.maps.event.addListener(map, 'click', addLatLng);
}
function addLatLng(event)
{
var path = poly.getPath();
path.push(event.latLng);
var marker = new google.maps.Marker(
{
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
Related
i want to draw a polygon on the trigger of certain function. i have created a button submit which initiate the insert function which got coordinates from the user and call display function.
var map; var triangleCoords = [];
function insert() {
//var markerImage = 'assets/img/marker.png';
// var marker = new google.maps.Marker({
// position: location,
// map: map,
// icon: markerImage
// });
triangleCoords = [
[30.983611, 73.332778],
[30.93361111, 73.33055556],
[30.93361111, 73.43055556],
[30.98111111, 73.42944444]
];
display();
}
function display()
{
function initMap() {
var location = new google.maps.LatLng(31.1704, 72.7097);
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: location,
zoom: 7,
panControl: false
// mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var points = [];
for (var i = 0; i < triangleCoords.length; i++) {
points.push({
lat: triangleCoords[i][0],
lng: triangleCoords[i][1]
});
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
zoom: 13,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window,'load',initMap);
}
code is working fine but if i remove google.maps.event.addDomListener(window,'load',initMap); line map doesnot display. my submit button clears the forms.
I use google map to show markers,
then I want to use polyline to link markers one by one.
but polyline doesn't showing.
my code as below:
$(document).ready(function (){
/*map initial*/
var mapOptions = {
...
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
/*draw markers*/
var tmp_user_location1 = new google.maps.LatLng(37.772,-122.214);
var tmp_marker1 = new google.maps.Marker({
position: tmp_user_location1,
map: map
});
var tmp_user_location2 = new google.maps.LatLng(21.291,-157.821);
var tmp_marker2 = new google.maps.Marker({
position: tmp_user_location2,
map: map
});
arr_markers.push(tmp_marker1);
arr_markers.push(tmp_marker2);
/*draw polyline*/
arr_user_location_polyline.push(tmp_user_location1);
arr_user_location_polyline.push(tmp_user_location2);
var user_location_path = new google.maps.Polyline({
paths: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
user_location_path.setMap(map);
}
screen capture picture
any one help?
thanks a lot.
The issue with your code is that a google.maps.PolylineOptions object doesn't have a paths property (a google.maps.Polygon does), it has a path property.
var user_location_path = new google.maps.Polyline({
path: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
If I fix that, and the javascript errors in the posted code:
Uncaught ReferenceError: arr_markers is not defined
Uncaught ReferenceError: arr_user_location_polyline is not defined
I get a polyline: proof of concept fiddle
code snippet:
$(document).ready(function() {
var arr_markers = [];
var arr_user_location_polyline = [];
/*map initial*/
var mapOptions = {
center: {
lat: 21.291,
lng: -157.821
},
zoom: 3
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
/*draw markers*/
var tmp_user_location1 = new google.maps.LatLng(37.772, -122.214);
var tmp_marker1 = new google.maps.Marker({
position: tmp_user_location1,
map: map
});
var tmp_user_location2 = new google.maps.LatLng(21.291, -157.821);
var tmp_marker2 = new google.maps.Marker({
position: tmp_user_location2,
map: map
});
arr_markers.push(tmp_marker1);
arr_markers.push(tmp_marker2);
/*draw polyline*/
arr_user_location_polyline.push(tmp_user_location1);
arr_user_location_polyline.push(tmp_user_location2);
var user_location_path = new google.maps.Polyline({
path: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
user_location_path.setMap(map);
});
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<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"></script>
<div id="map-canvas"></div>
Google Maps circle looks like hand drawn.
Circle script is:
var circle = new google.maps.Circle({
center: myLatLng,
radius:1000,
strokeColor: "#000000",
strokeOpacity:1,
fillOpacity:0.4,
strokeWeight: 2,
fillColor: "#000000",
map:map
});
Can we make the circle more fine tuned.
My requirement is to show circle around marker with fine tuned circle border.
You could try using a symbol. I don't believe there's an option to change those circles from using the "hand-drawn" style. It's odd because their rectangles don't seem to be using that look.
Here is an example :
https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-predefined
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var myCircle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: 0.8,
scale: 20,
strokeColor: 'black',
strokeWeight: 3
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: myCircle,
map: map
});
}
Here is an example of a circle around a marker :
function initialize() {
var myLatlng = new google.maps.LatLng(16.5083,80.64);var mapOptions = {zoom: 12,center: myLatlng};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var marker = new google.maps.Marker({map: map,position: myLatlng});
var circle = new google.maps.Circle({
map: map,
radius: 2000,
fillColor: '#000000',
fillOpacity: 0.4,
strokeColor: '#000000',
strokeWeight: 2
});
circle.bindTo('center', marker, 'position');
}
google.maps.event.addDomListener(window, 'load', initialize);
I use the Google API to plot markers and a polygon. This works well, but I can't seem to get the polygon's fillOpacity and strokeOpacity working. It works when it is set to 0 or 1, which makes me believe that there is some kind of parsing error.
(I left the details out of the code below and just replaced it with example)
<script type="text/javascript">
var locations = [
['EXAMPLETEXT, EXAMPLECOORDINATE1, EXAMPLECOORDINATE2, 1],
];
var limburgcoordinaten = [
new google.maps.LatLng(EXAMPLECOORDINATE1, EXAMPLECOORDINATE2),
new google.maps.LatLng(EXAMPLECOORDINATE1, EXAMPLECOORDINATE2),
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(EXAMPLECOORDINATE1, EXAMPLECOORDINATE2),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
var limburg = new google.maps.Polygon({
paths: limburgcoordinaten,
strokeColor: "#FF0000",
strokeOpacity: 0.7,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.3,
map: map
});
}
I hope that i'm just looking over something very obvious!
i am new to stackoveflow, can any one help me to how to draw a rectangle using google api v3, i went through some examples on google i got the below code,
function initialize() {
var coachella = new google.maps.LatLng(33.6803003, -116.173894);
var rectangle;
var myOptions = {
zoom: 11,
center: coachella,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
rectangle = new google.maps.Rectangle();
google.maps.event.addListener(map, 'zoom_changed', function() {
// Get the current bounds, which reflect the bounds before the zoom.
var rectOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
bounds: map.getBounds()
};
rectangle.setOptions(rectOptions);
});
}
But, it functions on zoom event(zoom chanages),i want simple with out event,please help me
map.getBounds() may return not the desired bounds when called to early(immediately after the instantiating of the map).
You may use tilesloaded instead
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
/*your code*/
});