Two Google Maps Javascript, on same web page

I struggled to find a way to do this.

There are a few articles or videos showing how to do it, but none seemed to work.

I finally got it working reliably and thought I would share how I did it in case somebody else is trying to do this.

Here is a sample output.

https://guestworkervisas.com/bertest.php?criteria1=TATA+CONSULTANCY+SERVICES+LIMITED&year=2024H1B

The link above is to the actual map.

Here is how I did it.

initMap1();

initMap2();

async function initMap1() {

var map1;

var bounds1 = new google.maps.LatLngBounds();

var junction = {lat: 39.0997, lng: -94.5786};

map1 = new google.maps.Map(document.getElementById(‘map1’),

{

zoom: 2,

center: junction,

});

<?php

include(‘db_include.php’);

$query = “SELECT EMPLOYER_NAME, SECONDARY_ENTITY_BUSINESS_NAME, WORKSITE_ADDRESS1, WORKSITE_CITY, WORKSITE_STATE, WORKSITE_POSTAL_CODE, WORKSITE_WORKERS,replace(replace(WAGE_RATE_OF_PAY_FROM, ‘,’, ”), ‘$’, ”) as payroll, JOB_TITLE, lat, lng FROM ” . $year . ” where EMPLOYER_NAME = ‘” . $criteria1 . “‘ AND WORKSITE_CITY = ‘” . $city . “‘ AND WORKSITE_STATE = ‘” . $state . “‘ AND lat IS NOT NULL LIMIT 50000 ” ;

//echo $query;

$result = mysqli_query($dbcon, $query);

$kk = 1;

while ($row = @mysqli_fetch_array($result)) {

$visatype = ‘H1B’;

$employername = addslashes($row[‘EMPLOYER_NAME’]);

$secemployername = addslashes($row[‘SECONDARY_ENTITY_BUSINESS_NAME’]);

$workaddress = addslashes($row[‘WORKSITE_ADDRESS1’]);

$workcity = addslashes($row[‘WORKSITE_CITY’]);

$workstate = $row[‘WORKSITE_STATE’];

$workzip = $row[‘WORKSITE_POSTAL_CODE’];

$workworkers = $row[‘WORKSITE_WORKERS’];

$worktitle = addslashes($row[‘JOB_TITLE’]);

$workpay = $row[‘WAGE_RATE_OF_PAY_FROM’];

switch ($workpay) {

case $workpay <= 75000:

$marker = “green”;

break;

case $workpay > 75000 AND $workpay <= 150000:

$marker = “yellow”;

break;

case $workpay > 150000 AND $workpay <= 300000:

$marker = “red”;

break;

case $workpay > 300000:

$marker = “white”;

break;

}

$latitude = $row[‘lat’];

$longitude = $row[‘lng’]; ?>

add_marker1(map1, bounds1, ‘<?php echo $kk; ?>’, ‘<?php echo $latitude; ?>’, ‘<?php echo $longitude; ?>’, ‘<?php echo $employername; ?>’, ‘<?php echo $secemployername; ?>’, ‘<?php echo $workaddress; ?>’, ‘<?php echo $workcity; ?>’, ‘<?php echo $workstate; ?>’, ‘<?php echo $workzip; ?>’, ‘<?php echo $workworkers; ?>’, ‘<?php echo $worktitle; ?>’, ‘<?php echo $workpay; ?>’, ‘<?php echo $marker; ?>’ ); <?php

++$kk;

}

map1.fitBounds(bounds1);

}

function add_marker1(map1, bounds1, i, lat, lon, employername, secemployername , workaddress , workcity , workstate , workzip, workworkers, worktitle, workpay, markercolor)

{

var number = parseInt(i);

var lat = lat;

var lon = lon;

var employername = employername;

var secemployername = secemployername;

var workaddress = workaddress;

var workcity = workcity;

var workstate = workstate;

var workzip = workzip;

var workworkers = workworkers;

var worktitle = worktitle;

var workpay = workpay;

var visatype = visatype;

var position1 = new google.maps.LatLng(lat, lon);

switch(markercolor) {

case “green”:

var marker = new google.maps.Marker({

position: position1,

map: map1,

icon: ‘darkgreen_MarkerA.png’

});

break;

case “red”:

var marker = new google.maps.Marker({

position: position1,

map: map1,

icon: ‘red_MarkerA.png’

});

break;

case “yellow”:

var marker = new google.maps.Marker({

position: position1,

map: map1,

icon: ‘yellow_MarkerA.png’

});

break;

case “white”:

var marker = new google.maps.Marker({

position: position1,

map: map1,

icon: ‘brown_MarkerA.png’

});

break;

}

bounds1.extend(marker.position);

map1.setCenter(position1);

map1.fitBounds(bounds1);

zoomLevel = map1.getZoom();

contentString = ”;

contentString = contentString + ‘Employer Name: ‘ + employername + ‘<br>’;

contentString = contentString + ‘Secondary Employer Name: ‘ + secemployername + ‘<br>’;

contentString = contentString + ‘Work Address: ‘ + workaddress + ‘<br>’;

contentString = contentString + ‘Work City: ‘ + workcity + ‘<br>’;

contentString = contentString + ‘Work State: ‘ + workstate + ‘<br>’;

contentString = contentString + ‘Work Zip Code: ‘ + workzip + ‘<br>’;

contentString = contentString + ‘Worksite Workers: ‘ + workworkers + ‘<br>’;

contentString = contentString + ‘Worksite Title: ‘ + worktitle + ‘<br>’;

contentString = contentString + ‘Worksite Pay: ‘ + workpay + ‘<br>’;

contentString = contentString + ‘Latitude: ‘ + lat + ‘<br>’;

contentString = contentString + ‘Longitude: ‘ + lon + ‘<br>’;

attachMessage1(marker, contentString);

}

