how to create multiple rectangle on gmaps? - javascript

I want to create multiple rectangle on gmaps but I don't know where must I put the code.
This is my sample code
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 37.0924, lng: -119.4179324},
mapTypeId: 'terrain'
});
var contentString = '<div id="content">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds:
new google.maps.LatLngBounds
<?php
$con = mysqli_connect("localhost","root","","test");
$query=mysqli_query($con,"SELECT * FROM map");
$cc=mysqli_fetch_array($query);
?>
(
new google.maps.LatLng (<?php echo $cc['nelat']; ?>, <?php echo $cc['nelng']; ?>),
new google.maps.LatLng (<?php echo $cc['swlat']; ?>, <?php echo $cc['swlng']; ?>),
),
});
rectangle.addListener('click', function() {
infowindow.open(map, rectangle);
});
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Rectangles</title>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAogXD-AHrsmnWinZIyhRORJ84bgLwDPpg&callback=initMap">
</script>
</body>
</html>
In that snippet only show 1 rectangle. If I want to add other rectangle where must I put the code? Example I want to show 5 rectangle and at different position. and also give info window for each rectangle

Add a separate rectangle variable:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 37.0924, lng: -119.4179324},
mapTypeId: 'terrain'
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds:
new google.maps.LatLngBounds
(
new google.maps.LatLng (37.778261, -119.4179324),new google.maps.LatLng (36.255123, -115.2383485),
),
});
var rectangle2 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds:
new google.maps.LatLngBounds
(
new google.maps.LatLng (30.778261, -119.4179324),new google.maps.LatLng (29.255123, -115.2383485),
),
});
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Rectangles</title>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAogXD-AHrsmnWinZIyhRORJ84bgLwDPpg&callback=initMap">
</script>
</body>
</html>

Related

move circle along with marker google maps javascript

I am working on a project in which i have marker on map with a circle around it. I want to move the circle along with marker. When ever i move the marker the circle remains to its last position. I want to move both that when ever i move the marker the circle should also move along with it.
Kindly tell me where i am doing mistake?
code is here:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Draw Circle on Marker Click on Google Map</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 99%;
width: 99%
}
</style>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
<script>
var markers = [];
var map;
// First, create an object containing LatLng and population for each city.
var citymap = {lat:21.002471054356725, lng:79.12353515625};
function initMap() {
var lat_lng = {lat: 22.08672, lng: 79.42444};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: lat_lng,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var marker = new google.maps.Marker({
position: lat_lng,
draggable:true ,
map: map
});
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: lat_lng,
radius: 199999.45454,
draggable:true
});
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
You just need to bind drag event with circle with .addListener() function
do it like this
function initMap() {
var lat_lng = {lat: 22.08672, lng: 79.42444};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: lat_lng,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var marker = new google.maps.Marker({
position: lat_lng,
draggable:true ,
map: map
});
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: lat_lng,
radius: 199999.45454,
draggable:true
});
//add event listner on drag event of marker
marker.addListener('drag', function(event) {
cityCircle.setOptions({center:{lat:event.latLng.lat(),lng:event.latLng.lng()}});
});
}

How to create a highlight an image when double clicked?

I am trying to display a highlighted circle when the user double clicks on a certain part of an image. For example, if the image is a map of a city, and they double click on coord: (X, Y), I want the highlighted circle's center to be at (X, Y) and the radius would vary on the item that they clicked on.
Here is what I have so far:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function showMap(){
var mapOptions = {
zoom: 19,
center: new google.maps.LatLng(x, y),//let z, y be some coord
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: true,
disableDefaultUI: true,
zoomControl: false,
draggable: false,
scrollwheel: false
}
map = new google.maps.Map(document.getElementById("myMap"),
mapOptions);
google.maps.event.addListener(map, 'dblclick', doubleClicked);
}
function doubleClicked(e){//highlight the area with a circle
//alert("lat: " + e.latLng.lat() + "\nlong: " + e.latLng.lng());
}
</script>
HTML
<div id="myMap" ></div>
CSS
#myMap {
margin-left: auto;
margin-right: auto;
width: 1200px;
height: 800px
}
Solution with help from #Aamir Sarwar:
var circle = new google.maps.Circle({
strokeColor: '#FFFFFF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: {lat: X, lng: Y}
radius: 10
});
check below example copy from this link...hope it may help you https://developers.google.com/maps/documentation/javascript/examples/rectangle-simple?hl=en
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Rectangles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script>
// This example adds a red rectangle to a map.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 33.678, lng: -116.243},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251
}
});
}
</script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"></script>
</body>
</html>
Here's the general outline:
myMap should be position:relative
Add mouse events on myMap to track X,Y of the mouse position
in doubleClicked method, create div that would be displayed as circle. Also it should be position:absolute
add that element to the myMap and change its CSS: left to mouse X position and top to mouse Y position

