CODEWITHSUNDEEP
c#asp.netgoogle-maps
Yathish kumar
Yathish kumar

Reputation: 35

How to add a google-map Info window directly to .cs file

I need to add a Info Window in maps in which i am reading the map marker values from the Database.

Here is my c# code:

protected void Page_Load(object sender, EventArgs e)
{            
    string markers = GetMarkers();
    Literal1.Text = @"<script type = 'text/javascript'>
    function initialize() {
    var mapOptions = {
    center: new google.maps.LatLng(12.828540, 77.5435),            
    mapTypeId: google.maps.MapTypeId.ROADMAP };       
    var myMap = new google.maps.Map(document.getElementById('mapArea'),
    mapOptions);" + markers+ @" } 
    </script>";
}   
protected string GetMarkers()
{
    string markers = "";
    using (MySqlConnection con = new MySqlConnection(ConfigurationManager.ConnectionStrings["SMSDatasource"].ConnectionString))
       {
            MySqlCommand cmd = new MySqlCommand("select gps_lat,gps_lon,location_name from app_enterprise_location", con);
            con.Open();
            MySqlDataReader reader = cmd.ExecuteReader();
            int i = 0;
            while (reader.Read())
            {
                i++;
                markers += @"var marker" + i.ToString() + @" = new google.maps.Marker({
                position: new google.maps.LatLng("+reader["gps_lat"].ToString()+","+reader["gps_lon"].ToString()+"),"+@"map: myMap   
                    });
                ";
            }
         }        
     return markers;
    }

I need to add the info window in each of the map marker.

aspx file:

 <div id="mapArea" style="width:100%;min-height:700px;"></div> 
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLgjCcSWDyJGv0zr-YIfDPTdE">
</script>

Upvotes: 0

Views: 194

Answers (1)

Sycraw
Sycraw

Reputation: 543

According to the GoogleMaps Javascript API:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

you should prepare the content of your infowindow in Javascript as a plain text with the HTML text you want to design it.

Then, always in the Javascript side you create the infowindow with that content

 var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

and add a listener in the marker to show it on click:

    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });

Upvotes: 1

Related Questions