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.
Related
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(18.511325, 73.820176),
mapTypeId: 'roadmap'
});
var iconBase = '';
var icons = {
info: {
icon: iconBase + 'map.png'
}
};
var features = [
{
position: new google.maps.LatLng(18.511325, 73.820176),
type: 'info'
}
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
</script>
<div class="container-fluid">
<div class="row">
<div id="map" style="width: 100%; height:100%"></div>
</div>
</div>
Google map with custom marker
hello i am using Google map inside my website.i want to add my logo.png instead of Google marker.i have generated key from Google page & added it inside the script tag. i have followed all the steps given on the Google page i have written the following code for it.but when i use the following code it shows nothing.i want to design same layout as shown in image.
Remove all the outer divs. just remove and try your code works.
refer this question : Google Maps doesn't work when inside a div
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(18.511325, 73.820176),
mapTypeId: 'roadmap'
});
var iconBase = '';
var icons = {
info: {
icon: iconBase + 'map.png'
}
};
var features = [
{
position: new google.maps.LatLng(18.511325, 73.820176),
type: 'info'
}
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
</script>
<div class="row" style="width: 100%; height:100%">
<div id="map"></div>
</div>
you should set a size to your div#map like so:
#map1 {
height: 100%;
width: 100%;
}
Adjust according your needs of course.
The crux of your problem goes to integrating google map with bootstrap.In details, you should set the css height style of map tag's parent div(.container-fluid) to 100%;
In order to make the following demo run normally,you should provide your google map api key and your picture file for the marker.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body,
.container-fluid {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="map"></div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 26.880,
lng: 112.644
},
zoom: 8
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(26.880, 112.644),
map: map,
draggable: true,
icon: '/images/github-youtube.jpg'// your image file path
});
marker.setMap(map);
}
</script>
<!-- your google map api key : xxxx-->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
PS: this is the first time I used google maps,so maybe some code is weird.I have tried as the following procedure.
1.see google maps getting started page.
2.add customized marker.
3.integrate with bootstrap.
Hope it can help you.
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");
});
I have an external json which I am trying to overlay on a google map. The overall plumbing works fine.
The map gets generated. Data gets iterated, and markers are placed by reading the coordinates. But the when i look at the map the coordinates are way off on the map. The data set can not be wrong, i can give my word on that. Is there some adjustment I need to make to get this thing map to each other. Here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.748433, -73.985655),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
$(document).ready(function() {
var image = 'http://soumghosh.com/otherProjects/doitt/images/marker.png';
$.getJSON("http://data.cityofnewyork.us/resource/jfzu-yy6n.json", function(json1) {
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.facility_address.latitude, data.facility_address.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.title,
icon:image
});
marker.setMap(map);
});
});
});
</script>
</body>
</html>
I prepared a simple page by using the data of a fusion table. ( FusionTablesLayer with Google Maps JavaScript API v3 ) but the map is not displayed. You can see the page here: http://www.siterary.com/0test.html . What's the problem ? The code is as below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>test</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBK_ErFIm-CYBsslK_9ZB6m0wPV197UaJg&sensor=false"></script>
<script>
function initialize() {
var istanbul = new google.maps.LatLng(41.01, 28.97);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: istanbul,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location' ,
from: '1s3DYRvmNAfKgo-swjG39-8UEb9tHMm0UPHvW_tc'
}
});
layer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<B>MAP</B> <BR>
<div id="map_canvas"></div>
</body>
</html>
The file "/maps/documentation/javascript/examples/default.css" doesn't exist on your site. Your map doesn't have a valid size.
Working version
code snippet:
function initialize() {
var istanbul = new google.maps.LatLng(41.01, 28.97);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: istanbul,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '1s3DYRvmNAfKgo-swjG39-8UEb9tHMm0UPHvW_tc'
}
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
#media print {
html,
body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<B>MAP</B>
<BR>
<div id="map_canvas"></div>
Assume I have put a marker at a specific location on the Map.
I want the program to open a pop-up window called bla.php when the user click on this marker.
This is what I already done to put the marker:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxVucBtLP4XefoM4syoigBgXntwkVGxv8&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(48, 2),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var position = new google.maps.LatLng(48,2);
var marker = new google.maps.Marker({
position: position,
map: map
});
marker.setTitle("pv-unit");
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
I tried it, the whole map is not loading
First you need an event listener for your marker. Then within that, whatever code you want for opening a popup, e.g.
google.maps.event.addListener(marker, 'click', function() {
window.open('blah.php','name','height=200,width=150');
});