Sharepoint 2010 Visual Webpart using google maps

Posted: February 3, 2012 in web

make sure you serialize your SPListItems

 JavaScriptSerializer ser = new JavaScriptSerializer();
                string json = ser.Serialize(listParks);

script:

 
                      var jsonpark = "+ json + @";

                    var start = new google.maps.LatLng(29.651636, -82.324827); // center of gainesville

                    var infow;
                    var map;
                    var iterator = 0;

                      function initialize() {
                        var mapOptions = {
                          zoom: 10,
                          mapTypeId: google.maps.MapTypeId.ROADMAP,
                          center: start
                        };

                        map = new google.maps.Map(document.getElementById('map_canvas'),
                                mapOptions);
	                    drop();
                      }

                      function drop() {
                        for (i = 0; i < jsonpark.length; i++) 
                        {
                                setTimeout(function() {
                                    addMarker();
                                }, i * 155);
                        }
                      }
                       function BuildParkInfoWindow(ParkItem)
                      {
                            var html = '<div id="map_info"><div class="map_info_title"><strong>' + ParkItem.title + '</strong></div>';
                            html += '<div class="map_info_address"><a target="_blank">' + ParkItem.address + '</a>'+ ParkItem.image +'</div>';
                            html += '<div class="map_info_activies">' + ParkItem.activity + '</div>';
		                    return html;
                      }

                      function addMarker() {

	                    var park = jsonpark[iterator];	
	                    if(park.lat != '' &amp;&amp; park.lon != ''){
		
		                    var contentString = BuildParkInfoWindow(park);
		                    var infowindow = new google.maps.InfoWindow({
			                    content: contentString,
                                maxWidth:355
		                    });  

		                    var x = new google.maps.Marker({

		                      position: new google.maps.LatLng(park.lat, park.lon),

		                      map: map,

		                      draggable: false,

		                      animation: google.maps.Animation.DROP,

		                      title: park.title

		                    });

		                    google.maps.event.addListener(x, 'click', function() {

		                      if(typeof infow != 'undefined')

			                    infow.close();

		                      infowindow.open(map,x);

			                    infow = infowindow;

		                    });	
	                    }	
	                    iterator++;
                      }
                    document.onreadystatechange = function () {
                            if (document.readyState == 'complete') {
                                initialize();
                            }
                    }
                    
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s