Google Maps JS API v3 Single marker Multiple circles - google-maps-api-3

Screenshot: http://imageshack.us/a/img59/8541/72825985.png
The above result is delivered by multiple markers(with different radius) on same spot.
I would like to drag a single marker at one time, not multiple markers.
Second, the infowindow is made available for different radius.
Any help is greatly appreciated!
var locations = [
['US gov suggested', 1.8833, 102.7833, 5, 'green', 80000],
['agricultural contamination', 1.8833, 102.7833, 4, 'blue', 60000],
['Chernobyl_Exclusion_Zone (fallout)', 1.8833, 102.7833, 3, 'yellow', 30000],
['Fukushima evacuation zone', 1.8833, 102.7833, 2, 'red', 20000],
['emergency zone', 1.8833, 102.7833, 1, 'black', 5000]
];
and
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]),
draggable: true,
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 circle = new google.maps.Circle({
map: map,
fillColor:locations[i][4],
//fillOpacity:0.3,
//strokeColor:locations[i][4],
strokeOpacity:0.1,
//strokeWeight:1,
radius: locations[i][5] // 30 km
});
circle.bindTo('center', marker, 'position');
}
References:
Google Maps JS API v3 - Simple Multiple Marker Example
http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/circle-overlay/circle-overlay.html?r=67
http://plugins.svn.wordpress.org/google-maps-v3-shortcode-multiple-markers/trunk/

Create as much circles as you want to and bind the center-property of each circle to the position-property of the marker by using the method bindTo() of the circles

var infowindow = new google.maps.InfoWindow()
var marker, i;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[0][1], locations[0][2]),
draggable: true,
map: map
});
for (i = 0; i < locations.length; i++) {
var circle = new google.maps.Circle({
map: map,
clickable:true,
fillColor:locations[i][4],
//fillOpacity:0.3,
//strokeColor:locations[i][4],
strokeOpacity:0.1,
//strokeWeight:1,
radius: locations[i][5] // 30 km
});
circle.bindTo('center', marker, 'position');
Secondly, it not easy to add infowindow for multiple circle overlays. Any ideas or hints? For example, http://img443.imageshack.us/img443/8198/overlap.jpg
Reference:google maps v3 adding an info window to a circle

Related

How to disable Google Map MouseOver

I am making an aspx page to track vehicles. The only thing I am sticking with is that I don't know how to remove tooltip text from google markers.
The data is displaying correctly.
In the image above, (1) is being shown when I am taking my cursor on marker image and (2) is coming when I am clicking on the marker.
I want to hide (1). How to do that?
I am using the following code:
function initMap() {
var image = '../images/FireTruck.png';
var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: image
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.title);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
Don't set the title property of the marker (that is what sets the tooltip).
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title, // <<<<<<<<<<<<<<<<<< REMOVE THIS
icon: image
});

How to get true centerpoint of offset marker

