display an image in infowindow

Jun 19, 2012 at 9:12 PM

i have a some image in my localhost and i want to display that picture in infowindow 

please tell me how i can display my picture in infowindow in google map ?

 

thank's before

Jun 20, 2012 at 4:56 PM

 Hey this is a code you can use , you can have a datatable and every datarow  can have another image

example you have a company datatable

CompanyName int

Companyimage  varchar(400)

Latitude   varchar(400)

Longitude  varchar(400)

 

---------------------------------------------------

then you run the store procedure and add every company name and logo to a company marker ----- on the map

 

Imports Artem.Web.UI.Controls     'remember in codebehind top of page

 

Sub example()

        GoogleMap1.Markers.Clear()


        Dim Connection As SqlConnection
        Dim DBCommand As SqlCommand
        Dim dt As New DataTable()
        ' Dim SQLString As String

        Dim City As String = DDLCity.SelectedItem.Value ''direct from DDlCity
        Dim Title As String = DDLBizKeyword.SelectedItem.Text  'HiddenSaveQueryKeyword.Value



        Dim myConn As String = (ConfigurationManager.ConnectionStrings("myconnectionString").ConnectionString)
        Connection = New SqlConnection(myConn)
        Try

            Connection.Open()

            'companies must be valis and map location must be specified latitude and longitude =filter requirements

            DBCommand = New SqlCommand("GetCompanyDetails_ByCity_Map", Connection)
            DBCommand.CommandType = CommandType.StoredProcedure

            DBCommand.Parameters.Add("@myCityID", SqlDbType.Int).Value = City
            DBCommand.Parameters.Add("@par1", SqlDbType.VarChar).Value = Title





            Dim da As New SqlDataAdapter(DBCommand)
            'to Count the results returend and show the user


            da.Fill(dt)

            For i As Integer = 0 To dt.Rows.Count - 1


                Dim themarker As New GoogleMarker()
                themarker.Draggable = False


                'can specify individial marker position
                themarker.Latitude = dt.Rows(i).Item("Latitude")
                themarker.Longitude = dt.Rows(i).Item("Longitude")



                'the marker can have a tooltip when hover on marker with info text
                themarker.Title = "Click to view this Company Profile:  " & dt.Rows(i).Item("CompanyName")


'add a panel inside the infowindow
                Dim panel1 As New Panel
                panel1.Width = 355
                panel1.Wrap = True  'or false -true gives a scroll bar on panel which will be inside the infowindow
                ' panel1.Height = 300
                ' panel1.ScrollBars = ScrollBars.Vertical
                themarker.InfoContent.Controls.Add(panel1)  'this is how you add the panel it to the infowindow




                'inside the panel1 you can add an image or a imagebutton
                'this where you get the image


                Dim NEWiMAGE As New System.Web.UI.WebControls.Image
                'Dim s As New ImageButton
                's.AlternateText = dt.Rows(i).Item("CompanyName")

                NEWiMAGE.ImageUrl = dt.Rows(i).Item("Companyimage")
                NEWiMAGE.ID = dt.Rows(i).Item("CompanyName")
                's.ImageAlign = ImageAlign.Top
                ' s.CssClass = "MapImagePadding"


                'YOU CAN ADD ANYTING DIRECTLY TO THE INFOWINDOW LIKE THIS
                '  themarker.InfoContent.Controls.Add(NEWiMAGE)
                'themarker.InfoContent.Controls.Add(s)

                panel1.Controls.Add(NEWiMAGE) 'this place the image inside the panel1...and panel1 was already inserted into the infowindow


                'you can add a linkbutton aswell inside the panel1
                Dim b As New LinkButton
                b.Text = "View Our Profile"
                b.CommandName = "Click"
                b.CssClass = "DefaultBluelinks11ptUnderline"
                Dim CompanyID As Integer = dt.Rows(i).Item("CompanyID")
                b.OnClientClick = "javascript:window.open('MapWaitprogress.aspx?BZ=" & CompanyID & "','','height=800,width=800,resizable=yes,scrollbars=yes,toolbar=yes')"
                '  themarker.InfoContent.Controls.Add(b)


                panel1.Controls.Add(b)



                GoogleMap1.Markers.Add(themarker)

           


            Next

 

 

    'use the city zoom, latitude and longitude for pistion the map over the town
                GoogleMap1.Zoom = 12

 

'THIS IS HOW YOU CENTER THE MAP
                GoogleMap1.Latitude = dt.Rows(i).Item("CityLatitude") 'or leave this out
                GoogleMap1.Longitude = dt.Rows(i).Item("CityLongitude") 'or leave this out

'OR

'GoogleMap1.Address="Cape Town, South Africa"

 

 

        Catch ex As Exception
            'Error goes here
            Connection.Close()
            Connection.Dispose()
            lblErrorHandling.Text = "Sorry! An Error Occured,<br/> Please Try Again."
            LblMessage1.Visible = False

        Finally
            'close the connction
            Connection.Close()
            Connection.Dispose()
        End Try





    End Sub

 

 

---------------------------------------------------------------------------------------------------------------------------

I done this quickly but you get the idea :)

Regards

Jake