Google Multiple Maps - unable to show marker

JavaScript
1

The following Google Maps web pages are PHP generated and have had all the dross removed hopefully to make the task easier…

Problem:

I am unable to show a Google Map Marker on the following web page:

<!DOCTYPE HTML>
<html lang='en'>
<head>
<title> SP Multiple Google Maps without marker </title>
<meta charset="utf-8">
<meta name="description" content="John_Betong's LoRaWAN SVG Charts" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<style>
body {
  font: 16px/1.55 
  "Segoe UI", 
  Roboto, Helvetica, Arial, sans-serif;
  border:0; margin:0; padding:0; 
  background-color: #f0f0f0; color:#333;
}
.mga {margin: 0 auto;}
.tac {text-align:center;}
.w88 {width:88%;}

/* MAP STUFF START */
	.outside .block-item {
	  width:100%; height:400px;
	  margin:0 0 11em;
	  background-color:#ddd;
	}
	.outside .block-item .map-item {
		height:100%; 
	  border: solid 1px #ccc;
}
/* MAP STUFF FINISH */
</style>
<script async defer src="https://maps.google.com/maps/api/js?key=MY_PERSONAL_KEY_GOES_HERE&callback=drawMap">
</script>

<script>
	var NO_LEADING_COMMA, map_0, map_1, map_2, map_3, map_4;
	function drawMap()
	{
		var mapOptions =
		{
		  zoom: 13,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  mapTypeControl: true,
		  fullscreenControl: false 
		}
		
		mapOptions.center = new google.maps.LatLng( 13.74092000, 100.52546000);

		map_0 = new google.maps.Map(document.getElementById("mapCanvas_0"), mapOptions);		
		mapOptions.center = new google.maps.LatLng( 53.82668000, -1.76266000);

		map_1 = new google.maps.Map(document.getElementById("mapCanvas_1"), mapOptions);		
		mapOptions.center = new google.maps.LatLng( 53.79051000, -1.75526000);

		map_2 = new google.maps.Map(document.getElementById("mapCanvas_2"), mapOptions);	
		mapOptions.center = new google.maps.LatLng( 54.80492400, -1.58184740);

		map_3 = new google.maps.Map(document.getElementById("mapCanvas_3"), mapOptions);	
		mapOptions.center = new google.maps.LatLng( 53.98064000, -1.56151630);
	}
</script>
 
</head>
<body> 
	<div class="w88 mga">

  	<h1> Google Multiple Maps </h1>  
	 	
  		<dl>
        <dt> Location: 13.74092000, &nbsp; 100.52546000 </dt>
        <dd class="tac">  
          <div class="outside">
						<div class="block-item">
				    	<div id="mapCanvas_0" class="map-item">
				    	</div>
       			 	<b class="tac"> ¯\_(ツ)_/¯ </b>
						</div>
          </div>
        </dd>  

      	<dt> Location: 53.82668000, &nbsp; -1.76266000 </dt>
        <dd class="tac">  
          <div class="outside">
						<div class="block-item">
				    	<div id="mapCanvas_1" class="map-item">
				    	</div>
	          	<b class="tac"> ¯\_(ツ)_/¯ </b>
						</div>
	      	</div>
        </dd>  
      </dl>

	  </div><!-- <div class="w88 mga"> --> 

</body></html>

Assumption:

I thought it would be a simple task to insert the JavaScript from the following Google Single Maps web-page, adjust the relevant JavaScript variables and the markers would appear. Unfortunately not only did the markers not appear but all ten maps disappeared :frowning:

I unsuccessfully tried numerous options and would be grateful to know what I am doing wrong,

Here is the Google Single Map from where I copied the relevant JavaScript Google Map Marker:

<!DOCTYPE HTML>
<html lang='en'>
<head>
<title> SP-Single Google Maps </title>
<meta charset="utf-8">
<meta name="description" content="goes here " />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<style>
dl {
	width:88%; 
	margin:0 auto;
}
#map {
 	height:100%; 
 	min-height:400px;
}
</style>
</head>
<body> 
  	<h1> Single Map with a marker </h1>
    
    <dl>
    	<dt>
        Location: 54.34076, &nbsp; -1.4352344
      </dt>
        
      <dd>
      	<div id="map">
      		<!-- 
      			REQUIRED BY JavaScript generated HTML
					-->
      	</div>
      	<!-- Google Generated INVALID HTML MARKUP -->
				<script>
			  	function initMap(){
			    	var myLatLng = {
			      	lat: 54.34076, 
			        lng: -1.4352344
			       };

			      var map = new google.maps.Map(document.getElementById('map'),{
			       	zoom: 11,
			        center: myLatLng
			      });

			      var marker = new google.maps.Marker({
			       	position: myLatLng,
			        map: map,
			        title: "This works as expected"
			      });
			    }
			  </script>
		    <script async defer
			    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZIFKDOMnrzwvMBDCZbUeWwG8kVS95XuY&callback=initMap">
	    	</script>        
      </dd>
      <dd> &nbsp; <br><br> </dd>

    </dl>  
</body>
</html>
2

There’s nothing in the first example that sets a marker.

mapOptions.center = new google.maps.LatLng( 13.74092000, 100.52546000);
map_0 = new google.maps.Map(document.getElementById("mapCanvas_0"), mapOptions);
new google.maps.Marker({ position: { lat: 13.74092000, lng: 100.52546000}, map: map_0, title: "Hello" });

This would set a marker in the middle of the first map.

1 Like
3

Absolutely amazing - thank you very much. Please believe me I tried umpteen options all without success and mostly with a blank map!

This is the modified PHP generated script:

<?php 
...
...
...
//===========================================
PUBLIC function getMapScript( array $aCoords)
:string
{
  $sMapVars = 'NO_LEADING_COMMA';

  $sMaps = '';
  foreach($aCoords as $IDZ => $latlng):
    $sMapVars .= ", map_$IDZ";

    $sMaps .= <<< ____TMP
      mapOptions.center = new google.maps.LatLng( {$latlng[0]}, {$latlng[1]});
      map_$IDZ = new google.maps.Map(document.getElementById("mapCanvas_$IDZ"), mapOptions);
      new google.maps.Marker({ position: { lat: {$latlng[0]}, lng: {$latlng[1]} }, map: map_$IDZ, title: "AmbaSense: $IDZ" });
      // ADDED THE ABOVE LINE AND IT WORKED ON ALL TEN MAPS!
____TMP;
  endforeach;		

$result = <<< ____TMP
	<script async defer src="https://maps.google.com/maps/api/js?key=$this->YOUR_API_KEY&callback=drawMap"></script>

	<script>
		var $sMapVars;
		function drawMap()
		{
			var mapOptions =
			{
		  zoom: 13,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  mapTypeControl: true,
		  fullscreenControl: false 
			}
			$sMaps
		}
	</script>
____TMP;

return $result;
}///

Edit:
Formatted

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.