I don't think this has been asked before - I can't find any answers to this through searching SO and Google, and I find this sort of odd so maybe I'm overlooking something..
Anyways, I am creating a pretty standard series of markers based on lat/lng coordinates, although very often the markers will "stack" on top of each other, since they are at the same lat/lng coordinates. We aren't looking to cluster the markers when this happens, we are offsetting them instead so they appear side by side.
The problem I'm having though, is when I call marker.getPosition to get the lat/lng object of the marker's position, it isn't taking into account the offset. It's giving the original lat/lng coordinates of the centerpoint of where the marker was placed before it was offset.
Is there a way I can find the TRUE centerpoint of a marker, taking its offset into account? I know what the offset is in pixels, if that helps.
Here's a code snippet of what I'm doing
var marker = new google.maps.Marker({
map: obj.map,
position: latlng,
icon: {
url: obj.icon,
size: new google.maps.Size(72, 72),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(obj.offset_x, obj.offset_y),
scaledSize: new google.maps.Size(25, 25)
},
title: obj.title,
zIndex: obj.zIndex
});
var latlng = marker.getPosition();
So when I do
var lat = latlng.lat();
var lng = latlng.lng();
it seems like I get the position of the marker, and not the offset position of the icon that represents the marker. Does anyone know how I can get the offset position of the icon as a latlng object?
You can compute the position:
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var markerPt = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
var point = new google.maps.Point(markerPt.x - obj.offset_x + 12.5, markerPt.y - obj.offset_y + 25);
proof of concept fiddle
code snippet:
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var obj = {
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
offset_x: 100,
offset_y: 50,
title: "marker",
zIndex: 0
}
var latlng = {
lat: 37.4419,
lng: -122.1419
};
var marker = new google.maps.Marker({
map: obj.map,
position: latlng,
icon: {
url: obj.icon,
size: new google.maps.Size(72, 72),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(obj.offset_x, obj.offset_y),
scaledSize: new google.maps.Size(25, 25)
},
title: obj.title,
zIndex: obj.zIndex
});
var center = new google.maps.Marker({
map: map,
position: latlng,
icon: "http://maps.google.com/mapfiles/ms/micons/green.png",
title: "center",
draggable: true
});
google.maps.event.addListener(overlay, "projection_changed", function() {
// if (!overlay.getProjection()) return;
var markerPt = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
console.log("markerPt=" + markerPt.toString());
// extra offset to bottom middle of marker (12.5, 25)
var point = new google.maps.Point(markerPt.x - obj.offset_x + 12.5, markerPt.y - obj.offset_y + 25);
console.log("point=" + point.toString());
var latLng = overlay.getProjection().fromDivPixelToLatLng(point);
console.log("latLng=" + latLng.toUrlValue(6));
var newMark = new google.maps.Marker({
map: map,
position: latLng,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
}
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(newMark.getPosition().toUrlValue(6));
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -25)
});
infowindow.setPosition(newMark.getPosition());
infowindow.open(map);
});
var latlng = marker.getPosition();
console.log("latlng=" + latlng.toUrlValue(6));
var infowindow = new google.maps.InfoWindow();
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Show data for individual marker in Google Maps API markerclusterer

How can you show data for individual markers?
I am able to show custom data when a mouseover occurs on a Google Maps API markerclusterer cluster but can't work out how to do the same for an individual marker (i.e. when you zoom in to a cluster until you see individual markers).
The code which shows data for the clusters is:
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
google.maps.event.addDomListener(window, 'load', initialize);
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < numItemsToShow; ++i) {
var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long);
var marker = new google.maps.Marker({
position: latLng,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom == -1 ? null : zoom;
size = size == -1 ? null : size;
style = style == -1 ? null: style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
// Respond to mouseover on marker cluster
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(markerClusterer, 'mouseover', function (cluster) {
// do something with this cluster ...
infoWindow.setContent("Mouseover<br>"+cluster.getCenter().toUrlValue());
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(map);
});
// HOW TO RESPOND TO MOUSEOVER ON INDIVIDUAL MARKER?
}
Add a click listener to the google.maps.Marker objects:
var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long);
var marker = new google.maps.Marker({
position: latLng,
icon: markerImage
});
// slightly modified from Google Maps JS API v3 - Simple Multiple Marker Example
// http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(ItemsToShow[i].lat+","+itemsToShow[i].long);
infowindow.open(map, marker);
}
})(marker, i));

How to catch if google maps infowindow if it overlays other?

I have a polyline on which i need to show each points coordinates, but the problem is that each info-window overlays other so i decided to draw only those info-windows which doesnt overlay others, but don't have any idea how to catch it...
Currently i have
window.onload = function() {
var bounds = new google.maps.LatLngBounds();
var coordinates = [];
map = new google.maps.Map(document.getElementById('map_canvas'), {mapTypeId: google.maps.MapTypeId.HYBRID});
for (i = 0, len = points.point.length; i < len; i++) {
var tmp_coor = new google.maps.LatLng(points.point[i].lat, points.point[i].lon);
coordinates.push(tmp_coor);
bounds.extend(tmp_coor);
var infowindow = new google.maps.InfoWindow({
content: points.point[i].lat + ', ' + points.point[i].lon,
maxWidth: 120
});
infowindow.setPosition(tmp_coor);
infowindow.open(map);
}
var polyline = new google.maps.Polyline({
path: coordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false
});
polyline.setMap(map);
map.fitBounds(bounds);
}
It creates
So maybe someone has any suggestions on this problem?

