How to show two maps in a single page

How to show two maps in a single page - javascript

I tried to add two google maps on single page of my website, but it displays on existing map. How to add two google maps one by one on singe page?
here is the code....
<div class="map">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<div style="overflow:hidden;height:500px;width:1600px;">
<div id="gmap_canvas" style="height:400px;width:1130px;">
</div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style>
<script type="text/javascript">
function init_map() {
var myOptions = {
zoom: 18,
center: new google.maps.LatLng(10.968203873914659, 79.39677137070021),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(10.968203873914659, 79.39677137070021)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Code Shoppy</b><br/>Vatti pilaiyar Koil Road<br/>Upstairs of Chola Ceramics<br/>Kumbakonam-612001"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
</div>
<div class="container">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<div style="overflow:hidden;height:500px;width:600px;">
<div id="gmap_canvas" style="height:500px;width:600px;"></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style>
<script type="text/javascript">
function init_map() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(10.7904833, 78.70467250000002),
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(10.7904833, 78.70467250000002)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Power Integrated Solutions</b><br/>10A/3 Radhkrishnan Colony, Sasthri Road,<br/> Trichy-17"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
nfowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
</div>
</div>

You have two divs with id="gmap_canvas"
id's MUST be unique in HTML or bad things happen

There are some issues with your code:
you're loading the Google maps API twice, which is not necessary
using the same id id="gmap_canvas" for both maps
definig the function init_map twice
I modified your code assigning id="gmap_canvas2" to the second map, calling the init function for the second map init_map2 and loading the Google maps Javascript only once at the beginning.
function init_map() {
var myOptions = {
zoom: 18,
center: new google.maps.LatLng(10.968203873914659, 79.39677137070021),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("gmap_canvas2"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(10.968203873914659, 79.39677137070021)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Code Shoppy</b><br/>Vatti pilaiyar Koil Road<br/>Upstairs of Chola Ceramics<br/>Kumbakonam-612001"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
function init_map2() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(10.7904833, 78.70467250000002),
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(10.7904833, 78.70467250000002)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Power Integrated Solutions</b><br/>10A/3 Radhkrishnan Colony, Sasthri Road,<br/> Trichy-17"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map2);
#gmap_canvas img {
max-width: none!important;
background: none!important
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
First map
<div class="map">
<div style="overflow:hidden;height:500px;width:1600px;">
<div id="gmap_canvas" style="height:400px;width:1130px;">
</div>
</div>
</div>
Second map
<div class="container">
<div style="overflow:hidden;height:500px;width:600px;">
<div id="gmap_canvas2" style="height:500px;width:600px;"></div>
</div>
</div>

Related

Adding markers to google map on button click

I have following code where I am using a Google map with overlay images. I have hard-coded one marker on this map. In my page, I need to add markers on 'Add Marker' button click getting Latitude and Longitude inputs. How can I push markers on to the map on this button click.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-map/3.0-rc1/jquery.ui.map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
#map {
height: 90%;
}
html, body {
height: 90%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key= xxx"></script>
<script>
var overlay;
MapOverlay.prototype = new google.maps.OverlayView();
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 9.877717, lng: 79.694586},
mapTypeId: 'satellite'
});
var myLatLng = {lat: 9.8, lng: 79.9};
//adding a marker
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(9.71088992, 79.6855391),
new google.maps.LatLng(9.9351849, 80.048088));
var srcImage = 'file:///home/../abc.jpg';
overlay = new MapOverlay(bounds, srcImage, map);
}
function MapOverlay(bounds, image, map) {
........
}
MapOverlay.prototype.onAdd = function() {
.............
};
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
Latitude : <input type="text" placeholder="Latitude" id="lat"/>
Longitude : <input type="text" placeholder="Longitude" id="lng"/>
<button type="button" id="addMarkerBtnId">Add Marker</button>
<br/><br/>
<div id="map"></div>