Google Maps Partial Polyline

I want to map a route between two points on Google Maps with a polyline and overlay this with another "current distance travelled" polyline. Basically, if the distance between the two points is 100KM and the person has travelled 25KM I want to overlay a second polyline 25% of the route. I am finding it difficult to find even a formula to calculate what the coordinates of the point 25% along this route would be.
Is there any Google map functionality to do something like this, or a technique for calculating a point along a route, x% of the way.
Thanks in advance.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript" src="v3_epoly.js"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(-27.46758, 153.027892)
];
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#999999',
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
});
flightPath.setMap(map);
//current location 2000 miles on route
var mar = flightPath.GetPointAtDistance(2000000);
var myLatlng = new google.maps.LatLng(mar.k, mar.D);
console.log(mar);
var marker = new google.maps.Marker({
position: mar,
map: map,
title: 'Current Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="height:100%; width:100%;"></div>
</body>
</html>

How to Add a circle and get the coordinates and radius of the circle using one click on the Google Map?

I want to create a circle using one click on the map, also i want to collect the Lat/Lon information of the circle and it's radius. Please suggest me how to do it using JavaScript.
Regards,
Madhu
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// This example creates circles on the map with fixed radius of 5km
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(37.09024, -95.712891),//can use your center
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, "click", function (e) {
//lat and lng is available in e object
var latLng = e.latLng;
// Construct the circleOptions
var circleOptions = {
//optional to modify
/* strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,*/
map: map,
center: latLng,
radius: 5000 //in meters apporx.
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(circleOptions);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Complex Polylines with arrow google map api v3

I wanted to create the arrow directed polyline using google map. I'm able to connect through line. But i wanted to draw line in arrow ended.
My code is
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 5
//center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.clearOverlays();
// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
icons: [{
icon: lineSymbol,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
offset: '100%'
}],
strokeWeight: 3
};
lineCoordinates= new google.maps.Polyline(polyOptions);
lineCoordinates.setMap(map);
}
function placeMarker(mapLoc,address,infoDlgString){
map.setCenter(mapLoc);
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
title: address,
position: mapLoc
});
var infowindow = new google.maps.InfoWindow({
content:infoDlgString
});
infowindow.open(map,marker);
}
function getAddressDetail(address2,infoDlgString){
geocoder.geocode( { 'address': address2}, function(results2, status2) {
if (status2 == google.maps.GeocoderStatus.OK) {
map.setCenter(results2[0].geometry.location);
placeMarker(results2[0].geometry.location,address2,infoDlgString);
var path = lineCoordinates.getPath();
path.push(results2[0].geometry.location);
} else {
alert('Geocode was not successful for the following reason: ' + status2);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You haven't specified a path for your polyline to follow. So Google doesn't know what to plot. Once you add a path of multiple latlngs in your polyOptions variable, the line should appear with the correct arrow head end. This works for me:
<!DOCTYPE html>
<html>
<head>
<title>Polyline with arrows</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { width:100%; height:100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(54.57723, -2.79748);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
strokeColor: '#FF0000',
strokeOpacity: 1.0
};
var polyline = new google.maps.Polyline({
path: [latlng, new google.maps.LatLng(54.60039,-3.13632), new google.maps.LatLng(54.36897,-3.07561)],
strokeColor: "#000000",
strokeOpacity: 0.5,
strokeWeight: 4,
map: map,
icons: [{
icon: lineSymbol,
offset: '100%'
}]
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Also note that there is no strokeColor or strokeOpacity properties in the IconSequence object. These are on the Symbol object instead.

Categories

Resources