Help getting Child Webpage to change Map Marker in Parent Webpage

Hello,

I have a Parent Webpage with a Google Map which has several Markers on it.  When you click a marker it opens a Child Webpage.  When that Child Webpage is Submitted I'd like the color of the calling Marker on the Google Map to change.

My two pages are below.  Can you help me figure out how to have the Child Webpage update the marker color on the Parent Webpage?

Thanks!

CHILD
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Door-To-Door Popup</title>

    <!-- Bootstrap Related Code -->
    <link href="./bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- J-Query Related Code -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      .container {height: 100%;}
    </style>

</head>

<body>

  <!-- Bootstrap NavBar -->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.php">BCLD8</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.php">Home</a></li>
          <li><a href="maps.php">Map</a></li>
          <li><a href="citizens.php">Citizens</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

  <div class="container">
    <p><br/><br/></p>
  <!-- BEGIN CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<form name="popupform" id="popupform" action="maps_d2d_action.php" method="post">

<table>

<tr><td style="vertical-align:top; text-align:right; font-weight:bold;"></td><td><div style="text-align:left; font-weight:normal;"><input type="hidden" name="cid" id="cid" value="16"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Name:</div></td><td><div style="text-align:left; font-weight:normal;">Jack Smith</div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Address:</div></td><td><div style="text-align:left; font-weight:normal;">1096 Main St, Endicott, NY 13760</div></td></tr>

<tr><td colspan="2"><hr></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Status:</div></td><td><div style="text-align:left; font-weight:normal;"><select name="d2d_status" id="d2d_status">
  <option value="Not Home">Not Home</option>
  <option value="Talked With" SELECTED>Talked With</option>
  <option value="Never Return">Never Return</option>
  <option value="Not Visited">Not Visited</option>
</select></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Bring Sign:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="checkbox" name="d2d_bring_sign" id="d2d_bring_sign"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Has Sign:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="checkbox" name="d2d_has_sign" id="d2d_has_sign"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Follow Up:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="checkbox" name="d2d_follow_up" id="d2d_follow_up"></div></td></tr>

<tr><td><div style="text-align:right; font-weight:bold;">Notes:</div></td><td><div style="text-align:left; font-weight:normal;"><textarea name="d2d_notes" id="d2d_notes" rows="4" cols="40"></textarea></div></td></tr>

<tr><td colspan=2> </td></tr>

<tr><td><div> </div></td><td><div><input name="form_cancel_btm" id="form_cancel_btm" type="button" value="Cancel" onclick="self.close();"/><input name="form_submit_btm" id="form_submit_btm" type="button" value="Submit" onclick="UpdateMarkerColor();" style="width: 200px"/></div></td></tr>

</table>

</form>

<script type="text/javascript">

function UpdateMarkerColor() {

  //--- Trigger Change Map Marker Event in Parent Window ------
  

  //--- Trigger Form Submit -----------------------------------
  document.getElementById("popupform").submit();

}
</script>

  <!-- END CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  </div>

</body>
</html>

Open in new window

PARENT
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>BCLD8 Map</title>

    <!-- Bootstrap Related Code -->
    <link href="./bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- J-Query Related Code -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      .container {height: 100%;}
    </style>

</head>

<body>

  <!-- Bootstrap NavBar -->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="http://www.squeezeoj.com/index.php">BCLD8</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="http://www.squeezeoj.com/index.php">Home</a></li>
          <li><a href="maps.php">Map</a></li>
          <li><a href="citizens.php">Citizens</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="http://www.squeezeoj.com/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

  <div class="container">
    <p><br/><br/></p>
  <!-- BEGIN CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<!-- Google Map Related Code -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- Google Map -->
<div id="map-canvas" style="height:100%"></div>

<script>
//----------------------------------------------------------------------------
// DEFINE GLOBAL VARIABLES
//----------------------------------------------------------------------------

   //---Define Google Map Markers...
   //   Code lifted from http://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-dot-marker

   var pinColorRed = "990000";     // Red Pin with Black Dot
   var pinImageRed = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColorRed,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));

   var pinColorBlue = "000099";     // Blue Pin with Black Dot
   var pinImageBlue = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColorBlue,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));

   var pinColorGreen = "009900";     // Green Pin with Black Dot
   var pinImageGreen = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColorGreen,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));

   var pinColorYellow = "FFFF00";     // Yellow Pin with Black Dot
   var pinImageYellow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColorYellow,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));


