I created a new google map and added a few markers however when I include it in my code with iframe it starts with zoom as 17 and I want it zoomed out max (z=20). I tried to pass the argument z=20 but with no result. Any suggestions?
code:
<iframe width="425" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&msid=204116165110023160774.0004d7aa572501051bc40&ie=UTF8&ll=37.020098,-95.625&spn=116.710475,270.527344&t=m&output=embed"></iframe>
You can do it when you create your map :
var map = new google.maps.Map(map, {
zoom: 20,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
Related
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>
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.
I am trying to generate a Google map for my events in Sitefinity. I am using an embedded Google iframe code and I am using <%# Eval("Street") %> and <%# Eval("City") %> and <%# Eval("State") %> to pull the location of my events from my Sitefinity events custom fields to output html.
So my code looks like this:
<iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<%# Eval("Street") %>+<%# Eval("City") %>+<%# Eval("State") %>&aq=0&oq=<%# Eval("Street") %>+<%# Eval("City") %>+<%# Eval("State") %>&ie=UTF8&hq=&hnear=<%# Eval("Street") %>+<%# Eval("City") %>+<%# Eval("State") %>&z=14&output=embed&iwloc=near'></iframe>
Now the map is getting generate for the events and everything is working fine except the marker on the map is not getting centered. What should I do to make the marker centered?
Below is a sample HTML with three maps. Make sure that the arguments from Sitefinity are returning what you expect by inspecting the HTML in Developer Tools. Also make sure that there are spaces or commas between Address, City and state. Also if you are using Sitefinity 6 they have Google Maps built in now.
<html>
<head></head>
<body>
<iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=510 W Main St Fort Wayne IN&aq=0&oq=510 W Main St Fort Wayne IN&ie=UTF8&hq=&hnear=510 W Main St Fort Wayne IN&z=14&output=embed&iwloc=near'></iframe>
<iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1770 Apple Glen Blvd Fort Wayne IN&aq=0&oq=1770 Apple Glen Blvd Fort Wayne IN&ie=UTF8&hq=&hnear=1770 Apple Glen Blvd Fort Wayne IN&z=14&output=embed&iwloc=near'></iframe>
<iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1600 Amphitheatre Pkwy, Mountain View, CA&aq=0&oq=1600 Amphitheatre Pkwy, Mountain View, CA&ie=UTF8&hq=&hnear=1600 Amphitheatre Pkwy, Mountain View, CA&z=14&output=embed&iwloc=near'></iframe>
</body>
</html>
Using the Google Maps V3 API. Paste the javascript & map div inside the widget in sitefiniy, use your <%#Eval("address")%> as the string being passed to the GetLatLong() function
<html html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEYHERE&sensor=false"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
var geocoder = new google.maps.Geocoder();
var marker;
var map;
$(document).ready(function(){
initialize();
});
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(39.8282, -98.5795),//US Center as Default
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
GetLatLong("201 W Main St Fort Wayne IN");//Use your <%#Eval("Address")%> here Like
//GetLatLong('<%#Eval("Street")%> <%#Eval("City")%> <%#Eval("State")%> ');
}
function GetLatLong(address){
if (geocoder)
{
geocoder.geocode({ 'address': address }, function (results,status) {
if (status == google.maps.GeocoderStatus.OK)
{
var l = results[0].geometry.location;
map.setCenter(l);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: address
});
}
else
{
}
});
}
}
</script>
</head>
<body>
<div id="map-canvas" style="height:500px;width:500px;"></div>
</body>
</html>
<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>