asp.net map google

http://themeforest.net/item/realia-retina-responsive-real-estate-template/4594492

I purchased a template from above url and attached the js file that related to Google map questions I have.

I have two simple goals:
1. Make the icons on the map loading dynamically from the http post result.
For example, I will have sql statement against the DB and find many locations.
Currently, the template has static location like below

function LoadMap() {
      var locations = new Array(
        [34.01843,-118.491046], [34.006673,-118.486562], [34.009714,-118.480296], [34.010408,-118.473215], [34.01521,-118.474889], [34.022502,-118.480124],
        [34.024423,-118.459868], [34.024885,-118.44871], [34.002368,-118.482828], [34.003791,-118.473001], [34.015922,-118.457422], [34.022147,-118.457894],
        [34.028904,-118.46725], [34.030114,-118.481326], [34.03143,-118.494029], [34.031643,-118.504758], [34.029616,-118.515058], [34.001834,-118.451414]
      );

so basically, I want to make it Array reading data from e.g. url with querystring like
result.aspx?arrayvalue=[34.01,-118],[xx,xx]

2nd question is each icon should have their own addr. but now it only show static address.
how can i read from the query string as well?

    var myOptions = {
              content: '<div class="infobox"><div class="image"><img src="http://html.realia.byaviators.com/assets/img/tmp/property-tiny-1.png" alt=""></div><div class="title"><a href="detail.html">5502 Fife Ave</a></div><div class="area"><span class="key">Area:</span><span class="value">200m<sup>2</sup></span></div><div class="price">€450 000.00</div><div class="link"><a href="detail.html">View more</a></div></div>',
              disableAutoPan: false,
              maxWidth: 0,
              pixelOffset: new google.maps.Size(-146, -190),
              zIndex: null,
              closeBoxURL: "",
              infoBoxClearance: new google.maps.Size(1, 1),
              position: new google.maps.LatLng(location[0], location[1]),
              isHidden: false,
              pane: "floatPane",
              enableEventPropagation: false
          };
realia.js
solution1368Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
Is this PHP, ASP or C# that we're talking about?  Do you have programming experience in these languages?
0
solution1368Author Commented:
the teample is html. I eventually will convert to asp. Thanks
0
shishir_sriCommented:
Hey there,

By address, I'm assuming you mean the address displayed in the infobox, correct?

There are several ways to do this.

Option 1:
Return the address as a part of the locations array in the query string:
result.aspx?locations=[xx,xx,addr1],[yy,yy,addr2]

In this case, your marker options becomes:
[ Note the location[2] used in place of address in infobox ]
 var myOptions = {
              content: '<div class="infobox"><div class="image"><img src="http://html.realia.byaviators.com/assets/img/tmp/property-tiny-1.png" alt=""></div><div class="title"><a href="detail.html">' + location[2] + '</a></div><div class="area"><span class="key">Area:</span><span class="value">200m<sup>2</sup></span></div><div class="price">€450 000.00</div><div class="link"><a href="detail.html">View more</a></div></div>',
              disableAutoPan: false,
              maxWidth: 0,
              pixelOffset: new google.maps.Size(-146, -190),
              zIndex: null,
              closeBoxURL: "",
              infoBoxClearance: new google.maps.Size(1, 1),
              position: new google.maps.LatLng(location[0], location[1]),
              isHidden: false,
              pane: "floatPane",
              enableEventPropagation: false
          };

Open in new window


Another way would be to send the addresses as a separate array like your locations parameter. In this case, you'll read the address array the same way that you read the locations array.

You'll need to ensure that the order of addresses is the same as order of locations.

Then for location index 'i' in the main locations array, the corresponding array would be of the same index in the address array.

--

In my opinion, the first option is better.

Let me know if this solves your issue.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

solution1368Author Commented:
i agree. Option 1 is better. But how to capture location[2] value and populate on the map?
Like I already add address for location[2]


 var locations = new Array([34.01843, -118.491046, '100 main street. Los Angeles, CA 90032'], [34.006673, -118.486562, '100 main street. Los Angeles, CA 90032']);
   

      var markers = new Array();
      var mapOptions = {
            center: new google.maps.LatLng(34.019000, -118.455458),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
    };

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $.each(locations, function(index, location) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[0], location[1],location[2]),
            map: map,
            icon: 'http://html.realia.byaviators.com/assets/img/marker-transparent.png'
        });

var myOptions = {
              content: '<div class="infobox"><div class="image"><img src="http://html.realia.byaviators.com/assets/img/tmp/property-tiny-1.png" alt=""></div><div class="title"><a href="detail.html">5502 Fife Ave</a></div><div class="area"><span class="key">Area:</span><span class="value">200m<sup>2</sup></span></div><div class="price">€450 000.00</div><div class="link"><a href="detail.html">View more</a></div></div>',
              disableAutoPan: false,
              maxWidth: 0,
              pixelOffset: new google.maps.Size(-146, -190),
              zIndex: null,
              closeBoxURL: "",
              infoBoxClearance: new google.maps.Size(1, 1),
              position: new google.maps.LatLng(location[0], location[1]),
              isHidden: false,
              pane: "floatPane",
              enableEventPropagation: false
          };
          marker.infobox = new InfoBox(myOptions);
            marker.infobox.isOpen = false;

          var myOptions = {
              draggable: true,
                  content: '<div class="marker"><div class="marker-inner"></div></div>',
                  disableAutoPan: true,
                  pixelOffset: new google.maps.Size(-21, -58),
                  position: new google.maps.LatLng(location[0], location[1]),
                  closeBoxURL: "",
                  isHidden: false,
                  // pane: "mapPane",
                  enableEventPropagation: true
          };
0
solution1368Author Commented:
I finally got it working ... Thanks
0
shishir_sriCommented:
To display the location[2] value, you need to add it as a string to your infoBox content, in your info box options.

1. location[2] is not to be sent to the marker options, it should go to the infoBox content.

2. In the code you've provided, why have you declared 'myOptions' twice?

The new code should become something like this:

var locations = new Array([34.01843, -118.491046, '100 main street. Los Angeles, CA 90032'], [34.006673, -118.486562, '100 main street. Los Angeles, CA 90032']);

var markers = new Array();
var mapOptions = {
  center: new google.maps.LatLng(34.019000, -118.455458),
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false
};

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

$.each(locations, function(index, location) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(location[0], location[1]),
    map: map,
    icon: 'http://html.realia.byaviators.com/assets/img/marker-transparent.png'
  });

  var myOptions = {
    content: '<div class="infobox"><div class="image"><img src="http://html.realia.byaviators.com/assets/img/tmp/property-tiny-1.png" alt=""></div><div class="title"><a href="detail.html">' + location[2] + '</a></div><div class="area"><span class="key">Area:</span><span class="value">200m<sup>2</sup></span></div><div class="price">€450 000.00</div><div class="link"><a href="detail.html">View more</a></div></div>',
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-146, -190),
    zIndex: null,
    closeBoxURL: "",
    infoBoxClearance: new google.maps.Size(1, 1),
    position: new google.maps.LatLng(location[0], location[1]),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };
  marker.infobox = new InfoBox(myOptions);
  marker.infobox.isOpen = false;
});

Open in new window


The above code may not be entirely accurate as per the Google Maps API, however, it'll give you an idea as to how to use the address parameter.

Note line numbers 15 and 21.

location[0] and location[1] are sent as latitude and longitude to the marker options in line 15.

location[2] is sent as a string to the infoBox content in line 21.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.