Develop Reference

How to get asp.net mvc controller to talk with google maps api - Adding markers dynamically

I am working with the Google Maps API. I have the map displaying on my page, I can add markers to it manually, everything is working correctly.
Now I need to build a marker list from mvc and figure out how to pass it back to the map through asp.net MVC. Everything I need for the marker list is contained in the dtDealer_List shown below.
foreach (DataRow row in dtDealer_List.Rows)
{
dealer_list dl = new dealer_list();
dl.address = row["address"].ToString();
.......
lstDealer_List.Add(dl);
}
I'm not sure on how to pass this list back to the javascript function.
function init_map(map_canvas_id, lat, lng, zoomLevel) {
var myLatLng = new google.maps.LatLng(lat, lng);
var options = {
zoom: zoomLevel,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map_canvas = document.getElementById(map_canvas_id);
var map = new google.maps.Map(map_canvas, options);
}
Do I need to pull out the dtDealer_List into a ajax call or something?

add a small script at the top of your page to set up a javascript array from your list:
#model List<string>
<script>
var addresses = [];
#foreach (var address in Model)
{
<text>addresses.push('#address')</text>
}
console.log(addresses);
</script>
then you should be able to access the global addresses array where you need

MarkClusterer map issue: find nearest latitude/longitude

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)

Dynamic javascript C# Google Chart

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>

Google Maps - Secure the value of the LatLng

I need to secure the values of LatLng that are used to draw lines on a Google Map since I have some work that I did and I don't want anybody to copy it ..
Are the points used to draw the lines visible to anyone to see it and copy it or it is eventually secured?
I draw the Lines in the success function of an ajax call:
var position = new google.maps.LatLng(x, y);
var myOptions = {
zoom: 11,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("googlemap"),
myOptions);
$.ajax({
type: "GET",
dataType: "json",
url: url,
success: function (data) {
$.each(data, function () {
$.each(this, function (index, Segment) {
$.each(Segment, function () {
for (var i = 0; i < Segment.X.length - 1; i++) {
var line = new google.maps.Polyline({
path: [new google.maps.LatLng(Segment.Y[i], Segment.X[i]), new google.maps.LatLng(Segment.Y[i + 1], Segment.X[i + 1])],
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
}
});
});
});
}
});
So is the point copyable for the fact that it is drawn in the client side ?

You can't secure the points as long as you render the line on clientSide. As soon as you create a polyline this polyline is accessible and the path can be retrieved(no matter if you encrypt the JSON somehow).
The only approach I see so far is a serverside rendering, e.g. an image containing the line as overlay or a FusionTableLayer(created from a fusionTable with private access)

Yes, client-side code is by its nature insecure and copyable. For instance you make an AJAX request for a specific URL, which will return some JSON with a series of points. If someone else accessed that URL directly, they'd be able to get the points from that same JSON.

How to implement Google Maps in my page using C#

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/