Problems in Creating InfoWindow on each individual circle with mouseover using Google Map API

I am having problems using Google Map API.
I want to plot circles on the map and create mouseover event on each circle to open an infowindow displaying the time value.
First problem is the infowindow content does not change for different circles.
Second problem is infowindow does not pop up for some reason.
Can someone help please?
Thanks
Codes are as followings:
function initialize() {
data={};
data[0]={
center: new google.maps.LatLng(51.49799,-0.196145),
population: 1000,
time:"2013-03-01T03:31:18Z"
};
data[1]={
center: new google.maps.LatLng(51.496294,-0.188184),
population: 1000,
time:"2013-03-01T13:21:15Z"
};
data[2]={
center: new google.maps.LatLng(51.497817,-0.178313),
population: 1000,
time:"2013-03-04T04:03:50Z"
};
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.494438, -0.188907),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var movingColour= '#FF0000';
var counter=0;
for (var city in data) {
// Construct the circle for each value in citymap. We scale population by 20.
//movingColour=ColorLuminance(movingColour, -0.005) ;
var populationOptions = {
strokeOpacity: 0.35,
strokeWeight: 2,
strokeColor:movingColour,
fillColor:movingColour ,
fillOpacity: 0.35,
map: map,
clickable:true,
center: data[city].center,
radius: data[city].population / 20
};
var circle = new google.maps.Circle(populationOptions);
var infowindow =new google.maps.InfoWindow({
content: data[city].time
});
google.maps.event.addListener(circle, 'mouseover', function(ev) {
alert(infowindow.content);
infowindow.open(map,circle);
});
counter++;
}
google.maps.event.addDomListener(window, 'load', initialize);
}
This is a common problem usually seen with InfoWindows on markers and can be solved a number of ways. The InfoWindow isn't opening because the optional second parameter of .open can only be a marker, without that, you need to set the position at which the marker should open. I usually use function closure to solve the InfoWindow content problem (there are other ways):
function initialize() {
data={};
data[0]={
center: new google.maps.LatLng(51.49799,-0.196145),
population: 1000,
time:"2013-03-01T03:31:18Z"
};
data[1]={
center: new google.maps.LatLng(51.496294,-0.188184),
population: 1000,
time:"2013-03-01T13:21:15Z"
};
data[2]={
center: new google.maps.LatLng(51.497817,-0.178313),
population: 1000,
time:"2013-03-04T04:03:50Z"
};
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.494438, -0.188907),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var movingColour= '#FF0000';
var counter=0;
for (var city in data) {
var populationOptions = {
strokeOpacity: 0.35,
strokeWeight: 2,
strokeColor:movingColour,
fillColor:movingColour ,
fillOpacity: 0.35,
map: map,
clickable:true,
center: data[city].center,
radius: data[city].population / 20
};
var circle = new google.maps.Circle(populationOptions);
createClickableCircle(map, circle, data[city].time);
counter++;
}
google.maps.event.addDomListener(window, 'load', initialize);
}
function createClickableCircle(map, circle, info){
var infowindow =new google.maps.InfoWindow({
content: info
});
google.maps.event.addListener(circle, 'mouseover', function(ev) {
// alert(infowindow.content);
infowindow.setPosition(circle.getCenter());
infowindow.open(map);
});
}
(you probably want to add a listener to close the InfoWindow.)
I rewrite a bit of your javascript to have better syntax and named variables which you had forgotten to define with var.
For example to define data={}; use var data=[]; since I can see below that you use it as an array containing objects. I also made a fix which stops flickering effect when you are moving your cursor over circles which has infowindow already opened:
// To stop flickering.. we wont reopen until necessary
// We open only if position has been changed or infowindow is not visible
if(infowindow.getPosition() !== this.getCenter() || infowindowClosed === true) {
// this can be used to access data values
infowindow.setContent(this.data.time);
infowindow.setPosition(this.getCenter());
infowindow.open(map);
infowindowClosed = false;
}
Other enhancements includes defining few of your variables as global above your initialize(); method, cheers.
Check out working fiddle with comments.

Resources