One option is to use the google.maps.event.addDomListener function:
google.maps.event.addDomListener(document.getElementById('addMarkerBtnId'), 'click', function(evt) {
var marker = new google.maps.Marker({
position: {
lat: parseFloat(document.getElementById('lat').value),
lng: parseFloat(document.getElementById('lng').value)},
map: map
});
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: 9.877717,
lng: 79.694586
},
mapTypeId: 'satellite'
});
var myLatLng = {
lat: 9.8,
lng: 79.9
};
//adding a marker
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addDomListener(document.getElementById('addMarkerBtnId'), 'click', function(evt) {
var marker = new google.maps.Marker({
position: {
lat: parseFloat(document.getElementById('lat').value),
lng: parseFloat(document.getElementById('lng').value)
},
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
Latitude :
<input type="text" placeholder="Latitude" id="lat" value="9.877" /> Longitude :
<input type="text" placeholder="Longitude" id="lng" value="79.694" />
<button type="button" id="addMarkerBtnId">Add Marker</button>
<br/>
<br/>
<div id="map"></div>

Google Map not working after adding API showing grey box

Google map is showing grey box or sometimes show nothing/white
i googled some links and try their ways but didn't work for me.
Any solution?
i tried to change the zoom but still not working
Console shows no error
<head>
<script src="http://maps.google.com/maps?file=api&v=3&hl=en&key=GOOGLE_GENERATED_API&sensor=true"type="text/javascript"></script>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(31.4856,74.3406);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 8};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Welcome to Ali Institute of Education"
});
infowindow.open(map,marker);
}
</script>
</head>
<body onload="myMap()">
<?php include '/layout/header.php';?>
<!-- Contact Us Content -->
<div class="container-fluid">
<div id="map" style="width: 800px; height: 400px; overflow:visible;"> </div>
</div>
</body>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&hl=en&key=GOOGLE_GENERATED_API&sensor=true" ></script>
<!--OR-->
<script src="https://maps.google.com/maps/api/js?file=api&v=3&hl=en&key=GOOGLE_GENERATED_API&sensor=true"></script>
On this link replace text GOOGLE_GENERATED_API with your google api key.
Showing perfect on my side. Which error you get on your browser consollog ?
your maps API cdn is not correct. Maybe you get this error google is not define.
google.maps.event.addDomListener (myMap); ADD this line or you can remove the onload from body and add this
google.maps.event.addDomListener (window, 'load', myMap);
Additionaly I have added a click function on marker. If you have any question ask me in comment.
function myMap() {
var myCenter = new google.maps.LatLng(31.4856,74.3406);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 8};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Welcome to Ali Institute of Education"
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
google.maps.event.addDomListener (myMap);
//google.maps.event.addDomListener (window, 'load', myMap);
// if you use the window load myMap You don't need onload function on body tag
}
#map{
width: 800px;
height: 400px;
overflow:visible;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp"></script>
</head>
<body onload="myMap()">
<div class="container-fluid">
<div id="map"></div>
</div>
</head>

zoom_changed listener doesn't work for me

