Google Maps API, add hover state to pin - javascript

i'm creating a Marker layer on my Google Map, and then adding pins. These get added to this layer. I want to add a hover effect which is basically a circle behind the pin.
I was going to just use CSS, however I can't add a before or after to the image, so I need to get the parent element and add it to this. However the Google Maps API doesn't give you access to the Pin element.
var markerLayer = new google.maps.OverlayView();
markerLayer.draw = function () {
this.getPanes().markerLayer.id='markerLayer';
};
markerLayer.setMap(_.map);
// Create pin and store it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location.lat, location.lng),
icon: marker,
title: location.name,
optimized: false
});
_.markers.push(marker);
Below is a screenshot of what the marker object contains, and as you can see there is no reference to the HTMLElement.
My only though was to search the #markerLayer div for images and storing them, assuming that these will appear in the same order as they are added to the _.markers property.
Or would a better way be to create a Circle using the API and putting it in the same position as the pin?

I used the Google Maps Circle to create a circle shape, when hovering to markers.
here is the link to doc:
(https://developers.google.com/maps/documentation/javascript/examples/circle-simple)
Check this addMarker function
function addMarker(position) {
var marker = new google.maps.Marker({
position: position,
map: map
});
var markerCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
center: position,
radius: 500000
});
circles.push(markerCircle);
markers.push(marker);
marker.addListener('mouseover', function() {
var index = markers.indexOf(marker);
circles[index].setMap(map);
});
marker.addListener('mouseout', function(){
var index = markers.indexOf(marker);
circles[index].setMap(null);
});
return marker;
}
I made a simple app, that will add markers by clicking on the map.
Check this working example: http://jsbin.com/nukecog/2/edit?html,js,output
var map;
var markers = [];
var circles = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {
lat: 0,
lng: 0
}
});
map.addListener('click', function(e) {
addMarker(e.latLng);
});
}
function addMarker(position) {
var marker = new google.maps.Marker({
position: position,
map: map
});
var markerCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
center: position,
radius: 500000
});
circles.push(markerCircle);
markers.push(marker);
marker.addListener('mouseover', function() {
var index = markers.indexOf(marker);
circles[index].setMap(map);
});
marker.addListener('mouseout', function() {
var index = markers.indexOf(marker);
circles[index].setMap(null);
});
return marker;
}
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap">
</script>
</body>
</html>

Related

Dynamically update radius marker in Google maps api using range slider

