View Full Version : Problem with displaying markers in GMap

Feb 14th, 2011, 08:47 AM
Hello There,

Problem with displaying markers in GMap.
I am calling Initialize function on button click.
I am able to see the markers first time but when i click on button second time I am able to see the map but not the markers.

It happens only if i use Update Panel.
Without update panel its working fine

Here is the code
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAWeev7HEV02ov7e5Kpd96MBS1jJeh-b910mGj746RjAJZdus-NxQqoAWgHax5gmv7-TSITgGeqVWamw"

//On button click call this function
<script type="text/javascript">
function initialize(lat, long) {

// Create new map object
var map = null;
map = new GMap2(document.getElementById("map_canvas"));
var point = new GLatLng(lat, long);

// Set map center location
map.setCenter(point, 11);

// Add Map Controls
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

// Create our "tiny" marker icon
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png";

// Set up our GMarkerOptions object
markerOptions = { icon: blueIcon };
map.addOverlay(new GMarker(point, markerOptions));
var gridViewCtlId = '<%=gvStores.ClientID%>';
var gvET = document.getElementById(gridViewCtlId);
var rCount = gvET.rows.length;
var rowIdx = 1;
for (rowIdx; rowIdx <= rCount 1; rowIdx++) {
var rowElement = gvET.rows[rowIdx];
var gridCell1 = rowElement.cells[0];
var gridCell2 = rowElement.cells[1];
var gridCell3 = rowElement.cells[2];
var gridCell4 = rowElement.cells[3];
var gridCell5 = rowElement.cells[4];

var address = '<div style="width: 210px; padding-right: 10px">' + gridCell3.getElementsByTagName("input")[0].value + '<br>' + gridCell4.getElementsByTagName("input")[0].value + ', ' + gridCell5.getElementsByTagName("input")[0].value + '<\/a>.<\/div>';

PlaceMarker(gridCell1.getElementsByTagName("input")[0].value, gridCell2.getElementsByTagName("input")[0].value, address, map);



function PlaceMarker(lat, long, address, map) {

// Retrieve the latitude and longitude
point = new GLatLng(lat,long);

// Create a marker
var marker = new GMarker(point);

//alert(new Date().getTime());
marker.ID = new Date().getTime();

GEvent.addListener(marker, "click", function () {



// Add the marker to map

<asp:UpdatePanel runat="server" ID="Apnl" UpdateMode="Conditional">
<div id="map_canvas" style="border: 1px solid #979797; background-color: #e5e3df;
width: 100%; height: 450px; margin: auto; margin-top: 2em; margin-bottom: 2em">
<div style="padding: 1em; color: gray">

<asp:GridView ID="gvStores" runat="server" AutoGenerateColumns="False" Width="100%" Visible="true">

<asp:TemplateField HeaderText="Latitude" Visible="true">
<input type="text" id="lblLatitude" runat="server" value='<%# Eval("Latitude")%>' />

<asp:TemplateField HeaderText="Longitude">
<input type="text" id="lblLongitude" runat="server" value='<%# Eval("Longitude")%>' />
<HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="60px" />

<asp:TemplateField HeaderText="City" Visible="true">
<input type="text" id="lblCity" runat="server" value='<%# Eval("City")%>' />

<asp:TemplateField HeaderText="Address1" Visible="true">
<input type="text" id="lblAddress1" runat="server" value='<%# Eval("Address1")%>' />

<asp:TemplateField HeaderText="PostalCode" Visible="true">
<input type="text" id="lblPostalCode" runat="server" value='<%# Eval("PostalCode")%>' />

<asp:ImageButton ID="btnFind" CausesValidation="false" runat="server" OnClick="btnFind_Click"

ImageUrl="../Image/BtnFind.jpg" />