We help IT Professionals succeed at work.

Need help adding 2 additional markers to embedded Google Map using API

egoselfaxis asked
I need to figure out how to add some additional markers to the embedded google map that's on this page:


I've already figured out how to add the image overlays that display the addresses when clicked.  All I have to do is add an additional unordered list item similar to the following and then change it's X and Y coordinates and the image file name:

<li data-x="-95.380427" data-y="30.115507" data-basic="images/BLE-map-marker.png" data-active="images/gmap_marker_active.png">
                    <p>3440 Riley Fuzzel Rd, Suite 150, Spring, TX 77386 <span>Call 281-364-7440</span></p>

Open in new window

What I can't seem to figure out is how to insert some additional red markers by updating the Javascript:


The section that needs to be re-written -- I suspect -- is the following:

defaults = {
            map: {
                x: -95.3726757,
                y: 30.1183008,
                zoom: 13
            locations: []

Open in new window

.. but I'm not entirely sure.  Can anyone here be of any assistance?  How would I add - say - 2 additional X / Y coordinates to the Javascript so that it shows 2 additional markers in the embedded Google map?

-- Yvan
Watch Question

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Looking at the docs, I think you just need to add to locations[].

Review the api https://developers.google.com/maps/documentation/javascript/markers and find the "complex" example
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: -33.9, lng: 151.2}


// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['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]

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]

Open in new window

The link to example is confusing, it is below, not above that bit of code https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/icon-complex

That example uses beaches[] instead of locations[]. The point is to add your data there.


I'd already tried that .. meaning adding an array of locations to the existing Javascript.  But no additional markers were displayed on the map after I made the changes.  What doesn't make sense is that I currently have no locations specified .. yet the X and Y coordinates that are already being specified are resulting in the expected single marker.  Is there no way to simply add some additional X and Y coordinates?
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Ok, I read your question again. "What I can't seem to figure out is how to insert some additional red markers by updating the Javascript:"

I think that plug in is working by adding html instead of updating the javaascipt. Where is the link to your plug in?  I tried to find it myself and all I came up with the author's site which is just a nav bar and then found git https://github.com/ZemezPlugins. Also https://zemez.io/html/support/knowledge-base/addchange-map-markers-based-rd-google-map/

If you add multiple LI tags with different lat/lon, are you not seeing multiple map markers?  

You have the li's commented out
 <li data-x="-95.380427" data-y="30.115507" data-basic="images/BLE-map-marker.png"
                    <p> 3440 Riley Fuzzel Rd, Suite 150, Spring, TX 77386 <span>Call 281-364-7440</span></p>
                <!--<li data-x="-94.380427" data-y="29.115507" data-basic="images/amenities-gallery28-thumb.jpg"
                    <p> 666 boop lane! <span>Call 666-666-666</span></p>

                <li data-x="-96.380427" data-y="31.115507" data-basic="images/amenities-gallery10-thumb.jpg"
                    <p> 666 boop lane! <span>Call 666-666-666</span></p>

Open in new window

If you uncomment one and change the lat/lon, do you see multiple markers?


A ha !!!   Guess what I just discovered.  That little round red marker that I'm seeing plotted on map is actually in the alpha transparent image!  This whole time, I was certain that it was being added there using javascript!  No wonder I've been spinning my wheels!


So I guess it really is as simple as just adding the additional list items and changing the coordinates and image URLs.

Thanks for your help and your time Scott,
-- Yvan