I have a script where I apply a search radius within a google map. I can change the radius and have it display dynamically but cannot seem to figure out how to replace the radius instead of just adding a radius. The function uses bindTo marker. I have tried replace and replaceWith but they do not seem to work.
Here is the range input -
<input type="range" class="custom-range" id="customRange1" value="20">
Here is the add marker script and creating the radius and binding it when the range value changes.
var marker = new google.maps.Marker({
map: map,
position: latLng,
title: name,
icon: 'linktoimage'
});
// Add circle overlay and bind to marker
$('#customRange1').change(function(){
var new_rad = $(this).val();
var rad = new_rad * 1609.34;
var circle = new google.maps.Circle({
map: map,
radius:rad,
fillColor: '#555',
strokeColor: '#ffffff',
strokeOpacity: 0.1,
strokeWeight: 3
});
circle.bindTo('center', marker, 'position');
});
So when I change the range value it will add a new radius overlay on top of the old, I would like it to replace the current radius overlay with the new. I am guessing its because I'm using bindTo.
Keep a reference to the circle, if the circle already exists, don't create a new one, change the existing one:
var circle;
// Add circle overlay and bind to marker
$('#customRange1').change(function() {
var new_rad = $(this).val();
var rad = new_rad * 1609.34;
if (!circle || !circle.setRadius) {
circle = new google.maps.Circle({
map: map,
radius: rad,
fillColor: '#555',
strokeColor: '#ffffff',
strokeOpacity: 0.1,
strokeWeight: 3
});
circle.bindTo('center', marker, 'position');
} else circle.setRadius(rad);
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var circle;
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
title: "name"
});
// Add circle overlay and bind to marker
$('#customRange1').change(function() {
var new_rad = $(this).val();
var rad = new_rad * 1609.34;
if (!circle || !circle.setRadius) {
circle = new google.maps.Circle({
map: map,
radius: rad,
fillColor: '#555',
strokeColor: '#ffffff',
strokeOpacity: 0.1,
strokeWeight: 3
});
circle.bindTo('center', marker, 'position');
} else circle.setRadius(rad);
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" class="custom-range" id="customRange1" value="20">
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

Drawing a POLYGON from initial position

My problem is: I need to draw with mode POLYGON with a initial point, like a marker or another element. For example - JSFiddle Example
With marker:
var initialPosition = new google.maps.Marker({
position: {
lat: -22.397542,
lng: -46.884630
}
});
This position is given without any user interaction. How can I do that?
In my example, how can I draw a polygon starting from marker without click it, making marker position my first polygon point?
You could do the following: use addListenerOnce to detect a click on the map (only once). This will allow to create a Polygon that goes from your marker position, to where the user clicked, and back to the marker position.
By setting the editable property to true, you can then move each Polygon point separately, and add segments by dragging the existing segment(s) middle point(s).
Here is a working example:
function initialize() {
var myLatLng = new google.maps.LatLng(46.2, 6.17);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListenerOnce(map, 'click', function(e) {
var origin = marker.getPosition();
var coords = [
origin,
e.latLng,
origin,
];
var poly = new google.maps.Polygon({
map: map,
paths: coords,
editable: true,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
});
}
initialize();
#map-canvas {
height: 150px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

Google Maps Circle

I am trying to load data from an API then display it using circles. I am able to create markers with the data points but not circles. I am following this example here from Google's documentation.
What I expect to happen is in the for loop, using center: new google.maps.LatLng(well.location.latitude, well.location.longitude) would suffice to create the center points. However, that doesn't seem to work. Everything else is the same as the example (will modify later).
I expected this to work because earlier in the example, I am able to use $.each to display markers using field.location.latitude, field.location.longitude which is essentially the same thing (or so I think).
Can I not make circles within the $.getJSON function like I can with markers? Is it happening "out of sync"? I'm still trying to learn how to process async events.
Fiddle here.
HTML:
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="map"></div>
</body>
CSS:
#map {
border: 1px solid black;
margin: 0 auto;
width: 500px;
height: 300px;
}
JavaScript
var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
function addMarker(lat, lng) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
markers.push(marker);
//console.log(markers);
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
//console.log(data);
for (var i = 0; i < data.length; i++) {
//console.log(data[i].location.latitude + ", " + data[i].location.longitude);
};
$.each(data, function(i, field) {
addMarker(field.location.latitude, field.location.longitude);
});
for (var well in data) {
wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude,
well.location.longitude),
radius: 100000
});
};
});
});
data is an array, either iterate through it, or use $.each (or .forEach).
for (var i=0; i < data.length; i++) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
radius: 10000
});
};
or (like you did with the markers):
$.each(data, function(i, well) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude, well.location.longitude),
radius: 10000
});
});
code snippet:
var map;
var mapProp;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
$.each(data, function(i, well) {
var wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(well.location.latitude, well.location.longitude),
radius: 10000
});
});
});
});
body, html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#map {
border: 1px solid black;
margin: 0 auto;
width: 99%;
height: 99%;
}
<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"></div>
Your code for the markers was correct, but there are some items of your data that do not have a location property, that's why your code is not fully working.
If you want to add Circles instead of markers, you can use your $.each loop and simply check the location block before adding a point.
Here is a working example: http://jsfiddle.net/xb7eh58p/ (sorry, didn't use yours because I had not seen your link)
In details, here is your code that I adjusted:
var map;
var mapProp;
var url;
var marker;
var markers = [];
var infoWindow;
var wellCircle;
function initMap() {
mapProp = {
center: new google.maps.LatLng(39.0, -105.782067),
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
infoWindow = new google.maps.InfoWindow({
content: "hello world"
});
};
function addMarker(lat, lng) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
markers.push(marker);
};
$(document).ready(function() {
url = 'https://data.colorado.gov/resource/hfwh-wsgi.json?&$limit=500';
initMap();
$.getJSON(url, function(data) {
//console.log(data);
//for (var i = 0; i < data.length; i++) {
// console.log(data[i].location.latitude + ", " + data[i].location.longitude);
//};
$.each(data, function(i, field) {
if(field.location) {
wellCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(field.location.latitude,
field.location.longitude),
radius: 100000
});
} else {
console.log("Missing location for this data item");
}
});
});
});
As you can see, you just need to ckeck if(field.location)