//----------------------------------------------------------------------------
// INITIALIZE FUNCTION
//    * Creates Map at Centered at Binghamton
//----------------------------------------------------------------------------
function initialize() {
  var latitude = 42.0986111,
      longitude = -75.9183333,
      center = new google.maps.LatLng(latitude,longitude),
      mapOptions = {
        center: center,
        zoom: 10,
        zoomControl: false,
        mapTypeControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        scrollwheel: true
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      setMarkers(center, map);
}


//----------------------------------------------------------------------------
// SET MARKERS FUNCTION
//   * Reads Marker Locations from JSON Data File
//----------------------------------------------------------------------------
function setMarkers(center, map) {

    //--- Get Data from Database ---------------------------------------------
    var voters = new Array();
    voters.push({vid:'16', firstname:'Jeff', lastname:'Smith', street:'1096 Main St.', city:'Endicott', state:'NY', zip:'13760', geolatitude:'42.134453', geolongitude:'-76.03945700000003', geoaddress:'1096 Taft Ave, Endwell, NY 13760'});
    voters.push({vid:'18', firstname:'Joe', lastname:'Jones', street:'106 Front St.', city:'Endicott', state:'NY', zip:'13760', geolatitude:'42.137453', geolongitude:'-76.02945700000003', geoaddress:'1096 Taft Ave, Endwell, NY 13760'});
    var vid;
    var name;
    var address;
    var lat;
    var lng;
    var url;
    voters.forEach(function(voter) {
      vid = voter.vid;
      name = voter.firstname + " " + voter.lastname;
      address = voter.street + ", " + voter.city + ", " + voter.state + " " + voter.zip;
      lat = voter.geolatitude;
      lng = voter.geolongitude;
      url="http://www.squeezeoj.com/maps_d2d_popup.php?id="+vid;
      //alert(name + " is at " + lat + ", " + lng);

      //--- Add Map Marker -------------------------------------------------
      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat,lng),
          map: map,
          icon: pinImageBlue ,
          title: name,
          url: url
      });

      //--- Add Info Box ---------------------------------------------------
      infoBox(map, marker, name);

    });     // End ForEach Loop

}


//----------------------------------------------------------------------------
// SET INFOBOX AND ADD EVENT LISTENERS
//----------------------------------------------------------------------------
function infoBox(map, marker, data) {

    //var infoWindow = new google.maps.InfoWindow();

    //--- OnClick Open Edit Form ---------------------------------------------
    google.maps.event.addListener(marker, "click", function(e) {
       window.open(this.url,'_blank');
    });

    //--- Create Closure to Retain Correct Data ------------------------------
    // Note how I pass the current data in the loop into the closure (marker, data)
   (function(marker, data) {
      //--- Attach Click Event to Current Marker -----------------------------
      google.maps.event.addListener(marker, "click", function(e) {
        infoWindow.setContent(data);
        infoWindow.open(map, marker);
      });
    })(marker, data);
}


//----------------------------------------------------------------------------
// RUN INITIALIZE
//----------------------------------------------------------------------------
initialize();

</script>

  <!-- END CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  </div>

</body>
</html>

Open in new window

SqueezeOJAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I have time to only give this a quick glance.

Can you not define a function in the parent that you call from the child using the window.opener property to access the window that opened the child
https://developer.mozilla.org/en-US/docs/Web/API/Window/opener

So something like this on line 108 of the child window
window.opener.updateMarker(datatosend);

Open in new window


And in the parent
function updateMarker(data)
{
 ... // Update your marker here using data passed into function
}

Open in new window

1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SqueezeOJAuthor Commented:
Hi Julian,

Thank you for pointing me in the right direction.  I think I fixed the problem like this:

Define a global markers array in the Parent:
   var myMarkers = []

Add map markers using an incremented array in the Parent:
      myMarkers[ i ] = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        map: map,
        icon: myColor,
        title: name + "\n" + d2dstatus,
        url: url
      });

Pass the map marker (i) to the Child page and when the Child closes, send that map marker (i) back to the Parent to update the map marker, using:    myMarkers[markerid].setIcon(myColor)
0
Julian HansenCommented:
Sounds good - good luck with it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Google Apps

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.