How to create a highlight an image when double clicked? - javascript

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

Related

how to create multiple rectangle on gmaps?

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>

I want google map like this Multiple Polyline, can Multiple select

I want google map like this Multiple Polyline, can Multiple select.
Multiple Polyline
var geocoder;
var map;
var polyline;
positions = [new google.maps.LatLng(37.441883,-122.143019),
new google.maps.LatLng(37.45296,-122.181725)];
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
});
$("#chkRouteLines").click(function () {
if (!polyline || !polyline.setMap) {
polyline = new google.maps.Polyline({
path: positions,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
visible: true
});
}
if ($(this).is(':checked')) {
polyline.setMap(map);
} else {
polyline.setMap(null);
}
})
}
google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas {
height: 90%;
width: 100%;
margin: 0px;
padding: 0px
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<input id="chkRouteLines" value="click" type="checkbox" />
you can google developers documents.For example this link:
https://developers.google.com/maps/documentation/javascript/examples/polyline-complex
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Complex Polylines</title>
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
var poly;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.879, lng: -87.624} // Center the map on Chicago, USA.
});
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
// Add a listener for the click event
map.addListener('click', addLatLng);
}
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

Javascript Timeout function with Google Maps API Polygons

I am currently trying to create a program that increases the opacity of a polygon every 2 seconds until its non-transparent. I eventually want to do this with multiple polygons to relay data to the user over time, but I am simply trying to get one polygon to work. The code is written in Javascript and uses the timeout function to do so.
The code is supposed to draw a red square one the map with opacity 0.1, then 2 seconds later draw a similar square with opacity at 0.2. This process goes on until the opacity is equal to 1. The problem is that the program skips the first 9 squares (where opacity < 1) and draws the final square (opacity = 1). I believe that there may be a problem with how I am doing my delay.
Below is my sample code:
<!DOCTYPE HTML>
<html>
<head>
<style>
#map {
height: 100%;
}
#tabs{
width: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 33.678, lng: -116.243},
mapTypeId: 'terrain'
});
for(i = 0.1; i < 1; i+=0.1){
setTimeout(function(){
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: i,
map: map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251
}
});
}, 1000+i*20000)
}
}
</script>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
I slightly modified your code and implemented it with setInterval() function. Also please note that there is no need to create new instance of polygon inside a loop, you can just change polygon options.
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 33.678, lng: -116.243},
mapTypeId: 'terrain'
});
var m_opacity = 0.1;
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: m_opacity,
map: map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251
}
});
var m_timer = window.setInterval(function(){
m_opacity += 0.1;
if (m_opacity <= 1.0) {
rectangle.setOptions({
fillOpacity: m_opacity
});
}
if (m_opacity === 1.0) {
window.clearInterval(m_timer);
}
}, 2000);
}
#map {
height: 100%;
}
#tabs{
width: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&v=3&libraries=places&callback=initMap"></script>
You can see this sample on jsbin as well: http://jsbin.com/yepagec/edit?html,output

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 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>

Categories

Resources