I'm quite new to MVC and am not sure how to put this question forward.
Basically, I have a view with couple of panels; one for gridview, another for google map.
subpane.Panes.Add(mapPane =>
{
mapPane.Name = "MapPane";
mapPane.PaneStyle.CssClass = "mapPane";
mapPane.SetContent(() =>
{
Html.RenderPartial("GoogleMapPartialView");
});
});
subpane.Panes.Add(bodyPane =>
{
bodyPane.Name = "BodyPane";
bodyPane.PaneStyle.CssClass = "contentPane";
bodyPane.SetContent(RenderBody().ToHtmlString());
});
Based on the data selection in BodyPane, I would like to add marker in mapPane. So am calling this function in BodyPane :
function OnGridFocusedRowChanged(s, e) {
s.GetRowValues(s.GetFocusedRowIndex(), 'SiteID;Latitude;Longitude', OnGetRowValues);
alert(SiteID);
}
And following is code of GoogleMapPartialView
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function () {
initialize();
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-6.27845, 107.094),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
// create a marker
var latlng = new google.maps.LatLng(-6.27845, 107.094);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'My Place'
});
}
function showMarker(title, lat, long) {
map.clear;
var latlng = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title
});
}<code></code>
</script>
<div id="map_canvas" class="mapPanel">
</div>
Am not sure how to call this function, so that based on record selection in my gridview, I can show respective location in google map.
Since both are on same page, I thought maybe calling this within BodyPane should work, but it doesn't.
function OnGetRowValues(values) {
showMarker(values[0], values[1], values[2]);
}