I'm trying to use a zoom listener event in a google maps so that I can resize some axis I have in it. As a beginning, I'm trying to use an alert so that I can see whether if the listener detects a change in the zoom level or not, but I'm not able to get any alert at all. My code is the following:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps - pygmaps </title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true_or_false"></script>
<script type="text/javascript">
var map;
function initialize() {
var centerlatlng = new google.maps.LatLng(49.801674, 11.188139);
var myOptions = {
zoom: 18,
center: centerlatlng,
scaleControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
* plotting stuff *
google.maps.event.addDomListener(window, 'load',initialize);
google.maps.event.addDomListener(maps,'zoom_changed', function()
{
alert("changed");
});
</script>
</head>
<body>
<div style="text-align:center;">
<button onclick="draw_axis()">Enable/Disable Axis</button> <br><br> <div id="log"></div>
</div>
<div id="map_canvas" style="width: 100%; height: 90%;"></div>
</body>
</html>
Does anyone see the problem?

The map variable isn't defined when you create the zoom_changed listener, it is created later, when the initialize function runs (also the variable is map, not maps).
code snippet:
var map;
function initialize() {
var centerlatlng = new google.maps.LatLng(49.801674, 11.188139);
var myOptions = {
zoom: 18,
center: centerlatlng,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addDomListener(map, 'zoom_changed', function() {
alert("changed");
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div style="text-align:center;">
<div id="log"></div>
</div>
<div id="map_canvas" style="width: 100%; height: 90%;"></div>

You need to set zoom_changed event on the instance of google.maps.Map inside your initialize() function.
map.addListener('zoom_changed', function() {
alert("changed");
});

google maps api geolocation and place search

I want to include Google Maps in my Web App, for that I´m using google maps API.
I am including both place search and geolocation on the map (I have a button for geolocation), but I noticed place search is not working once I pressed the geolocation button, Place Search doesn´t work.
Any ideas?
here is my code
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="theme.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style type="text/css" media="screen">
</style>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
#target
{
width: 10%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
/*map*/
// Enable the visual refresh
google.maps.visualRefresh = true;
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
/*map end*/
/*search*/
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
var input = /** #type {HTMLInputElement} */(document.getElementById('target'));
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
/*end search*/
</script>
<script>
/*geolocation*/
var map;
function geolocate() {
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Current Location'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
/*/geolocation*/
</script>
</head>
<body>
<!--search dialog-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog-message" ).dialog({ autoOpen: false });
$(' #dialog-message ').dialog({dialogClass:'search'});
$( "#dialog-message" ).dialog({
modal: true,
});
});
</script>
<style type="text/css" media="screen">
.search { background:rgba(240, 255, 255, 0.4);}
.ui-widget-header {font-family: source sans pro; background: white; border: none; border-radius: 0px}
.pac-container {font-family: source sans pro !important; font-size: 20px !important; min-height: 20% !important}
</style>
<div style="font-family: source sans pro;" id="dialog-message" title="Download complete" class="draggable" >
<p>
<div id="panel" width="100%" height="100%">
<input type="text" id="target" placeholder="Search Box" style="width: 100%; font-family: source sans pro; font-size: 20px; height: auto">
</div>
</div>
<!--/search dialog-->
<table>
<div id="map-canvas"></div>
<table id="commandbar" width="100%" height="5%" cellspacing="0" valign="center" style="background-color:rgba(240, 255, 255, 0.4) ;position:fixed; bottom:0;">
<tr height="2.5%">
<td width="2.5%" height="2.5%" >
<img src="browser_resources/close.png" class="button" onclick="window.close()" width="10em">
</td>
<td width="2.5%" height="2.5%" >
<img src="browser_resources/new_window.png" class="button" onclick="window.open('maps.html','_blank', 'location=no, menubar=no, status=no, titlebar=no' )" width="100%">
</td>
<td width="1px"></td>
<td width="1px" id="divider" bgcolor="#999999">
</td>
<td width="1px"></td>
<td width="2.5%">
<img src="maps_resources/Search.png" class="button" onclick="$( '#dialog-message' ).dialog( 'open' ); " width="100%">
</td>
<td width="2.5%">
<img src="maps_resources/Search.png" class="button" onclick="geolocate()" width="100%">
</td>
<td width="95%"></td>
</tr>
</table>
</body>
</html>

You are overwriting the visible map inside geolocate with a new Maps-instance. But the Maps-instance used for the places-related code is still the instance created in initialize(which still exists as an object, but is no longer bound to map you see). Therefore your places-code still works, but you don't see any changes.
Solution: instead of creating a new Maps-instance inside geolocate make the Maps-instance created inside initialize global accessible(by removing the var-keyword)
remove the var-keyword inside initialize():
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
Note: you've defined the function initialize() 2 times, only the 2nd function is important here, the first function will be overwritten.
Remove this from geolocate() map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
Also remove this from the document:<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"><script>It's not the issue here, but there may occur problems when you include the API-script multiple times

Center marker in Google Maps

I am trying to center a Google map in an iframe. The code below is the content of the iframe.
The marker is not in the center of the frame.
What is missing?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng('<?php echo $this->uri->segment(5); ?>', '<?php echo $this->uri->segment(4); ?>');
var myOptions = {
zoom: 8,
mapTypeControl: false,
scaleControl: false,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
}
initialize();
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
UPDATE
I think I have solved it buy setting a fixed size for the map_canvas instead of using 100%.
I works much better now.

Your code works for me -> http://jsfiddle.net/yRHJv and in jsfiddle the map is inside of iframe.
I have replaced your PHP code with some dummy data.

We Keep Coding

JavaScript is the programming language of the Web.

How to show two maps in a single page - javascript

You have two divs with id="gmap_canvas" id's MUST be unique in HTML or bad things happen

Related

Adding markers to google map on button click

Google Map not working after adding API showing grey box

zoom_changed listener doesn't work for me

google maps api geolocation and place search

Center marker in Google Maps

Categories

Resources