How to add multiple locations to google map?

Question

Well I am not a js developer, and I want to build a google map with multiple locations. I have a styled google map which looks like this, and I like to add some locations. After some research I found this code works

var locations = [
                ['Bondi Beach', -33.890542, 151.274856, 4],
                ['Coogee Beach', -33.923036, 151.259052, 5],
                ['Cronulla Beach', -34.028249, 151.157507, 3],
                ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
                ['Maroubra Beach', -33.950198, 151.259302, 1]
            ];

Then I added it to my javascript(below), but it just doesn't work.

//<![CDATA[ 
$(function(){
jQuery(document).ready(function () {
    var locations = [
                ['Bondi Beach', -33.890542, 151.274856, 4],
                ['Coogee Beach', -33.923036, 151.259052, 5],
                ['Cronulla Beach', -34.028249, 151.157507, 3],
                ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
                ['Maroubra Beach', -33.950198, 151.259302, 1]
            ];
    var map;
    var centerPosition = new google.maps.LatLng(35.335293,161.323242, 16.050432,33.815918);
    var style = 
 [{"elementType": "labels","stylers": [{ "visibility": "off" }]},
  {"featureType": "landscape","stylers": [{ "color": "#222222" }]},
  {"featureType": "road","stylers": [{ "color": "#000000" }]},
  {"featureType": "poi","stylers": [{ "visibility": "off" }]},
  {"featureType": "water","stylers": [{ "color": "#000000" }]},
  {"featureType": "administrative.country","elementType": "geometry","stylers": [
  { "visibility": "on" }, { "color": "#2c2c2c" }]}]
    var options = {
      zoom: 2,
      center: centerPosition,
      mapTypeControl: false,
      scaleControl: false,
      zoomControl: false,
      navigationControl: false,
      streetViewControl: false,
    };
    map = new google.maps.Map($('#map')[0], options);
    map.setOptions({
        styles: style
    });
    var image = {
        url: 'http://icons.iconarchive.com/icons/glyphish/glyphish/16/07-map-marker-icon.png',
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(12, 59)
    };
    var shadow = {
        url: 'https://dl.dropboxusercontent.com/u/814783/fiddle/shadow.png',
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(-2, 36)
    };
    var marker = new google.maps.Marker({
        position: centerPosition,
        map: map,
        icon: image,
        shadow: shadow
    });
});
});//]]>

How can I add these locations to my map?

score 0 · Accepted Answer · answered Nov 09 '14 at 07:10

So I work out this with the js code

//<![CDATA[ 
$(function(){
jQuery(document).ready(function () {
    var map;
    var centerPosition = new google.maps.LatLng(35.335293,161.323242, 16.050432,33.815918);
    var Tokyo = new google.maps.LatLng(35.6895000,139.6917100);
    var NeYork = new google.maps.LatLng(40.712784,-74.005941);
    var London = new google.maps.LatLng(51.507351,-0.1277581);
    var Moscow = new google.maps.LatLng(55.755826,37.617300);
    var Vancouver = new google.maps.LatLng(49.261226,-123.1139271);
    var Melbourne = new google.maps.LatLng(-37.814107,144.963280);

    var Sydney = new google.maps.LatLng(-33.867487,151.206990);
    var Shanghai = new google.maps.LatLng(31.230416,121.4737011);
    var Beijing = new google.maps.LatLng(39.904030,116.407526);

    var style = 
 [{"elementType": "labels","stylers": [{ "visibility": "off" }]},
  {"featureType": "landscape","stylers": [{ "color": "#222222" }]},
  {"featureType": "road","stylers": [{ "color": "#000000" }]},
  {"featureType": "poi","stylers": [{ "visibility": "off" }]},
  {"featureType": "water","stylers": [{ "color": "#000000" }]},
  {"featureType": "administrative.country","elementType": "geometry","stylers": [
  { "visibility": "on" }, { "color": "#2c2c2c" }]}]
    var options = {
      zoom: 2,
      center: centerPosition,
      mapTypeControl: false,
      scaleControl: false,
      zoomControl: false,
      navigationControl: false,
      streetViewControl: false,
    };
    map = new google.maps.Map($('#map')[0], options);
    map.setOptions({
        styles: style
    });
    var image = {
        url: 'http://icons.iconarchive.com/icons/glyphish/glyphish/16/07-map-marker-icon.png'
    };
    var shadow = {
        url: 'https://dl.dropboxusercontent.com/u/814783/fiddle/shadow.png'
    };
    var marker = new google.maps.Marker({
        position: centerPosition,
        map: map,
        icon: image,
        shadow: shadow
    });

        var marker = new google.maps.Marker({
        position: Tokyo,
        map: map,
        icon: image,
        shadow: shadow
    });

            var marker = new google.maps.Marker({
        position: London,
        map: map,
        icon: image,
        shadow: shadow
    });

            var marker = new google.maps.Marker({
        position: Moscow,
        map: map,
        icon: image,
        shadow: shadow
    });

            var marker = new google.maps.Marker({
        position: Vancouver,
        map: map,
        icon: image,
        shadow: shadow
    });

            var marker = new google.maps.Marker({
        position: Melbourne,
        map: map,
        icon: image,
        shadow: shadow
    });

            var marker = new google.maps.Marker({
        position: Sydney,
        map: map,
        icon: image,
        shadow: shadow
    });

            var marker = new google.maps.Marker({
        position: Shanghai,
        map: map,
        icon: image,
        shadow: shadow
    });

            var marker = new google.maps.Marker({
        position: Beijing,
        map: map,
        icon: image,
        shadow: shadow
    });


});
});//]]>

There is the demo.

How to add multiple locations to google map?

1 Answers1