Multiple Google Maps on one page

Hi all,
my aim is to have multiple Google Maps, each with 2 markers, 2 info windows and a polyline on a  single page.
One map on the page is no problem however creating more than 1 is giving me a little trouble..
http://beaconhilldesign.co.nz/~talofaairways/test.html
Cheers,
N
LVL 5
Neil_BradleyWeb UX/UI DeveloperAsked:
Who is Participating?
 
Rainer JeschorCommented:
Hi,
as the setMarkers function is called by both maps, you have to generalize the way how you create the flight route.
Fortunately the two markers have all necessary information:
				var FlightRoute74 = [
					new google.maps.LatLng(markers[0][1], markers[0][2]),
					new google.maps.LatLng(markers[1][1], markers[1][2])];
				var geodesicRoute74  = new google.maps.Polyline({
					path: FlightRoute74 ,
					geodesic: true, 
					strokeColor: "#e48311",
					strokeOpacity: 1.0,
					strokeWeight: 2
				});
				geodesicRoute74.setMap(map);

Open in new window

So instead of hard coding the two geo locations, just use the provided parameter:
markers[0][1] and markers[0][2]

One limitation of this: this will only work when passing the two route endpoints as the first two marker items.

HTH
Rainer
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There should be no issue with multiple maps.  Just make sure your id's are unique.

<div id="map-canvas"....

<div id="map-canvas2"....
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Hi Scott,
my aim is to have 2 different maps so adding another div with a new id is only part of the solution. I need to create a whole second code block containing my new map data. This is where I am getting a little stuck.
Cheers,
N
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Rainer JeschorCommented:
Hi,
the quick n dirty way would be to simply clone the configuration elements.
I added also standard HTML elements which are missing in your test page:
<!DOCTYPE HTML>
<html>
	<head>
		<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript"> 
			//<![CDATA[
			//initialise the infowindow so it's ready for use
			var infowindow = null;
			//function to actually initialise the map
			function initialize(condition) 
			{
				//zoom and set the default map type to RoadMap
				var latlng = new google.maps.LatLng(-15.972552,-172.221686);
				var latlng2 = new google.maps.LatLng(19.896766,-155.582782);
				var myOptions = {
					zoom: 6,
					scrollwheel: false,
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}; 
				
				var myOptions2 = {
					zoom: 6,
					scrollwheel: false,
					center: latlng2,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				//place the map on the canvas
				var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
				var map2 = new google.maps.Map(document.getElementById("map-canvas2"), myOptions2);
				//Set all your markers, the magic happens in another function - setMarkers(map, markers) which gets called
				setMarkers(map, items);
				setMarkers(map2, items2);
				infowindow = new google.maps.InfoWindow({
					content: "holding..."
				});
			}  
			
			var items = [		 
				['Location1', -14.331389, -170.711389, 1, '<div class="scrollFix"><p><strong>Loc 1<\/strong></p><\/div>'],
				['Location 2', -13.849237 , -171.740071, 1, '<div class="scrollFix"><p><strong>Loc 2<\/strong></p><\/div>']
			];
    
			var items2 = [		 
				['Location21', 21.324513, -157.925074, 1, '<div class="scrollFix"><p><strong>Honolulu Airport<\/strong></p><\/div>'],
				['Location22', 20.894740 , -156.435614, 1, '<div class="scrollFix"><p><strong>Kahului Airport<\/strong></p><\/div>']
			];
			//function to actually put the markers on the map
			function setMarkers(map, markers) 
			{
				//loop through and place markers
				for (var i = 0; i < markers.length; i++) 
				{
					var sites = markers[i];
					var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
					var marker = new google.maps.Marker({
						position: siteLatLng,
						map: map,
						title: sites[0],
						zIndex: sites[3],
						html: sites[4]
					});

					//initial content string
					var contentString = "Some content";

					//attach infowindow on click
					google.maps.event.addListener(marker, "click", function () 
					{
						infowindow.setContent(this.html);
						infowindow.open(map, this);
					});
				}
		
				var FlightRoute74 = [
					new google.maps.LatLng(-14.331389, -170.711389),
					new google.maps.LatLng(-13.849237 , -171.740071)];
				var geodesicRoute74  = new google.maps.Polyline({
					path: FlightRoute74 ,
					geodesic: true, 
					strokeColor: "#e48311",
					strokeOpacity: 1.0,
					strokeWeight: 2
				});
				geodesicRoute74 .setMap(map);
			}
		</script>
	</head>
	<body>
		<div id="map-canvas" style="width: 100%; height: 500px;"> </div>
		<div id="map-canvas2" style="width: 100%; height: 500px;"> </div>
		<script type="text/javascript">// <![CDATA[
			initialize();
		// ]]></script>
	</body>
</html>

Open in new window


HTH
Rainer
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Looking good.
Any thoughts on how to add a new polyline to the second map?
I thought that by adding another block of coordinates and changing geodesicRoute74 .setMap(map); to geodesicRoute74 .setMap(map2); would work but no luck.
Cheers,
Neil
0
 
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Thanks for that. I have adapted your answer a little however the end result is exactly what I needed.
Cheers,
N
0
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.

All Courses

From novice to tech pro — start learning today.