Google Maps Engine API - KML Layers Obstructing New Markers Event

I am currently building out a small widget that allows someone to see a kml heat map of the united states population density then select an area on that map and drop a market on to that location. The user then enters a number and that creates a mile radius to show the user how much area they cover.
My problem is that I have 63 .kml files for just one state in the US. I know I can remove the xml <name> and <description> to prevent the name from popping up when clicked, but I can't see that being practical with that many .kml files.
Is there a programmatic solution or API solution to prevent just the kml layers from being clickable?
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
value: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
value: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
value: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
value: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(34.7361, -92.3311),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].value) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.census.gov/main/kml/countysubs_z6/AR/05003.xml'
});
ctaLayer.setMap(map);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
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?v=3.exp"></script>
<div id="map-canvas"></div>
Discretionary note: Google API does not work well with Stack Overflow's code snippet's widget.
set the KmlLayer clickable option to false
clickable boolean If true, the layer receives mouse events. Default value is true.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
value: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
value: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
value: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
value: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(34.7361, -92.3311),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].value) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.census.gov/main/kml/countysubs_z6/AR/05003.xml',
clickable: false
});
ctaLayer.setMap(map);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
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"></script>
<div id="map-canvas"></div>

Google Maps API v3 Hiding and showing a circle bound to a marker

I have successfully bound a circle to my marker using google map api v3. I know this because if I make the marker dragable the circle moves as well.
How can I refer to the circle if the marker is clicked. I need to show the circle if not visible or vice-versa.
Here is the code to create the marker and circle
var markerOptions = {
title: title,
icon: markerImage,
shadow: markerShadow,
position: latlng,
map: map
}
var marker = new google.maps.Marker(markerOptions);
// Add a Circle overlay to the map.
var circle = new google.maps.Circle({
map: map,
radius: 50*1609.34,// 50 MI
visible: false
});
//circle.bindTo('map', marker);
circle.bindTo('center', marker, 'position');
I found an answer on stackoverflow that led me to think I needed to do the rem'd out map binding as well the center binding, but that did not work.
Here is my click event for the marker.
google.maps.event.addListener(marker, "click", function() {
var infowindowOptions = {
content: html
}
var infowindow = new google.maps.InfoWindow(infowindowOptions);
cm_setInfowindow(infowindow);
infowindow.open(map, marker);
marker.setIcon(markerImageOut);
marker.circle({visible: true});
Any ideas. I need to interact with the bound circle of the marker that was just clicked or moused over.
One option is to make the circle a property of the marker (like ._myCircle), reference it in the click handler as marker._myCircle.
Add the circle as the _myCircle property of marker:
var circle = new google.maps.Circle({
map: map,
radius: 50*1609.34,// 50 MI
visible: false
});
circle.bindTo('center', marker, 'position');
marker._myCircle = circle;
To toggle it use something like (not tested):
if(marker._myCircle.getMap() != null) marker._myCircle.setMap(null);
else marker._myCircle.setMap(map);
var rad =".$this->conf['radius'] * 1000 ."; //convert km to meter
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,//map object
center: new google.maps.LatLng($corr_match[0], $corr_match[1]),//center of circle
radius: rad
};
var cityCircle = new google.maps.Circle(populationOptions);

Categories

Resources