Hi i am new user and learning javascript google map api, i am seeking for help as to how to combine below 2 scripts in 1.
After i have trial and error, still not working, what i want to achieve is to put map 2 in map 1 below, can somebody advise me. thank you so much.
// Map 1
<script>
// This example adds hide() and show() methods to a custom overlay's prototype.
// These methods toggle the visibility of the container <div>.
// Additionally, we add a toggleDOM() method, which attaches or detaches the
// overlay to or from the map.
var map;
var overlay;
var layers = [];
var searchBox;
USGSOverlay.prototype = new google.maps.OverlayView();
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 1.525420, lng: 103.712070},
mapTypeId: 'roadmap'
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(1.387614, 103.559777),
new google.maps.LatLng(1.627168, 103.879872));
var srcImage = 'http://';
srcImage += 'image.PNG';
overlay = new USGSOverlay(bounds, srcImage, map);
layers [0] = new google.maps.KmlLayer('https://www.google.com/maps/d/kml?mid=',
{preserveViewport: false, suppressInfoWindows: false});
layers [1] = new google.maps.KmlLayer('https://www.google.com/maps/d/kml?mid=1soCR98w1-7w8UH_eenwNyk1RpN0j2zJ0&ll=',
{preserveViewport: false, suppressInfoWindows: false});
layers [2] = new google.maps.KmlLayer('https://www.google.com/maps/d/kml?mid=',
{preserveViewport: false, suppressInfoWindows: false});
layers [3] = new google.maps.KmlLayer('https://www.google.com/maps/d/kml?mid=',
{preserveViewport: false, suppressInfoWindows: false});
layers [4] = new google.maps.KmlLayer('https://www.google.com/maps/d/kml?mid=1aVIX-C1bRmxomzCLV4ymH1VSKfAma_B6',
{preserveViewport: false, suppressInfoWindows: false});
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(null);
}
}
function toggleLayer(i) {
if (layers[i].getMap() === null) {
layers[i].setMap(map);
}
else {
layers[i].setMap(null);
}
}
/** @constructor */
function USGSOverlay(bounds, image, map) {
// Now initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.border = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayImage" pane.
var panes = this.getPanes();
panes.overlayImage.appendChild(this.div_);
};
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
};
// Set the visibility to 'hidden' or 'visible'. ------here----
USGSOverlay.prototype.hide = function() {
if (this.div_) {
// The visibility property must be a string enclosed in quotes.
this.div_.style.visibility = 'hidden';
}
};
USGSOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = 'visible';
}
};
USGSOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility === 'hidden') {
this.show();
} else {
this.hide();
}
}
};
// Detach the map from the DOM via toggleDOM().
// Note that if we later reattach the map, it will be visible again,
// because the containing <div> is recreated in the overlay's onAdd() method.
USGSOverlay.prototype.toggleDOM = function() {
if (this.getMap()) {
// Note: setMap(null) calls OverlayView.onRemove()
this.setMap(null);
} else {
this.setMap(this.map_);
}
};
function toggleOverlay() {
overlay.toggle();
}
function toggleDOMOverlay() {
overlay.toggleDOM();
}
google.maps.event.addDomListener(window, 'load', initMap);
// Niet zeker dat dit wel nodig is: er is immers al een initialize in de eerste functie.
// google.maps.event.addDomListener(window, 'load', initialize);
//traffic layer
var map=null;
var trafficLayer = new google.maps.TrafficLayer();
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(1.525420, 103.712070),
mapTypeId: google.maps.MapTypeId.ROADMAP,
// styles: styles,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
check();
}
function check()
{
if(document.getElementById('traffic').checked)
{trafficLayer.setMap(map);}
else
{trafficLayer.setMap(null);}
}
google.maps.event.addDomListener(window, 'load', initialize);
//-------search
function init() {
var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('pac-input'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
var marker = new google.maps.Marker({
position: place.geometry.location
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
}(place));
}
map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(),12));
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
Map 2
<script type="text/javascript">
var map;
function initMap() {
var latitude = 1.6119806; // YOUR LATITUDE VALUE
var longitude = 103.6567040; // YOUR LONGITUDE VALUE
var myLatLng = {lat: latitude, lng: longitude};
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 14,
disableDoubleClickZoom: true, // disable the default map zoom on double click
});
// Update lat/long value of div when anywhere in the map is clicked
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
// Update lat/long value of div when you move the mouse over the map
google.maps.event.addListener(map,'mousemove',function(event) {
document.getElementById('latmoved').innerHTML = event.latLng.lat();
document.getElementById('longmoved').innerHTML = event.latLng.lng();
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
//title: 'Hello World'
// setting latitude & longitude as title of the marker
// title is shown when you hover over the marker
title: latitude + ', ' + longitude
});
// Update lat/long value of div when the marker is clicked
marker.addListener('click', function(event) {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
// Create new marker on double click event on the map
google.maps.event.addListener(map,'dblclick',function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: event.latLng.lat()+', '+event.latLng.lng()
});
// Update lat/long value of div when the marker is clicked
marker.addListener('click', function() {
document.getElementById('latclicked').innerHTML = event.latLng.lat();
document.getElementById('longclicked').innerHTML = event.latLng.lng();
});
});
// Create new marker on single click event on the map
/*google.maps.event.addListener(map,'click',function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: event.latLng.lat()+', '+event.latLng.lng()
});
});*/
}
</script>