— postgresql — google maps connection

Hi all. There is another story. In this story, i will try to connect google maps to postgresql with mvc project. Thats not all. I will add a html select element. When this element change, application will add a marker to google maps. As you think, marker data will come from postgresql database.

Cool tip

maps marker chart ile ilgili görsel sonucu

Step 1 — Prepare project and view

After created mvc project, i was added cshtml view and a controller. I also included bootstrap, jquery and google maps. Here is last result ;

Step 2 — Scripts

As you can see, i added a html select element. I need to create a change event of this element. In this event, i will post selected value to my controller and wait result. Result will be contains two info; Lat and Long values. This infos links together. When this info is arrives the client side, i will add a marker to maps and delete previous one. Here is my script codes;

Step 3 — Controller codes

If you want to use postgresql in your project, you need to include npgsql package. You can find this package in Nuget Packages. This npgsql package is a database provider. After you add npgsql, you need to write your own sql codes. Try to not forget use parameters in sql command. (Sql injection)

  • st_centroid = As i said at the beginning, my db data are at polygon type. But i need point type. st_centroid code accepts polygon data type and gives you center point of that polygon.
  • st_x = Gives you lng value of given point data.
  • st_y = Gives you lat value of given point.

Step — 4 Tidy codes

While i was writing my controller codes, added comment lines for tips. Be careful use replace for javascript. As you know, comma and dot always confused. After controller codes, i will tidy my script codes. Here is result ;

Step — 5 Remove markers

For the scenario, if you add new marker to map, you will delete the previous one. You dont need to do this. But after a few markers, map does not looks clear. You know. Here is my codes;

Step — 6 Result

As you can see, my project works well. If you not understand anything or want to ask something, you can ask me. Have a good day.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store