Help with google maps please

[Thor]

Hello,

I use google maps on a page on a website and then I have "hardcoded" the markers on the map in javascript, but for some reason the map does not show all the markers only the first few.

I am using googles javascript API, is there any other way I can achieve the following?

I have a website and I want to add markers to the map as I sign up resellers, so in essence the reseller is represented by a marker on the map.

Let me know if you guys want me top paste the code.

 

[Thor]

Right here this is my problem -> https://siteorigin.com/thread/limited-number-of-markers-on-google-maps-widget/

Is there anyway I can get around this?

 

[Thor]

   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
function initialize() {
  var myLocation = new google.maps.LatLng(-33.880754, 18.634368);
  var myDave = new google.maps.LatLng(-33.873804, 18.634843);
  var myDerek = new google.maps.LatLng(-34.112384, 18.844713);
  var myBerdine = new google.maps.LatLng(-34.082823, 18.840496);
  var myDevin = new google.maps.LatLng(-29.492389, 31.218657);
  var myColin  = new google.maps.LatLng(-33.863724, 18.578321);
  var myMarcris  = new google.maps.LatLng(-29.857765, 31.021630);
  var myIan = new google.maps.LatLng(-26.028311, 28.004132);
  var myKnysna = new google.maps.LatLng(-34.031815, 23.045850);
  var myPlett = new google.maps.LatLng(-34.053906, 23.370542);
  var myGeorge = new google.maps.LatLng(-33.963073, 22.459156);
  var myEastlondon = new google.maps.LatLng(-32.989910, 27.872604);
  var myGrahamstown = new google.maps.LatLng(-33.302933, 26.523438);
  var myRichardsbay = new google.maps.LatLng(-28.768805, 32.019887);
  var myKroonstad = new google.maps.LatLng(-27.645871, 27.229928);
  var myBethlehem = new google.maps.LatLng(-28.236912, 28.308702);
  var myWitbank = new google.maps.LatLng(-25.872222, 29.235887);
  var myNewcastle = new google.maps.LatLng(-27.751827, 29.936295);
  var myKimberley = new google.maps.LatLng(-28.734564, 24.756509);
  var myRustenburg = new google.maps.LatLng(-25.656175, 27.255232);
  var myVryburg = new google.maps.LatLng(-26.956302, 24.728201);
  var myOrkney = new google.maps.LatLng(-26.964996, 26.659299);
  var mySasolburg = new google.maps.LatLng(-26.808988, 27.829341);
  var myHeidelberg = new google.maps.LatLng(-26.489940, 28.383779);
  var myBethal = new google.maps.LatLng(-26.459522, 29.465437);
  var myUppington = new google.maps.LatLng(-28.411019, 21.251776);
  var myWindhoek = new google.maps.LatLng(-22.556783, 17.065234);
  var myWalvisbay = new google.maps.LatLng(-22.951268, 14.515005);
  var myHermanus = new google.maps.LatLng(-34.408175, 19.253408);
  var cen = new google.maps.LatLng(-28.803741, 24.707523);
  var mapOptions = {
    zoom: 9,
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
         if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
             map.setCenter(initialLocation);
         });
     }

  var marker = new google.maps.Marker({
      position: myDave,
      map: map,
      title: "xxxxx"
  });
  var marker = new google.maps.Marker({
      position: myDerek,
      map: map,
      title: 'xxxxx'
  });
  var marker = new google.maps.Marker({
      position: myBerdine,
      map: map,
      title: 'xxxxx'
  });
  var marker = new google.maps.Marker({
      position: myDevin,
      map: map,
      title: 'xxxxx'
  });
  var marker = new google.maps.Marker({
      position: myColin,
      map: map,
      title: 'xxxxx'
  });
  var marker = new google.maps.Marker({
      position: myIan,
      map: map,
      title: 'xxxxx'
  });
  var marker = new google.maps.Marker({
      position: myMarcris,
      map: map,
      title: 'xxxxx'
  });
  var marker = new google.maps.Marker({
      position: myKnysna,
      map: map,
      title: 'xxxx.'
  });
  var marker = new google.maps.Marker({
      position: myPlett,
      map: map,
      title: 'xxxx.'
  });
  var marker = new google.maps.Marker({
      position: myGeorge,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myEastlondon,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: Grahamstown,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myRichardsbay,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myKroonstad,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myBethlehem,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myWitbank,
      map: map,
      title: 'xxxx.'
  });
  var marker = new google.maps.Marker({
      position: myNewcastle,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myKimberley,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myRustenburg,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myVryburg,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myOrkney,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: mySasolburg,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myHeidelberg,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myBethal,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myUppington,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myWindhoek,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myWalvisbay,
      map: map,
      title: 'xxxx'
  });
  var marker = new google.maps.Marker({
      position: myHermanus,
      map: map,
      title: 'xxxx'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

 

[Thor]

Result:



Majority of the markers are not displayed

 

[IziWhatNow]

Maybe only send 10 request per second???

 

[Thor]

Maybe only send 10 request per second???

Yea, but I have no idea how. I am a noob.

 

[Thor]

Can someone help me to get the marker titles to display, basically I want to use the above code regarding the marker titles in the following:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
// If you're adding a number of markers, you may want to drop them on the map
// consecutively rather than all at once. This example shows how to use
// window.setTimeout() to space your markers' animation.

var centerSA = new google.maps.LatLng(-30.289471, 24.284893);

var neighborhoods = [
  new google.maps.LatLng(-33.880754, 18.634368),
  new google.maps.LatLng(-33.873804, 18.634843),
  new google.maps.LatLng(-34.112384, 18.844713),
  new google.maps.LatLng(-34.082823, 18.840496),
  new google.maps.LatLng(-29.492389, 31.218657),
  new google.maps.LatLng(-33.863724, 18.578321),
  new google.maps.LatLng(-29.857765, 31.021630),
  new google.maps.LatLng(-26.028311, 28.004132),
  new google.maps.LatLng(-34.031815, 23.045850),
  new google.maps.LatLng(-34.053906, 23.370542),
  new google.maps.LatLng(-33.963073, 22.459156),
  new google.maps.LatLng(-32.989910, 27.872604),
  new google.maps.LatLng(-33.302933, 26.523438),
  new google.maps.LatLng(-28.768805, 32.019887),
  new google.maps.LatLng(-27.645871, 27.229928),
  new google.maps.LatLng(-28.236912, 28.308702),
  new google.maps.LatLng(-25.872222, 29.235887),
  new google.maps.LatLng(-27.751827, 29.936295),
  new google.maps.LatLng(-28.734564, 24.756509),
  new google.maps.LatLng(-25.656175, 27.255232),
  new google.maps.LatLng(-26.956302, 24.728201),
  new google.maps.LatLng(-26.964996, 26.659299),
  new google.maps.LatLng(-26.808988, 27.829341),
  new google.maps.LatLng(-26.489940, 28.383779),
  new google.maps.LatLng(-26.459522, 29.465437),
  new google.maps.LatLng(-28.411019, 21.251776),
  new google.maps.LatLng(-22.556783, 17.065234),
  new google.maps.LatLng(-22.951268, 14.515005),
  new google.maps.LatLng(-34.408175, 19.253408),
  new google.maps.LatLng(-28.803741, 24.707523)
];

var markers = [];
var map;

function initialize() {
  var mapOptions = {
    zoom: 6,
    center: centerSA
  };

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

function drop() {
  clearMarkers();
  for (var i = 0; i < neighborhoods.length; i++) {
    addMarkerWithTimeout(neighborhoods[i], i * 200);
  }
}

function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP
    }));
  }, timeout);
}
function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}