function attachMessage1(marker)

{

var infowindow = new google.maps.InfoWindow({

content: contentString

});

google.maps.event.addListener(marker, ‘click’, function() {

infowindow.open(marker.get(‘map1’), marker);

});

}

async function initMap2() {

var map2;

var junction = {lat: 39.0997, lng: -94.5786};

var bounds2 = new google.maps.LatLngBounds();

map2 = new google.maps.Map(document.getElementById(‘map2’),

{

zoom: 2,

center: junction,

});

<?php

include(‘db_include.php’);

$query = “SELECT EMPLOYER_NAME, SECONDARY_ENTITY_BUSINESS_NAME, WORKSITE_ADDRESS1, WORKSITE_CITY, WORKSITE_STATE, WORKSITE_POSTAL_CODE, WORKSITE_WORKERS,replace(replace(WAGE_RATE_OF_PAY_FROM, ‘,’, ”), ‘$’, ”) as payroll, JOB_TITLE, lat, lng FROM ” . $year . ” where WORKSITE_CITY = ‘” . $city . “‘ AND WORKSITE_STATE = ‘” . $state . “‘ AND lat IS NOT NULL ” ;

//echo $query;

$result = mysqli_query($dbcon, $query);

$kk = 1;

while ($row = @mysqli_fetch_array($result)) {

$visatype = ‘H1B’;

$employername = addslashes($row[‘EMPLOYER_NAME’]);

$secemployername = addslashes($row[‘SECONDARY_ENTITY_BUSINESS_NAME’]);

$workaddress = addslashes($row[‘WORKSITE_ADDRESS1’]);

$workcity = addslashes($row[‘WORKSITE_CITY’]);

$workstate = $row[‘WORKSITE_STATE’];

$workzip = $row[‘WORKSITE_POSTAL_CODE’];

$workworkers = $row[‘WORKSITE_WORKERS’];

$worktitle = addslashes($row[‘JOB_TITLE’]);

$workpay = $row[‘payroll’];

switch ($workpay) {

case $workpay <= 75000:

$marker = “green”;

break;

case $workpay > 75000 AND $workpay <= 150000:

$marker = “yellow”;

break;

case $workpay > 150000 AND $workpay <= 300000:

$marker = “red”;

break;

case $workpay > 300000:

$marker = “white”;

break;

}

$latitude = $row[‘lat’];

$longitude = $row[‘lng’]; ?>

add_marker2(map2, bounds2, ‘<?php echo $kk; ?>’, ‘<?php echo $latitude; ?>’, ‘<?php echo $longitude; ?>’, ‘<?php echo $employername; ?>’, ‘<?php echo $secemployername; ?>’, ‘<?php echo $workaddress; ?>’, ‘<?php echo $workcity; ?>’, ‘<?php echo $workstate; ?>’, ‘<?php echo $workzip; ?>’, ‘<?php echo $workworkers; ?>’, ‘<?php echo $worktitle; ?>’, ‘<?php echo $workpay; ?>’, ‘<?php echo $visatype; ?>’, ‘<?php echo $marker; ?>’ ); <?php

++$kk;

}

map2.fitBounds(bounds2);

}

function add_marker2(map2, bounds2, i, lat, lon, employername, secemployername , workaddress , workcity , workstate , workzip, workworkers, worktitle, workpay, visatype, markercolor)

{

var number = parseInt(i);

var lat = lat;

var lon = lon;

var employername = employername;

var secemployername = secemployername;

var workaddress = workaddress;

var workcity = workcity;

var workstate = workstate;

var workzip = workzip;

var workworkers = workworkers;

var worktitle = worktitle;

var workpay = workpay;

var visatype = visatype;

var position2 = new google.maps.LatLng(lat, lon);

switch(markercolor) {

case “green”:

var marker = new google.maps.Marker({

position: position2,

map: map2,

icon: ‘darkgreen_MarkerA.png’

});

break;

case “red”:

var marker = new google.maps.Marker({

position: position2,

map: map2,

icon: ‘red_MarkerA.png’

});

break;

case “yellow”:

var marker = new google.maps.Marker({

position: position2,

map: map2,

icon: ‘yellow_MarkerA.png’

});

break;

case “white”:

var marker = new google.maps.Marker({

position: position2,

map: map2,

icon: ‘brown_MarkerA.png’

});

break;

}

bounds2.extend(marker.position);

map2.setCenter(position2);

map2.fitBounds(bounds2);

zoomLevel = map2.getZoom();