2

Can anyone help me with this problem, i'm getting data from the server and doing a foreach loop to get all the co-ordinates for the markers in a google map using gmap3.

Problem is it only displays 1 marker on the map, i've tried using a jquery/javascript 'for' loop to display the data, but cannot work out how to do it.

Any help would be appreciated, my code is below, minus the jquery/javascript loop.

<script type="text/javascript">
    var options = { center: [], zoom: 0 };
    var value = { latLng: [] };

    @foreach (var item in Model)
        { 
        <text>
            options.center.push(@item.DisplayLatLonInMap);
            value.latLng.push(@item.DisplayLatLonInMap);
        </text> 
    }

    $("#WeatherMapLocation").gmap3({
        //defaults: { 
        //    classes: { 
        //        Marker: MarkerWithLabel 
        //    } 
        //}, 
        //{ 

        map: { options: options },
        marker: { values: [value],},
    });
</script>

/====================================

Changed code to code below. but still no luck, i'm not that good at jquery etc

<script type="text/javascript">
$(document).ready(initialize);
var map;


var options = { center: [], zoom: 0 };
var value = { latLng: [] };

@foreach (var item in Model)
    { 
     <text>
options.center.push(@item.DisplayLatLonInMap);
value.latLng.push(@item.DisplayLatLonInMap);
</text> 
    }

function initialize() {
    var latlng = new google.maps.LatLng(42.354183,-71.065063);
    var options = {
        zoom: 0,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#WeatherMapLocation')[0], options);

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

Thanks in advance George

CareerChange
  • 669
  • 4
  • 17
  • 34

1 Answers1

0

I am not clear about the jQuery syntaxes you used. In the for loop you havent specified the array location. See if that is the issue.

for( i = 0; i < value.length; i++) {
        var latLng = new google.maps.LatLng(value[i]); 
        var marker = new google.maps.Marker({
            position: latLng,
            map: map
        });
    }
Shiridish
  • 4,942
  • 5
  • 33
  • 64
  • It isn't clear to me how you are adding latlng's to the value array. Do you see the values added correctly to the array before going to the loop? You can use [FIREBUG](http://getfirebug.com/) to debug and inspect your code. – Shiridish Dec 19 '12 at 10:38
  • Hi Cdeez, not sure myself now, been trying to work this out for 2 days and my head is spinning and i have even got myself confused – CareerChange Dec 19 '12 at 10:46
  • What is your requirement? May be I can give you an easy solution. – Shiridish Dec 19 '12 at 11:02
  • Hi I just need to get the data from var value = { latLng: [] }; which contains the latitude and logitude and display the markers on the map – CareerChange Dec 19 '12 at 11:50
  • So you basically want an array containing latlng's and then use this array for placing markers. Is it? – Shiridish Dec 19 '12 at 12:08
  • Hi Cdeez in my code above @foreach (var item in Model) retuns the co-ordinates in the following format: 42.354183,-71.065063 I need to get the co-ordinates, loop through them and add markers on the map for each one. – CareerChange Dec 19 '12 at 12:19
  • Your code in the loop doesn't look correct. If you can go with Javascript, see the answer to this [QUESTION](http://stackoverflow.com/questions/13890029/google-maps-api-multiple-markers). May be after getting an understanding you can move on to jQuery – Shiridish Dec 20 '12 at 05:45