google.maps.event.addDomListener(window, 'load', initialize);

    </script>

 

[Thor]

Ai my brain hurts, please someone put me out of my misery

 

[Darko]

Not sure if you've come right with this, but basically using the functions you posted last...

function initialize() {
var centerSA = new google.maps.LatLng(-30.289471, 24.284893);

var neighborhoods = [
  new google.maps.LatLng(-33.880754, 18.634368),
  new google.maps.LatLng(-33.873804, 18.634843),
  new google.maps.LatLng(-34.112384, 18.844713),
  new google.maps.LatLng(-34.082823, 18.840496),
  new google.maps.LatLng(-29.492389, 31.218657),
  new google.maps.LatLng(-33.863724, 18.578321),
  new google.maps.LatLng(-29.857765, 31.021630),
  new google.maps.LatLng(-26.028311, 28.004132),
  new google.maps.LatLng(-34.031815, 23.045850),
  new google.maps.LatLng(-34.053906, 23.370542),
  new google.maps.LatLng(-33.963073, 22.459156),
  new google.maps.LatLng(-32.989910, 27.872604),
  new google.maps.LatLng(-33.302933, 26.523438),
  new google.maps.LatLng(-28.768805, 32.019887),
  new google.maps.LatLng(-27.645871, 27.229928),
  new google.maps.LatLng(-28.236912, 28.308702),
  new google.maps.LatLng(-25.872222, 29.235887),
  new google.maps.LatLng(-27.751827, 29.936295),
  new google.maps.LatLng(-28.734564, 24.756509),
  new google.maps.LatLng(-25.656175, 27.255232),
  new google.maps.LatLng(-26.956302, 24.728201),
  new google.maps.LatLng(-26.964996, 26.659299),
  new google.maps.LatLng(-26.808988, 27.829341),
  new google.maps.LatLng(-26.489940, 28.383779),
  new google.maps.LatLng(-26.459522, 29.465437),
  new google.maps.LatLng(-28.411019, 21.251776),
  new google.maps.LatLng(-22.556783, 17.065234),
  new google.maps.LatLng(-22.951268, 14.515005),
  new google.maps.LatLng(-34.408175, 19.253408),
  new google.maps.LatLng(-28.803741, 24.707523)
];

var mapOptions = { zoom: 6, center: centerSA };

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

  for (var i = 0; i < neighborhoods.length; i++) {
    addMarkerWithTimeout(neighborhoods[i], 500);
  }

}

