Why I can't set zoom level, I tried using &z=5 to write on the end of link, buy not working. Here is demo
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2830.0493437376044!2d20.460033515820356!3d44.8205593841789!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x475a7ab4f7ba19a5%3A0xf3cb8c583ee409d6!2sGagarin+Film!5e0!3m2!1sen!2sba!4v1472463205637&z=5" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
http://jsfiddle.net/e9fdgfpn/154/
If your embed code is coming from maps.google.com, the "pb" URL parameter contains every map setting in one long string, including the zoom level.
Each value in this parameter is separated by an exclamation mark, and begins with a 2-letter code. The first three values begin with "1m". The fourth value, beginning with "1d", is the zoom level. Change the value between "1d" and the exclamation mark to adjust the zoom level.
A value of around 1000 displays an area about the size of a city block, and a value above 400,000 will encompass the globe.
Use this code
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Related
I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
#map {
height: 90%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 41.876, lng: -87.624}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://ec2-54-198-148-171.compute-1.amazonaws.com/webapp/public/kmlfiles/LargeCoordinates.kml',
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
The KML present here - http://ec2-54-198-148-171.compute-1.amazonaws.com/webapp/public/kmlfiles/LargeCoordinates.kml is not shown on the map.
All my other KML files work ok, just not this one. I believe this is because there are many coordinates in the KML file.
Any help to fix it would be appreciated.
In your 5th placemark/polygon (the big one), the line with the geometry/coordinates seems to be truncated. First clue is that there appear to be missing tags at the end of the line. It ends with only the </MultiGeometry> tag, when it needs to end with: </coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>.
Looking more closely at the last set of coordinates, they appear to be cut off, ending after the decimal point in the 2nd number: -96.697594,46.
So you'll need to at least add the appropriate tags to close out the line, and probably fix the last coordinate pair (or just remove it). That should give you a valid KML file which should load (so long as the geometry isn't too big for Maps). You'll also want to check the source data to see if additional coordinates are missing from that line, and if so, figure out how to get them back.
To help others with similar issues, do you know how that KML was generated? With what software? Maybe something that can only handle so many characters in the coordinate string?
This seems like such a silly problem, but it has me baffled...
I have broken my page down into the simplest elements and the problem is still occurring.
I have a page with a google map inside a div. When printing the map, there is a small section towards the bottom that prints empty. I have absolutely no idea how to rectify this.
The issue is already evident in the print preview.
Here is a screen shot: http://tinypic.com/r/e7xqb9/8
The page is intended to print on an A4 page and is designed to fit the page with no resizing neccessary.
This seems to be happening across Chrome, IE, Firefox and Safari browsers.
Any suggestions would be greatly appreciated !!
<html>
<body>
<form id="form1">
<div id="map_canvas" style="width:620px;height:620px;"></div>
</form>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script>
// Variable Declarations
var map;
// function initializes Google map
function initialize() {
var mapCenter = new google.maps.LatLng(-30.732393, 24.125977); //Google map Coordinates
var googleMapOptions =
{
center: mapCenter, // map center
mapTypeId: google.maps.MapTypeId.SATELLITE,
streetViewControl: false,
zoomControl: false,
panControl: false,
mapTypeControl: false,
zoom: 5
};
map = new google.maps.Map(document.getElementById("map_canvas"), googleMapOptions);
}
initialize();
</script>
</body>
</html>
After testing your code again it actually happens when trying to print in landscape mode only which you did not mention in your question.
Solution: adapt the height of your map container so that it fits onto A4 paper in landscape mode.
Using the following barebones code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="map_area" style="width:100%;padding-bottom:100%;"></div>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCfoIZz72NPrAPegHrWxqZtvzGkTASDXMc&sensor=false'></script>
<script type="text/javascript">
var center = new google.maps.LatLng(38.504806, -122.470542);
var mapOptions = {
center: center,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_area"), mapOptions);
</script>
</body>
</html>
Example available at http://test.wcwddemo.com.
At larger (e.g. desktop) viewport sizes, it works as expected, centering a map on the small California town of St. Helena.
If you shrink the size of the viewport and refresh the screen, at some point (around a width of 625px), the map is no longer centered on the town. Instead, the town seems to be centered on the lower boundary of the map container.
On the surface, this appears to be a bug. Am I missing something? Is there a workaround?
You must set a height-style for map_area.
From the docs: you must always set a size on that <div> explicitly
<div>
{$google_map_link}
</div>
I am assigning the following google map iframe codes into smarty and trying to display map on the screen.
google map that assigned to smarty variable {$google_map_link} is
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.in/maps?q=Tiriyos&gl=in&hl=en&sll=13.008237,80.193329&sspn=0.206059,0.363579&ie=UTF8&view=map&cid=5721197682818793762&hq=Tiriyos&hnear=&ll=12.948405,80.137217&spn=0.006441,0.011362&iwloc=A&output=embed"></iframe>
<br />
<small>
View Larger Map
</small>
I expect to display the google map on screen but only iframe codes are displayed
How to solve this...
I've tried your code and it works on Smarty 3.0.8.
Why don't you use Google maps API (http://code.google.com/apis/maps/index.html)?
I usualy put html into the template and just pass the values. Example below:
php:
<?php
$smarty->assign('google_map_x', '12.948405');
$smarty->assign('google_map_y', '80.137217');
?>
template:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng({$google_map_x}, {$google_map_y});
var myOptions = {
zoom: 8,
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:"Tiriyos"
});
}
</script>
<div id="map_canvas" style="width:300px;height:300px"></div>
Then you can put your info window on your marker. Read more here: http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows
In php
<?
$google_map_link = html_entity_decode($google_map_code);
$smarty->assign('google_map_link', $google_map_link);
?>
In HTML
<div>
{$google_map_link}
</div>
I had used html_entity_decode to decode google maps iframe code and displayed in smarty. This is easiest way to display google maps in smarty.
I may help some one else
As of...today, it seems, Google Maps no longer has embed code!
Can someone point me in the right direction, or maybe offer up some old embed code I could try to embed into something useful?
Here is the article explaining how to embed a Google Map:
http://maps.google.com/help/maps/getmaps/quick.html
I think this has to do with the Google+ Social Network "thing" that appeared in the last few days.
Also, I have tried the instructions in the link above both logged into a Google Apps account and not logged in to any Google account.
I just tried the embed code and it seems to be working correctly for me. Did you change anything on your page recently? Here is what I tried.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&
amp;q=Birmingham,+MI&aq=1&sll=37.0625,-95.677068&sspn=64.880423,107.138672&
amp;ie=UTF8&hq=&hnear=Birmingham,+Oakland,+Michigan&t=h&z=12&
amp;ll=42.546701,-83.211319&output=embed"></iframe><br /><small><a
href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&
amp;q=Birmingham,+MI&aq=1&sll=37.0625,-95.677068&sspn=64.880423,107.138672&
amp;ie=UTF8&hq=&hnear=Birmingham,+Oakland,+Michigan&t=h&z=12&
amp;ll=42.546701,-83.211319" style="color:#0000FF;text-align:left">View Larger Map</a></small>
Try disabling your Maps Labs in order to use map embedding. - reference
http://maps.google.com - the embed box is now back.
I guess it was a temporary glitch. I am pretty sure it was not on my side, I tried a few different machines and browsers.
Google maps has shifted settings link from bottom right to top left, left side of search bar
Here is the code to add Google Maps to your webpage. No API key needed.
<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?&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(54.584063, -5.928343),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>BLAAAAAAAAAAAAAAAAAAA</title>
<link rel="stylesheet" href="style.css">
<body>
<div id = "map-canvas"/>
</body>