asp.net + google maps api, adding markers to the site_问答_开发者

Im using Asp.net and google maps api. On the site map is visible and some fields. When user enters specified address and radius then I can get the list od available shopd in this location (using webservice). I do it on server side. Now I w开发者_运维技巧ould like to display results on the google map.

What is the best Way to do that? Any scropt loader or something like that?

You could output the list of markers into the html in an array then add the to the map with something like this (not tested but not far off):

var gMarkers = [['place1', 55.8, -4.020508],['place2', 53.3, -7.61],['place3', 57.9, -8.12]];

for (var i = 0; i < gMarkers.length; i++) {
   var marker =  new google.maps.Marker({
                    position: new google.maps.LatLng(lat, lon),
                    map: map
                });

}

You could also use jQuery to make a request to the webservices. If your web service is returning XML then there are jQuery plugins that can help you parse the data on the client side, but Json is the better option.

Are you using ajax to add inject html into the page or are you using postbacks to reload the page after the user enters the address?

Try this

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        Google Map Demo
    </title>
</head>
<body>
    <div id="MyDivScrolling">
        <div>
            <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC8KY7rkZP7Xyq5oVM0nssUc4OPIP7MQtw&callback=initMap"></script>
            <script type="text/javascript">
                var markers = [{
                "title": 'Havana',
                "lat": '23.1330200',
                "lng": '-82.3830400',
                "description": 'José Martí International Airport, Havana'
            }
		,
			 {
			     "title": 'Tampa',
			     "lat": '27.964157',
			     "lng": '-82.452606',
			     "description": 'Tampa International Airport, Tampa'
			 }

		,
		   {
		       "title": 'Havana',
		       "lat": '23.1330200',
		       "lng": '-82.3830400',
		       "description": 'José Martí International Airport, Havana'
		   }
		,
		     {
		         "title": 'Orlando',
		         "lat": '28.538336',
		         "lng": ' -81.379234',
		         "description": 'Orlando International Airport, Orlando'
		     }
	    ,
		    {
		        "title": 'Havana',
		        "lat": '23.1330200',
		        "lng": '-82.3830400',
		        "description": 'José Martí International Airport, Havana'
		    }
		,
            {
                "title": 'Miami',
                "lat": '25.7742700',
                "lng": '-80.1936600',
                "description": 'Miami International Airport, Miami'
            }
        ,
            {
                "title": 'Havana',
                "lat": '23.1330200',
                "lng": '-82.3830400',
                "description": 'José Martí International Airport, Havana'
            }
          ,
		    {
		        "title": 'Miami',
		        "lat": '25.7742700',
		        "lng": '-80.1936600',
		        "description": 'Miami International Airport, Miami'
		    }
		,
            {
                "title": 'Camagüey-Ignacio Agramonte',
                "lat": '21.416666666667',
                "lng": '-77.866666666667 ',
                "description": 'Camagüey-Ignacio Agramonte Airport, Camagüey'
            }

            ,
			 {
			     "title": 'Tampa',
			     "lat": '27.964157',
			     "lng": '-82.452606',
			     "description": 'Tampa International Airport'
			 }
             ,
              {
                  "title": 'Camagüey-Ignacio Agramonte',
                  "lat": '21.416666666667',
                  "lng": '-77.866666666667 ',
                  "description": 'Camagüey-Ignacio Agramonte Airport, Camagüey'
              }
               ,
			 {
			     "title": 'Tampa',
			     "lat": '27.964157',
			     "lng": '-82.452606',
			     "description": 'Tampa International Airport, Tampa'
			 }];
                window.onload = function () {
                    var mapOptions = {
                        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                        zoom: 9,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                    };
                    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                    var infoWindow = new google.maps.InfoWindow();
                    var lat_lng = new Array();
                    var latlngbounds = new google.maps.LatLngBounds();
                    for (i = 0; i < markers.length; i++) {
                        var data = markers[i]
                        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                        lat_lng.push(myLatlng);
                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            map: map,
                            title: data.title
                        });
                        latlngbounds.extend(marker.position);
                        (function (marker, data) {
                            google.maps.event.addListener(marker, "click", function (e) {
                                infoWindow.setContent(data.description);
                                infoWindow.open(map, marker);
                            });
                        })(marker, data);
                    }
                    map.setCenter(latlngbounds.getCenter());
                    map.fitBounds(latlngbounds);

                    //***********ROUTING****************//

                    //Intialize the Path Array
                    var path = new google.maps.MVCArray();

                    //Intialize the Direction Service
                    var service = new google.maps.DirectionsService();

                    //Set the Path Stroke Color
                    var poly = new google.maps.Polyline({ map: map, strokeColor: '#DC143C' });

                    //Loop and Draw Path Route between the Points on MAP
                    for (var i = 0; i < lat_lng.length; i++) {
                        if ((i + 1) < lat_lng.length) {
                            var src = lat_lng[i];
                            var des = lat_lng[i + 1];
                            path.push(src);
                            poly.setPath(path);
                            service.route({
                                origin: src,
                                destination: des,
                                travelMode: google.maps.DirectionsTravelMode.DRIVING
                            }, function (result, status) {
                                if (status == google.maps.DirectionsStatus.OK) {
                                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                        path.push(result.routes[0].overview_path[i]);
                                    }
                                }
                            });
                        }
                    }
                }
            </script>
            <div class="MainSliderItem2 ImagesContainerItem">
                <div id="dvMap" style="width: 100%;height: 490px;position: relative;overflow: hidden;background-color: rgb(229, 227, 223);max-width: 80%;margin: 98px auto;">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

asp.net + google maps api, adding markers to the site