I am using Markclusterer extension with Google Map API v3 and i ran into certain trouble, The map shows perfectly and also the cluster works but my problem is that certain address share the same Longitude and latitude hence groups the address and show the number of address as a group but i cannot zoom any further into the group. I have tried to increase the zoom but that did not help. Any ideals or solution would be appreciated thanks.
var map;
var markers = new Array();
var locations = new Array();
var infowindow = new google.maps.InfoWindow();
function initialize() {
var center = new google.maps.LatLng(<%= GetCenterLatLng() %>);
// var center = new google.maps.LatLng(52.6500, 1.2800);
var infowindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
initialiseMarkers();
var mcOptions = { gridSize: 50, maxZoom: 15 };
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
}
function addMarker(marker, content) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(content); // this is the trick: html attribute on markerOptions :), I used a array here
infowindow.open(map, this);
});
}
<script type="text/javascript">
var script = '<script type="text/javascript" src="../Scripts/markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
if you have any question please contact me thanks
After days of cranking my brain and maybe some sleepless night. The solution was to group address that contain the same longitude and latitude as one marker and on click it shows all the address within the same vicinity on the popup window(infoWindow)
Related
I'm writing a program with AmMaps where I want a user to click on a map of a country, and to be able to select and save locations.
I'm stuck on getting data back after the user clicks on the map. I used the "clickMapObject" event on another page, but in this case they aren't clicking anything.
<script>
var map;
$(document).ready(function () {
map = new AmCharts.AmMap();
map.pathToImages = "ammap/images/";
var dataProvider = {
mapVar: AmCharts.maps.irelandHigh,
getAreasFromMap: false,
};
map.dataProvider = dataProvider;
map.areasSettings = {
autoZoom: false,
color: "#CDCDCD",
colorSolid: "#5EB7DE",
selectedColor: "",
outlineColor: "#666666",
rollOverColor: "#88CAE7",
rollOverOutlineColor: "#FFFFFF",
selectable: false,
};
map.addListener("click", click);
map.write("mapdiv");
function click() {
//Can i get long and lat here?
};
});
</script>
I didn't use this map control, but I ever used google map, so I think maybe you can try this:
map.addListener("click", function (e) {
//get lat and lng from e object
var latLng = e.latLng;
});
Ok, I found it.
Code:
map.addListener("click", function (event) {
var s = map.getDevInfo();
// then you can access s.Longitude or zoomLongitude
});
I am displaying google map on my asp.net page using jquery.I have Nation name,company name,Address and Longitude and latitude.
Right now i have add all addresses in dropdown,on the basis of dropdown selection i have passed longitude and latitude in code.this part is working as it display map on the basis of latitude and longitude.But i have no longitude and latitude for some comapnies.So i want to use directly address of comapnies to display map.
Here is the code that i have used:
<script src="js/jquery/jquery-1.9.0.min.js"></script>
<!-- <msdropdown> -->
<link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" />
<script src="js/msdropdown/jquery.dd.js"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
</script>
</head>
<body onload="initialize()">
<select id="countries" style="width:300px;" onchange="updateMap(this.options[this.selectedIndex].value)">
<option value='TVSH - Rruga Ismail Quemali 11>TVSH - Rruga Ismail Quemali 11, Tirana</option></select>
function updateMap(selectControl) {
alert(selectControl);
switch (selectControl) {
case 'TVSH - Rruga Ismail Quemali 11, Tirana':
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(41.321102, 19.823112)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
var latLng = new google.maps.LatLng(41.321102, 19.823112)
break;
default:
break;
}
initialize(polyline, latLng);
}
function initialize(polyline, schoolLatLng) {
var myLatLng = schoolLatLng;
var myOptions = {
zoom: 13,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
polyline.setMap(map);
}
Now map is displaying on the basis of latitude and longitude.Is there any way so i can directly show map on the basis address.I have address of all comapnies like this:EURONEWS - 60, chemin des Mouilles - 69130 Lyon-Écully, France
Can i show map on the base of this address.Please ask me more description if you need.
You can do something like:
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': 'chemin des Mouilles - 69130 Lyon-Écully, France'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
But watch out cause the geocoder is asynchronous.
https://developers.google.com/maps/documentation/javascript/geocoding
Or you could check these 2 services for alternatives. I have most of the data printing out that they send back to you, just hit the find me button. But pull your console up to see it all.
Codepen.io Example
You can use Geocoding API, the API purpose is exactly the transformation of an adress into coordinates, then with this coordinates you can render the map, as you already did.
Example:
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode({
address: 'chemin des Mouilles - 69130 Lyon-Écully, France'
}, function(locResult) {
var lat1 = locResult[0].geometry.location.lat();
var lng1 = locResult[0].geometry.location.lng();
});
I am trying to display a google chart with dynamic data when my page loads. For clarification I'm using webMatrix (asp.net, c#, sql db).
I have c# codebehind which is querying my main database every 5 minutes and storing the data in a server database "Target".
My goal is to use "Target" as the datasource for the google chart. I'm really confused by the google chart documentation because all of the examples are showing javascript code with hardcoded data. How can I manipulate the javascript so that it contains my dynamic data?
<script>
function initialize() {
var db = 'Target'
var query = new google.visualization.Query(db);
query.setQuery('select Problem group by Queue');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, {width: 400, height: 240, is3D: true});
}
</script>
I was able to figure this one out...
I didn't realize that razor syntax allows codebehind variables within a script.
C#
{
int a = 100;
int b = 350;
}
Javascript
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
dataArray = [];
dataArray[0] = ['0', 'Title1', 'Title2'];
dataArray[1] = ['Element 1', #a, 0];
dataArray[2] = ['Element 2', 0, #b];
function drawChart() {
//var dt = new google.visualization.DataTable();
//dt.addRows(data);
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
title: 'Tickets',
vAxis: { titleTextStyle: { color: 'red'} },
backgroundColor: 'lightgray'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
I want to add multiple markers on a map. The amount is variable (one to a few hundred)
Which is the best solution?
Producing a kml file with the coordinates
Using javascript and creating via (in my case) c# a lot of marker
variables
another way i didn't think of
Thank you very much
Clustering!
See this page: https://developers.google.com/maps/articles/toomanymarkers
I use this solution in my actual project.
Example:
var latlng = new google.maps.LatLng(-17.308688,-49.495605);
var myLatlng, marker, marker_cluster;
var markers = [];
var mapOptions = {
zoom: 4,
minZoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: '#f0f0f0'
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.each(itens, function (k, iten) {
myLatlng = new google.maps.LatLng(iten.lat, iten.lng);
marker = new google.maps.Marker({
position: myLatlng,
title: iten.title
});
markers.push(marker);
});
marker_cluster = new MarkerClusterer(map, markers);
I want to implement the google map in my page. In my page there is one textbox and one button. User need to enter the location for which he want to have the map. Then on clicking of the button the map should appear in a div.
Could anyone provide me the steos to do so?
Thanks in advance.
This is quite easy if you use the google api js file. As a reference you can use this link:
http://code.google.com/apis/maps/documentation/javascript/reference.html
Add the jQuery and GoogleMaps API library in the HEAD section:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Add new tag to create the google maps object in the div:
var geocoder;
var map;
$(document).ready(function() {
/* Create the geocoder */
geocoder = new google.maps.Geocoder();
/* Some initial data for the map */
mapOptions = {
zoom: 10,
center: new google.maps.LatLng(48.13, 13.58),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
};
Add on click handler for the button:
$('#idMyButton').click(function() {
if (geocoder) {
var address = $('#idMyTextbox').val();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
/* Position the map */
map.panTo(results[0].geometry.location);
/* Put a marker */
new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: address,
});
}
else
alert('Address not found');
};
}
});
I hope this will help.
You some C# control for .NET, for example this one: http://sourceforge.net/projects/gmapdotnetctl/