Skip to content Skip to sidebar Skip to footer

Display Multiple Points On Google Map By Fetching The Names From Database

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

Solution 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);
             }

Solution 2:

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><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Mapa</title><metacharset="utf-8" /><styletype="text/css">body {
          margin: 0;
          padding: 0;
          font: 12px sans-serif;
        }
        h1, p {
          margin: 0;
          padding: 0;
        }    
    </style></head><body><divid="googleMap"style="height: 400px;"></div><scripttype="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
     */functioninitialize() {
        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);


    functionSetMarkers() {
        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>

Post a Comment for "Display Multiple Points On Google Map By Fetching The Names From Database"