CODEWITHSUNDEEP
javascriptgoogle-maps
HyperDevil
HyperDevil

Reputation: 2639

Google Maps: Multimarker

I want to plot several markers on my map. Found some code on the internet, for that user it worked. The array is generated by PHP, example: var ships = [['61','10.2']['60.5','10.1']];

My Javascript:

var map;
function load(ships) {
    initialize();
    createShips(ships);
}

function initialize() {

    //build the map
    var myLatlng = new google.maps.LatLng(63.65,10.65);
    var myOptions = {
        zoom: 9,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function createShips(ships){
    for (var i = 0; i < ships.length; i++) {
        new google.maps.Marker({
          position: new google.maps.LatLng(ships[i][0], ships[i][1]),
          map: map,
          title: ships[i][0]
        });
    }
}

My html function to start the map is: 

body onload="load()"

The map seems to appear, but no markers.

Upvotes: 0

Views: 807

Answers (1)

KJYe.Name
KJYe.Name

Reputation: 17169

Here is the jsfiddle

couple of issues:

  1. your array is not formatted correctly. should have a comma between elements.

  2. you declared your map locally in the function initialize, thus, within createShips map: map is basically pointing to undefined. so i declared the map outside of the functions so you can use it within creaeteShips

JavaScript:

    var ships = [['61', '10.2'],['60.5', '10.1']];  //formatted array correctly
    var map; //declared outside functions so createShips can access

    function load(ships) {
        initialize();
        createShips(ships);
    }

    function initialize() {
        var myLatlng = new google.maps.LatLng(63.65, 10.65);
        var myOptions = {
            zoom: 9,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function createShips(ships) {
        for (var i = 0; i < ships.length; i++) {
            new google.maps.Marker({
                position: new google.maps.LatLng(ships[i][0], ships[i][1]),
                map: map,
                title: ships[i][0]
            });
        }
    }

load(ships);

google.map.LatLng takes numbers instead of strings. so, you should change string to numbers. 

google.map.LatLng(lat:number, lng:number, noWrap?:boolean);

Notice the ordering of latitude and longitude. If the noWrap flag is true, then the numbers will be used as passed, otherwise latitude will be clamped to lie between -90 degrees and +90 degrees, and longitude will be wrapped to lie between -180 degrees and +180 degrees.

Update:

Ok, here is another issue after you convert your string Lat and Lng into numbers. When you create the marker, you specify the title as ships[i][0]. Title is expecting a string and thus 'bugs' out when it gets a number. What i did is i start to track your markers by pushing the markers into an array called var myMarkers and set the title into a string. please take a look at the updated jsfiddle:

    var myMarkers = []; //created outside of all function to make it global

    myMarkers.push(new google.maps.Marker({
        position: new google.maps.LatLng(ships[i][0], ships[i][1]),
        map: map,
        title: 'ship #' + i //i change the title from a number into string
    }));

Upvotes: 1

Related Questions