Display multiple marker point on Google Map with same location or same Longitude,Latitude
Display multiple marker point on Google Map with same location or same Longitude, Latitude
<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
<!-- For Google Map Style Sheet-->
<style type="text/css">
#map_canvas
{
height: 450px;
width: 980px;
}
.infowindow
{
font-size: 12px;
width: 200px !important;
font-family: verdana;
}
@media print
{
#map_canvas
{
height: 950px;
}
}
</style>
<!-- For Google Map-->
<script src="http://maps.google.com/maps/api/js?v=3.7&sensor=false" type="text/javascript"></script>
<!--downlaod the oms.min.js javascript file from https://github.com/jawj/OverlappingMarkerSpiderfier -->
<script src="JS/oms.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
//zoom: 5,
//set maximum zoom level
maxZoom: 6,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var gm = google.maps;
var map = new gm.Map(document.getElementById('map_canvas'), mapOptions);
var iw = new gm.InfoWindow();
var oms = new OverlappingMarkerSpiderfier(map,
{ markersWontMove: true, markersWontHide: true });
var usualColor = 'FF776B';
var spiderfiedColor = 'ffee22';
var iconWithColor = function (color) {
return 'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' +
color + '|000000|ffff00';
}
var shadow = new gm.MarkerImage(
'https://www.google.com/intl/en_ALL/mapfiles/shadow50.png',
new gm.Size(37, 34), // size - for sprite clipping
new gm.Point(0, 0), // origin - ditto
new gm.Point(10, 34) // anchor - where to meet map location
);
oms.addListener('click', function (marker) {
iw.setContent(marker.desc);
iw.open(map, marker);
});
oms.addListener('spiderfy', function (markers) {
for (var i = 0; i < markers.length; i++) {
markers[i].setIcon(iconWithColor(spiderfiedColor));
markers[i].setShadow(null);
}
iw.close();
//set bubble collapse or not
oms.keepSpiderfied = true;
});
oms.addListener('unspiderfy', function (markers) {
for (var i = 0; i < markers.length; i++) {
markers[i].setIcon(iconWithColor(usualColor));
markers[i].setShadow(shadow);
}
});
var bounds = new gm.LatLngBounds();
for (var i = 0; i < window.mapData.length; i++) {
var datum = window.mapData[i];
var loc = new gm.LatLng(datum.lat, datum.lon);
bounds.extend(loc);
var marker = new gm.Marker({
position: loc,
title: datum.h,
map: map,
icon: iconWithColor(usualColor),
shadow: shadow
});
marker.desc = datum.d;
oms.addMarker(marker);
}
map.fitBounds(bounds);
// for debugging/exploratory use in console
window.map = map;
window.oms = oms;
}
</script>
<!-- End Google Map-->
</head>
<body>
<table>
<tr>
<td>
<!-- sub page data section start from here-->
<table >
<tr>
<td class="map">
<div id="map_canvas">
</div>
<asp:HiddenField ID="hfcluster" runat="server"></asp:HiddenField>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
// randomize some overlapping map data -- more normally we'd load some JSON data instead
var baseJitter = 2.5;
var clusterJitterMax = 0.1;
var rnd = Math.random;
var data = [];
//store the Longitude,Latitude,TotalNoOfRecords for same Longitude Latitude,Address
var loc = document.getElementById("hfcluster").value;
var langlatarray = loc.split("|");
for (var i = 0; i < langlatarray.length; i++) {
var arrlanglat = langlatarray[i].toString().split("%");
//Get Longitude
var baseLon = arrlanglat[0];
//Get Latitude
var baseLat = arrlanglat[1];
//Get TotalNoOfRecords
var totalcount = arrlanglat[2];
//Get Address example <div class='infowindow'> Address on click of marker point</div>
var address = arrlanglat[3];
var clusterJitter = clusterJitterMax * rnd();
for (var j = 0; j < totalcount; j++) data.push({
// lon: baseLon - clusterJitter + rnd() * clusterJitter,
// lat: baseLat - clusterJitter + rnd() * clusterJitter,
lon: baseLon,
lat: baseLat,
//used fro tooltip
h: address,
//used to display the in popup
d: address
});
}
window.mapData = data;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
<!-- For Google Map Style Sheet-->
<style type="text/css">
#map_canvas
{
height: 450px;
width: 980px;
}
.infowindow
{
font-size: 12px;
width: 200px !important;
font-family: verdana;
}
@media print
{
#map_canvas
{
height: 950px;
}
}
</style>
<!-- For Google Map-->
<script src="http://maps.google.com/maps/api/js?v=3.7&sensor=false" type="text/javascript"></script>
<!--downlaod the oms.min.js javascript file from https://github.com/jawj/OverlappingMarkerSpiderfier -->
<script src="JS/oms.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
//zoom: 5,
//set maximum zoom level
maxZoom: 6,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var gm = google.maps;
var map = new gm.Map(document.getElementById('map_canvas'), mapOptions);
var iw = new gm.InfoWindow();
var oms = new OverlappingMarkerSpiderfier(map,
{ markersWontMove: true, markersWontHide: true });
var usualColor = 'FF776B';
var spiderfiedColor = 'ffee22';
var iconWithColor = function (color) {
return 'http://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' +
color + '|000000|ffff00';
}
var shadow = new gm.MarkerImage(
'https://www.google.com/intl/en_ALL/mapfiles/shadow50.png',
new gm.Size(37, 34), // size - for sprite clipping
new gm.Point(0, 0), // origin - ditto
new gm.Point(10, 34) // anchor - where to meet map location
);
oms.addListener('click', function (marker) {
iw.setContent(marker.desc);
iw.open(map, marker);
});
oms.addListener('spiderfy', function (markers) {
for (var i = 0; i < markers.length; i++) {
markers[i].setIcon(iconWithColor(spiderfiedColor));
markers[i].setShadow(null);
}
iw.close();
//set bubble collapse or not
oms.keepSpiderfied = true;
});
oms.addListener('unspiderfy', function (markers) {
for (var i = 0; i < markers.length; i++) {
markers[i].setIcon(iconWithColor(usualColor));
markers[i].setShadow(shadow);
}
});
var bounds = new gm.LatLngBounds();
for (var i = 0; i < window.mapData.length; i++) {
var datum = window.mapData[i];
var loc = new gm.LatLng(datum.lat, datum.lon);
bounds.extend(loc);
var marker = new gm.Marker({
position: loc,
title: datum.h,
map: map,
icon: iconWithColor(usualColor),
shadow: shadow
});
marker.desc = datum.d;
oms.addMarker(marker);
}
map.fitBounds(bounds);
// for debugging/exploratory use in console
window.map = map;
window.oms = oms;
}
</script>
<!-- End Google Map-->
</head>
<body>
<table>
<tr>
<td>
<!-- sub page data section start from here-->
<table >
<tr>
<td class="map">
<div id="map_canvas">
</div>
<asp:HiddenField ID="hfcluster" runat="server"></asp:HiddenField>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
// randomize some overlapping map data -- more normally we'd load some JSON data instead
var baseJitter = 2.5;
var clusterJitterMax = 0.1;
var rnd = Math.random;
var data = [];
//store the Longitude,Latitude,TotalNoOfRecords for same Longitude Latitude,Address
var loc = document.getElementById("hfcluster").value;
var langlatarray = loc.split("|");
for (var i = 0; i < langlatarray.length; i++) {
var arrlanglat = langlatarray[i].toString().split("%");
//Get Longitude
var baseLon = arrlanglat[0];
//Get Latitude
var baseLat = arrlanglat[1];
//Get TotalNoOfRecords
var totalcount = arrlanglat[2];
//Get Address example <div class='infowindow'> Address on click of marker point</div>
var address = arrlanglat[3];
var clusterJitter = clusterJitterMax * rnd();
for (var j = 0; j < totalcount; j++) data.push({
// lon: baseLon - clusterJitter + rnd() * clusterJitter,
// lat: baseLat - clusterJitter + rnd() * clusterJitter,
lon: baseLon,
lat: baseLat,
//used fro tooltip
h: address,
//used to display the in popup
d: address
});
}
window.mapData = data;
</script>
</body>
</html>
Hello I have get these two errors when it implemented.
ReplyDelete1.Uncaught TypeError: Cannot call method 'split' of undefined
2. demo.html:85Uncaught TypeError: Cannot read property 'length' of undefined
Anupama,
Deletecan you store the values in hfcluster hidden field? i have stored the Longitude ,Latitude,total number of records and address in hfcluster hidden filed after that i split it according to our need such as
30.532145%-57.24560%4%3050 new jersey USA
|31.532145%-58.24560%4%3052 new newyork USA
1. you cand do first check loc is not null or not blank
2. and change the code according to your need from this var loc = document.getElementById("hfcluster").value; point
Thank you for your reply. Now am hard-coded value as var loc = "47.92227%-97.0738712%4%3050 USA|"; this.
DeleteBut I didn't get any thing.
Hello
DeleteIt worked correctly for me.. Thank you :)
No.. I didn't store the values. Can you give me the format of hfcluster hidden field?
ReplyDeleteHello Anupma,
Deleteplease correct the below code in google map.
comment or remove the below code
// lon: baseLon - clusterJitter + rnd() * clusterJitter,
// lat: baseLat - clusterJitter + rnd() * clusterJitter,
and add the below code
lon: baseLon,
lat: baseLat,