function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: "title"
  });

marker.setMap(map);
  }, timeout);
}

google.maps.event.addDomListener(window, 'load', initialize);

Initialize your variables, in the beginning, then execute the rest of the code.

 

[Darko]

I tried to create a fiddle for you, but not in the mood to go through the process of creating an API key.

If you're still struggling by the time I check the thread in the morning, just PM me your API key.

 

[Thor]

I'll post the full code tomorrow morning when I'm at the office again.

I don't use the api key just the normal Google api v3 exp.

 

[Thor]

Still not getting this right.

I need to display the titles on the animated markers.

 

[Thor]

Not sure if you've come right with this, but basically using the functions you posted last...

function initialize() {
var centerSA = new google.maps.LatLng(-30.289471, 24.284893);

var neighborhoods = [
  new google.maps.LatLng(-33.880754, 18.634368),
  new google.maps.LatLng(-33.873804, 18.634843),
  new google.maps.LatLng(-34.112384, 18.844713),
  new google.maps.LatLng(-34.082823, 18.840496),
  new google.maps.LatLng(-29.492389, 31.218657),
  new google.maps.LatLng(-33.863724, 18.578321),
  new google.maps.LatLng(-29.857765, 31.021630),
  new google.maps.LatLng(-26.028311, 28.004132),
  new google.maps.LatLng(-34.031815, 23.045850),
  new google.maps.LatLng(-34.053906, 23.370542),
  new google.maps.LatLng(-33.963073, 22.459156),
  new google.maps.LatLng(-32.989910, 27.872604),
  new google.maps.LatLng(-33.302933, 26.523438),
  new google.maps.LatLng(-28.768805, 32.019887),
  new google.maps.LatLng(-27.645871, 27.229928),
  new google.maps.LatLng(-28.236912, 28.308702),
  new google.maps.LatLng(-25.872222, 29.235887),
  new google.maps.LatLng(-27.751827, 29.936295),
  new google.maps.LatLng(-28.734564, 24.756509),
  new google.maps.LatLng(-25.656175, 27.255232),
  new google.maps.LatLng(-26.956302, 24.728201),
  new google.maps.LatLng(-26.964996, 26.659299),
  new google.maps.LatLng(-26.808988, 27.829341),
  new google.maps.LatLng(-26.489940, 28.383779),
  new google.maps.LatLng(-26.459522, 29.465437),
  new google.maps.LatLng(-28.411019, 21.251776),
  new google.maps.LatLng(-22.556783, 17.065234),
  new google.maps.LatLng(-22.951268, 14.515005),
  new google.maps.LatLng(-34.408175, 19.253408),
  new google.maps.LatLng(-28.803741, 24.707523)
];

var mapOptions = { zoom: 6, center: centerSA };

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

  for (var i = 0; i < neighborhoods.length; i++) {
    addMarkerWithTimeout(neighborhoods[i], 500);
  }

}

function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: "title"
  });

marker.setMap(map);
  }, timeout);
}

google.maps.event.addDomListener(window, 'load', initialize);

Initialize your variables, in the beginning, then execute the rest of the code.

Tried it, doesnt work. Issue is I have over 20 individual markers which needs individual titles

 

[Thor]

Here is the full code and snippet you can run:


http://stackoverflow.com/questions/...vidual-titles-for-multiple-google-map-markers

 

[Darko]

The JS fiddle the guy posted in his answer, does it not work for you?