How to merge the same code in 1 code

Hi! I’m to learn javascript but this script make me don’t know how to solve, thks for someone who help me.

I used notepad save it as html format, preview used chrome.

The original code

function initialize() {
var coord = new google.maps.LatLng( 2.04720020294189, 102.567481994629),var coord = new google.maps.LatLng( 5.37714958190918, 115.236274719238);
var myOptions = {zoom:  12,center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions );
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng( 1.957268, 102.4775), new google.maps.LatLng( 2.137132, 102.6575));
rmap1 =new google.maps.GroundOverlay("Coverage.png", boundaries1);
rmap1.setMap(map);
 },

Self adding code

function initialize() {
var coord = new google.maps.LatLng( 5.37714958190918, 115.236274719238);
var myOptions = {zoom:  10,center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions );
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng( 5.287218, 115.1459), new google.maps.LatLng( 5.467082, 115.3266));
rmap1 =new google.maps.GroundOverlay("Coverage 2.png", boundaries1);
rmap1.setMap(map);
 }

The Completely code

This is completely code I do like this, but when i preview is a blank page.

<!DOCTYPE html><html><head>
<title>Circles | Network Coverage</title>
<style type="text/css">html { height: 90% }body { height: 100%; background-color:#6551a2 }</style>
<script language="javascript" type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script><script type="text/javascript">
function initialize() {
var coord = new google.maps.LatLng( 2.04720020294189, 102.567481994629),var coord = new google.maps.LatLng( 5.37714958190918, 115.236274719238);
var myOptions = {zoom:  12,center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions );
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng( 1.957268, 102.4775), new google.maps.LatLng( 2.137132, 102.6575));
rmap1 =new google.maps.GroundOverlay("Coverage.png", boundaries1);
rmap1.setMap(map);
 },
 function initialize() {
var coord = new google.maps.LatLng( 5.37714958190918, 115.236274719238);
var myOptions = {zoom:  10,center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions );
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng( 5.287218, 115.1459), new google.maps.LatLng( 5.467082, 115.3266));
rmap1 =new google.maps.GroundOverlay("RM5922587E7B3_25.png", boundaries1);
rmap1.setMap(map);
 }
function showcov(m,v){if(v.checked) m.setMap(map); else m.setMap(null);}
</script>
<body onload="initialize()">
<div id="map_canvas" style="width:100%;height:98%"></div>
</body>
</head></html>

you can’t merge these codes as the one would overwrite the other.

Yes, you’ve got two functions defined with the same name, so that won’t work as you intend. You also direct both maps to the same div in the page, so you’ll need to figure out some kind of page layout that allows you to see both maps, presuming you want both maps to be displayed. Once you have that, you could choose to have one initialize() function that calls two separately-named functions, each of which creates one map, or you could merge the two functions together as one big on, though obviously you’d need to deal with the variable names if you go that way.

I’m still can’t understanding what you mean, can do make an example. Cuz I still failed with using other step.

Well, roughly you could do something like this, I think:

<!DOCTYPE html><html><head>
<title>Circles | Network Coverage</title>
<style type="text/css">html { height: 90% }body { height: 100%; background-color:#6551a2 }</style>
<script language="javascript" type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script><script type="text/javascript">

function initialize() {
  initfirst();  // call the first function
  initsecond();  // and call the second one
}

function initfirst() {
var coord = new google.maps.LatLng( 2.04720020294189, 102.567481994629),var coord = new google.maps.LatLng( 5.37714958190918, 115.236274719238);
var myOptions = {zoom:  12,center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions );
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng( 1.957268, 102.4775), new google.maps.LatLng( 2.137132, 102.6575));
rmap1 =new google.maps.GroundOverlay("Coverage.png", boundaries1);
rmap1.setMap(map);
 }
 function initsecond() {
var coord = new google.maps.LatLng( 5.37714958190918, 115.236274719238);
var myOptions = {zoom:  10,center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions );
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng( 5.287218, 115.1459), new google.maps.LatLng( 5.467082, 115.3266));
rmap1 =new google.maps.GroundOverlay("RM5922587E7B3_25.png", boundaries1);
rmap1.setMap(map);
 }
function showcov(m,v){if(v.checked) m.setMap(map); else m.setMap(null);}
</script>
<body onload="initialize()">
<div id="map_canvas" style="width:100%;height:98%"></div>
</body>
</head></html>

Now, I don’t know a lot of JavaScript so I can’t say for sure if that’ll work, nor whether it’ll do what you want. What I intended to do was to rename the two functions in your sample code so that they are not both named the same (you can’t have two with the same name, how would it know which one to run), and then add another initialize function whose sole job is to call the other two.

