Display multiple points on google map by fetching the names from database

Question

I am new in JSP. I have a requirement where i have to build a webpage which will fetch records of address fields(consist of Street,region,city,exchange,country name) from Database and will display the same on google map with markers.

For this i am not having the latitude/longitude of the address but have the physical address details in the database.

Can someone please suggest me on this.

The current code i am having is like as below, bit it need latitude/langitue and also it for a single location. I have to display multiple points based on database output and input parameter will be their physical address.

var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>


</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

For info about how to get latitude and longitude from address see this question: http://stackoverflow.com/questions/3490622/get-latitude-and-longitude-based-on-location-name-with-google-autocomplete-api — Keammoort, Nov 06 '15 at 13:35

score 1 · Answer 1 · answered Nov 06 '15 at 12:32

1

You can iterate on your array of localtion (retrieved form database) and then add the marker eg: this way..

 for (var i = 0; i < locations.length; i++) {
                 addMarker(locations[i].lat, locations[i].lng);
             }

answered Nov 06 '15 at 12:32

ScaisEdge

131,976
10
91
107

score 1 · Answer 2 · answered Nov 09 '15 at 00:58

If you want to display multiple markers on the same map but you only have a address .You can use geocoder function from google Maps API v3.

Here's a demo of how it works this code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Mapa</title>
    <meta charset="utf-8" />
    <style type="text/css">
        body {
          margin: 0;
          padding: 0;
          font: 12px sans-serif;
        }
        h1, p {
          margin: 0;
          padding: 0;
        }    
    </style>
</head>
<body>
    <div id="googleMap" style="height: 400px;"></div>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
    <script>
    /*
     * declare map as a global variable
     */
    var map;
    var myMarkers = [];
    /*
     * create a initialize function
     */
    function initialize() {
        var myCenter=new google.maps.LatLng(51.508742,-0.120850);
        var mapOptions = {
            center: myCenter,
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

        map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
        SetMarkers();
    }
    google.maps.event.addDomListener(window, 'load', initialize);


    function SetMarkers() {
        var geocoder = new google.maps.Geocoder();
        var myData = [];

        // here you can change this JSON for a call to your database 
        myData = [
            {name: "London",  address: "London, Reino Unido"},
            {name: "Oxford",  address: "Oxford, Reino Unido"},
            {name: "Bedford", address: "Bedford, Reino Unido"},
        ];

        for(i = 0; i < myData.length; i++) {
            geocoder.geocode({ 'address': myData[i].address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {                
                    myMarkers[i] = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map
                    });
                } else {
                    alert("We can't found the address, GoogleMaps say..." + status);
                }
            });
        }
    }

    </script>
</body>
</html>

Display multiple points on google map by fetching the names from database

2 Answers2

Linked