I added a google map with two markers (i am just testing), the code is:
function load() { var map = new GMap2(document.getElementById('map')); var marker = new GMarker(new GLatLng(<%=coordinates%>)); var marker2 = new GMarker(new GLatLng(31.977211,35.951729)); var html='<%=maptitle%><br/>' + '<%=text%>'; var html2='<img src='simplemap_logo.jpg' width='20' height='20'/> ' + '<%=maptitle%><br/>' + '<%=text%>' + 'Alper'; map.setCenter(new GLatLng(<%=coordinates%>), 5); map.setMapType(G_HYBRID_MAP); map.addOverlay(marker); map.addOverlay(marker2); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl()); marker.openInfoWindowHtml(html); marker2.openInfoWindowHtml(html2); }
The problem is, only one markers text is showing (the white triangle with text inside it) the other is not visible, why? Another thing, i have a table of Maps, its like: mapID, mapCoordinates, mapMarkerTitle, mapMarkerText, i can retrieve this table, but i want a way to be able to pass all its records to my javascript and create a Marker for each Map i have in my table, i know this is two much, but can anyone suggest or help me with the code? as i know nothing about javascript 😀
The HTML OUTPUT is:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head><title> Untitled Page </title> <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAANgu3GlobW5KtQorgXrnJ_xTHM4EYhrvsce8mdg4KdiCoPfCQKxSOZ_5sjy4O31twg6cxfZqam24TCw' type='text/javascript'></script> <script type='text/javascript'> function load() { var map = new GMap2(document.getElementById('map')); var marker = new GMarker(new GLatLng(32.523251,35.816068)); var marker2 = new GMarker(new GLatLng(31.977211,35.951729)); var html='maen<br/>' + ' maen tamemi'; var html2='<img src='simplemap_logo.jpg' width='20' height='20'/> ' + 'maen<br/>' + ' maen tamemi' + 'Alper'; map.setCenter(new GLatLng(32.523251,35.816068), 5); map.setMapType(G_HYBRID_MAP); map.addOverlay(marker); map.addOverlay(marker2); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl()); marker2.openInfoWindowHtml(html2); marker.openInfoWindowHtml(html); } //]]> </script> <script type='text/javascript'> function pageLoad() { } </script> </head> <body onload = 'load()'> <form name='form1' method='post' action='Xhome.aspx' id='form1'> <div> <input type='hidden' name='__VIEWSTATE' id='__VIEWSTATE' value='/wEPDwUJNDI5NDcxNTY4ZGTjxbb38769ZB2N9Ow9kAzPz2PIqA==' /> </div> <div id='map' style='width:400px;height:300px' > </div> </form> </body> </html>
In response to the second part of your question:
I have (as an example – written a year or so ago) the following code:
In the code-behind I have something like this (c# I’m afraid):
LatitudeLogitudeMessage is a custom class that looks like this:
The GetPoint method bascially fills in those details.
In the code infront I then had:
Which calls the GetPoints method on the code behind, and passes the result to showPoints:
So this takes the array of points, and iterates over them creating a marker as it goes, centering on the first item in the list (not clever, but it worked for me).