BUT, and it’s a significant one that I mentioned earlier, when you call the second function, it’s going to draw the map in the same place on your page as the first one. You only have the one div, and both functions stick a map in it. So even if the code works I doubt the display will be much good.

There looks to be a lot of duplication in the initfirst() and initsecond() functions.
How about if move some of that duplication out to a separate initMap function, so that the initfirst and initsecond functions just pass the differing information to initMap() ?

function initMap(coord, zoom, boundaryFrom, boundaryTo, groundOverlay) {
  var myOptions = {zoom: zoom, center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP};
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var boundaries1 = new google.maps.LatLngBounds(boundaryFrom, boundaryTo);
  rmap1 = new google.maps.GroundOverlay(groundOverlay, boundaries1);
  rmap1.setMap(map);
}
function initfirst() {
  var coord = new google.maps.LatLng( 2.04720020294189, 102.567481994629);
  var boundaryFrom = new google.maps.LatLng( 1.957268, 102.4775);
  var boundaryTo = new google.maps.LatLng( 2.137132, 102.6575);
  initMap(coord, 12, boundaryFrom, boundaryTo, "Coverage.png");
}
function initsecond() {
  var coord = new google.maps.LatLng( 5.37714958190918, 115.236274719238);
  var boundaryFrom = new google.maps.LatLng( 5.287218, 115.1459);
  var boundaryTo = , new google.maps.LatLng( 5.467082, 115.3266);
  initMap(coord, 10, boundaryFrom, boundaryTo, "RM5922587E7B3_25.png");
}
function initialize() {
  initfirst();  // call the first function
  initsecond();  // and call the second one
}

I didn’t look much deeper into it, your code does look much neater. Might need to add a parameter for which div to stick the resulting map into, when the OP adds another. Unless the two maps are intended to overlay each other.

Yep, good idea. We can use a canvas parameter for that.
As there’s a lot of parameters involved now, we can also use a separate createMap() function to help reduce some of the complexity, and use an options variable, which helps to deal with the rest of the parameters and simplifies the initfirst() and initsecond() functions.

function createMap(coord, zoom, canvas) {
  var myOptions = {zoom: zoom, center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP};
  map = new google.maps.Map(canvas, myOptions);
  return map;
}
function initMap(options) {
  var boundaries1 = new google.maps.LatLngBounds(options.boundaryFrom, options.boundaryTo);
  rmap1 = new google.maps.GroundOverlay(options.groundOverlay, boundaries1);
  rmap1.setMap(options.map);
}
function initfirst(canvas) {
  var coord = new google.maps.LatLng( 2.04720020294189, 102.567481994629);
  initMap({
    map: createMap(coord, 12, canvas),
    boundaryFrom: new google.maps.LatLng( 1.957268, 102.4775),
    boundaryTo: new google.maps.LatLng( 2.137132, 102.6575),
    groundOverlay: "Coverage.png"
  });
}
function initsecond(canvas) {
  var coord = new google.maps.LatLng( 5.37714958190918, 115.236274719238);
  initMap({
    map: createMap(coord, 12, canvas),
    boundaryFrom: new google.maps.LatLng( 5.287218, 115.1459),
    boundaryTo: new google.maps.LatLng( 5.467082, 115.3266),
    groundOverlay: "RM5922587E7B3_25.png"
  });
}
function initialize() {
  initfirst(document.getElementById("map_canvas1"));  // call the first function
  initsecond(document.getElementById("map_canvas2"));  // and call the second one
}
1 Like

I tested again already if removed the related with function initsecond script will work. If I used the original code from Paul given is not working.

PS: Don’t know the<body> is require or not ?

function initMap(coord, zoom, boundaryFrom, boundaryTo, groundOverlay) {
  var myOptions = {zoom: zoom, center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP};
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var boundaries1 = new google.maps.LatLngBounds(boundaryFrom, boundaryTo);
  rmap1 = new google.maps.GroundOverlay(groundOverlay, boundaries1);
  rmap1.setMap(map);
}
function initfirst() {
  var coord = new google.maps.LatLng( 2.04720020294189, 102.567481994629);
  var boundaryFrom = new google.maps.LatLng( 1.957268, 102.4775);
  var boundaryTo = new google.maps.LatLng( 2.137132, 102.6575);
  initMap(coord, 12, boundaryFrom, boundaryTo, "Coverage.png");
}
function initialize() {
  initfirst();  // call the first function
}

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