Good day.
I need help in options Google maps.
My site has block with Google maps. The map has options to display avatar user if he registered in Google+ (gmail). The avatar has circle form with diametr about 32px (how in the example: https://developers.google.com/maps/documentation/javascript/examples/map-coordinates?hl=ru).
I want that avatar has square form with size 60x60px and margin-right 70px.
How do it?
Thank you advance!
The code avatar on Google maps:
<iframe src="https://www.google.com/maps/api/js/widget?pb=!1m2!1u22!2s12a!2sru#WzEsMTUxXQ.."
frameborder="0" allowtransparency="true" scrolling="no"
style="border: 0px; overflow: hidden; position: absolute; right: 0px; visibility: visible; width: 37px; height: 37px;">
<html jstcache="0">
<head>
<link id="__2__" type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<style>div.login-control{color:white;font-family:Roboto,Arial;font-size:11px;font-weight:500}div.login{border-radius:2px;background-color:#5f84f2;padding:4px 8px 4px 8px;cursor:pointer}.login-control .tooltip-anchor{color:#5B5B5B;display:inline;font-family:Roboto,Arial;font-size:13px;font-weight:normal;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;width:50%}.login-control .tooltip-content{background-color:white;font-weight:normal;right:0px}div.login a:link{text-decoration:none;color:inherit}div.login a:visited{color:inherit}div.login a:hover{text-decoration:underline}div.profile-photo{border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.2);width:32px;height:32px;overflow:hidden}div.profile-photo-light{background-color:white}div.profile-photo-light div{color:black}div.profile-photo-dark{background-color:black}div.profile-photo-dark:hover{background-color:white;color:black}div.profile-photo img{float:right;width:32px;height:32px}.tooltip-anchor{width:100%;position:relative;float:right;z-index:1}.tooltip-anchor>.tooltip-tip-inner{background-color:transparent;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid white;height:0;left:-8px;position:absolute;top:5px;width:0;z-index:1}.tooltip-content{border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);display:inline-block;line-height:100%;padding:10px 11px 9px 11px;position:absolute;margin:0;top:10px;white-space:nowrap}.tooltip-content a{color:#3a84df;text-decoration:none}.tooltip-content a:hover{text-decoration:underline}.tooltip-content .user-email,.tooltip-content .user-name{padding-right:12px}.sign-in-explanatory-text{margin-bottom:6px}.tooltip-content a{overflow:hidden}.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon.png);background-size:14px 12px;display:inline-block;height:12px;padding-right:6px;vertical-align:middle;width:8px}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon.png)}#media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon_hdpi.png)}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon_hdpi.png)}}.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2.png)}#media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2_hdpi.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2_hdpi.png)}}</style>
</head>
<body jstcache="0" style="overflow: hidden;">
<script>
window.parent.frames['gm-master'].initWidget(window);
</script>
<div jstcache="0" style="position: absolute; top: 0px; right: 0px; width: 500px; height: 500px;">
<div jstcache="0" style="position: absolute; top: 0px; right: 4px;">
<div jstcache="69" class="login-control" jsaction="mouseenter:loginControl.resize;mouseleave:loginControl.resize;loginControl.resize">
<div jstcache="2" jsaction="loginControl.login" class="login" style="display: none">
<a jstcache="3"> <span class="g-logo"> </span><span>Войти</span></a>
</div>
<div jstcache="4" class="profile-photo-light profile-photo" jsan="7.profile-photo-light,7.profile-photo">
<img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">
</div>
<div class="tooltip-anchor">
<div class="tooltip-tip-inner"></div>
<div class="tooltip-content">
<div jstcache="6" class="sign-in-explanatory-text" style="display: none">Войдите в свой аккаунт, и Google Карты станут ещё удобнее</div>
<div>
<a jstcache="7" class="" style="display: none"></a>
<a target="_blank" jstcache="8" href="https://plus.google.com/113092786366482147078?socpid=238&socfid=maps_api_v3:logincontrol" class="user-name" jsan="7.user-name,8.href,0.target">+aleksandr</a>
<a target="blank_" jstcache="9" href="https://support.google.com/maps/?p=thirdpartymaps&hl=ru" jsaction="mouseup:loginControl.learnMore">Подробнее...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
tag:
<img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">
It's currently not possible to customize the UI for the Signed In experience. I'd recommend opening a feature request on the Google Maps API Issue Tracker describing your use case so the team can start tracking interest in it.
I know this is 2 months old question and already chosen an answer, but if anyone else if looking for this. you can achieve the margin thing applying css directly to the iframe element.
This is the code i'm using
iframe[src^="https://www.google.com/maps/api/js/widget?"] {
margin-top: 50px;
margin-right: 52px;
}
How it looks
Related
I've set the pixel size in my CSS to 50px but in the browser when expand my navigation menu the it sets the px size to 55.15.. etc. This same problem affects the Log Action, View Action and Keysystem pages. It doesn't affect the facilities info page. There is a gap below the first link on the drop down menu as well. I image the pixel size of the text is causing this because, again, it doesn't happen on my main index page.
I've tried changing the px to an rem value that will scale it to 50px from the page default of 38px. It also doesn't solve the problem.
CSS is as follows. .nav_main a is where I have set the px size to 50px.
* {
font-family: Arial;
margin: 0px;
}
html,body
{
height: 100%;
margin: 0px;
padding: 0px;
font-size: 38px;
overflow: visible;
}
h1 {
display: block;
}
.nav_main {
display: block;
position: relative;
width: 100%;
background-color: #282828;
overflow: auto;
}
.nav_main a {
width: 100%;
text-decoration: none;
padding-top: 32px;
padding-bottom: 32px;
margin: 0;
text-align: center;
font-size: 50px;
color: #fff;
}
.nav_main .icon {
display: inline;
float: right;
width: auto;
padding: 27.5px;
}
.nav_main .icon_clicked {
position: absolute;
right: 0px;
top: 0px;
width: auto;
padding: 27.5px
}
This is the log action page html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facilities Portal - Log Action</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header>
<h1>Facilities Portal</h1>
<div id="navMain" class="nav_main">
<a id="facInfoL" href="index.html" style="display: none">Facilities Info</a>
<a id="logActionL" class="activeNav" href="logaction.html" style="display: none">Log Action</a>
<a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
<a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
<a id="burgerIcon" class="icon" onclick="expandMenu()">☰</a>
</div>
</header>
<main>
<form action="#" id="logActionForm">
<p>Your Name: </p><input type="text" name="FullName" placeholder="Type your name here...">
<p>Email: </p><input type="email" name="EmailAddress" placeholder="Type your email here...">
<p>Issue: </p>
<select>
<option value"" disabled selected hidden>Please choose...</option>
<option value="hnf">Health and Safety</option>
<option value="comfort">Comfort</option>
<option value="other">Other</option>
</select>
<p>Description: </p><input type="text" name="Desc" placeholder="Brief description of issue...">
<p>Details: </p><input type="text" name="Details" placeholder="Extra details here...">
<p>Upload Picture</p><input type="file" name="pic" accept="image/*">
<button type="submit" form="logActionForm" value="submit">Submit</button>
<button type="reset" value="reset">Clear</button>
<button type="button" value="viewPrevActions">View Previous Actions</button>
</form>
</main>
<footer>
<p>Author: Scott Law</p>
<p>Copyright © 2019</p>
</footer>
<script src="js/common.js"></script>
</body>
</html>
This is the index page html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Facilites Portal Main</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header>
<h1>Facilities Portal</h1>
<div id="navMain" class="nav_main">
<a id="facInfoL" class="activeNav" href="index.html" style="display: none">Facilities Info</a>
<a id="logActionL" href="logaction.html" style="display: none">Log Action</a>
<a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
<a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
<a id="burgerIcon" class="icon" onclick="expandMenu()">☰</a>
</div>
</header>
<main>
<img class="portal-img" src="images/spanners-tools.jpg" alt="Log Action Img">
<img class="portal-img" src="images/clipboard.jpg" alt="View Actions Img">
<img class="portal-img" src="images/batch-books.jpg" alt="Facilities Infomation Img">
<img class="portal-img" src="images/close-up-keys.jpg" alt="Key System Img">
</main>
<footer>
<p>Author: Scott Law</p>
<p>Copyright © 2019</p>
</footer>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>
Browser picture for log action page (the error is on this page). Highlighted yellow is the problem. This occurs on the log action, view action and key system pages.
https://imgur.com/qDvZj8T
Browser picture for index page (it works correctly)
https://imgur.com/e9jVCSg
I would like for the browser to follow the CSS i've set like on the index page. The other pages don't follow suit for some reason.
Essentially, I'm making a tier-based pricing grid and it needs to look like this:
However, when my code is placed onto the web page (through Wordpress)
a random set of tags are above the '10+ Sessions" pricing box, which messes up the spacing. The tag has a 20px top padding.
It looks like this:
So, I inspected the element and found that there's a set of tags above the box with a top padding of 20px.
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
"><p></p>
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
"><p></p>
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p>
</div>
The tags after the opening of the div is the problem.
However, the tags aren't there in the original source code, which is this:
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
">
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
">
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p></div>
I just can't figure out why the tags are there.
Could anyone help with this?
Thanks
For anyone with a similar problem, install a plugin called Raw HTML for Wordpress. This prevents Wordpress from attempting to format your Raw HTML and adding random paragraph tags.
Doing a website recreation and trying to use bootstrap to do it. I ran into a problem of trying to position an image to the right of some text near the right edge of the web page.
Using margin-top and margin-right moves the picture how I want but using margin-bottom seems to have no effect... which is what I need. Any idea what I am doing wrong?
Here's a link to my codepen: https://codepen.io/gkunthara/pen/eRXmoP
And releveant code:
HTML
<div class="second-content">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p text-left"> Moving homes in Sydney is
stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not,
just notify us within 72 hours and we'll gladly return to reclean any
problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="firstpic.png">
</div>
CSS:
.second-content .first-pic {
width: 30%;
border: solid black;
margin-right: 100px;
margin-bottom: 50px; /* no effect /*
}
EDIT: updated codepen link just showing relevant code
As per your codepen you wanted image after text then need to add
float:left in this class second-header-p text-left.
.second-header-p.text-left{
float:left;
}
I add some section for your code. float:left and float:right help to do your task well.
<body>
<div class="second-content">
<div class="sec">
<h2 class="second-header"> Bond Back Guarantee</h2>
</div>
<div class="sec">
<p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back ha
s never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning.
If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
</div>
</div>
</body>
css
.second-content {
height: 750px;
background-color: #fff;
border-style: solid;
}
.second-content .second-header {
font-size: 46px;
color: #3498DB;
margin-top: 100px;
margin-left: 150px;
}
.second-content .second-header-p {
width: 50%;
font-size: 120%;
margin-left: 150px;
line-height: 40px;
margin-top: 25px;
float:left;
}
.second-content .first-pic {
width: 30%;
border: solid black;
float:right;
}
.sec{
width:100%
}
Give pull-left class to your second-header-p.
.second-content {
height: 750px;
background-color: #fff;
border-style: solid;
padding: 20px;
}
.second-content .second-header {
font-size: 46px;
color: #3498DB;
}
.second-content .second-header-p {
width: 65%;
font-size: 120%;
line-height: 40px;
}
.second-content .first-pic {
width: 30%;
border: solid black;
}
<head>
<title> End of Lease Cleaning in Sydney</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="second-content">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p pull-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not,
just notify us within 72 hours and we'll gladly return to reclean any
problem areas - free of charge.</p>
<img class="first-pic pull-right gap-right" src="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
</div>
</body>
If you using bootstrap then use this code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<section class="second-content">
<div class="col-md-8">
<h2 class="second-header"> Bond Back Guarantee</h2>
<p class="second-header-p text-left"> Moving homes in Sydney is stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not, just notify us within 72 hours and we'll gladly return to reclean any problem areas - free of charge.</p>
</div>
<div class="col-md-4">
<img src="https://thumb.ibb.co/iBF9Ea/firstpic.png" />
</div>
</section>
</body>
</html>
I've looked different options for aligning the FB share button with the other social media buttons, but none have worked for me yet. I'm only a few pixels off. Any ideas?
<div style="float:left; vertical-align:top">
<a class="twitter-share-button" href="https://twitter.com/share" data-url="{my url}" data-text="{text}" data-count="none" data-hashtags="{hashtag}" data-dnt="true">Tweet</a>
</div>
<div style="float:left; padding: 0 0 0 5px; vertical-align:top">
<div class="fb-share-button" data-href="{my url}" data-layout="button"></div>
</div>
<div style="float:left; padding: 0 5px; vertical-align:top">
<script type="IN/Share" data-url="{my url}"></script>
</div>
!Social Media alignment1
Change your .fb_iframe_widget class to this
.fb_iframe_widget {
display: inline-flex; /* changed line */
position: relative;
}
The facebook button has still a misalignment of one pixel.
Just add this to the css class above:
top: -1px;
P.S.: wanted to add this as a comment but I couldn't because not enough "reputation" points.
I'm trying to put a header on top of my pages. It works fine with IE 8. It moves slightly down and blocking my page content on the newest IE and apple safari. Can anyone show me what I need to put so that it is compatible for all search engines? I am PHP Including my header to all my pages. Below is my header code.
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<div style="position: absolute; width: 1280px; height: 92px; z-index: 1; left: 1px; top: 0px" id="layer1">
<div style="position: absolute; width: 660px; height: 22px; z-index: 1; left: 238px; top: 52px" id="layer2">
<font face="Arial">|<b>
New Cost </b>| <b>
</b>|<b> <a href="http://www..net/carriers/newcarrier.php">New
Carrier</a></b> | <b>
</b>|<b> <a href="http://www..net/carriers/search.php">Carrier
Board</a></b> | </font></div>
<p>
<img border="0" src="/carriers/.png" margin= 0 auto width="100%" height="73"></div>
</body>
</html>
Assuming this is the header you're talking about...
<img border="0" src="/carriers/echoheader.png" margin= 0 auto width="100%" height="73">
...it should look something like this. I think you'll need to specify top and make its position absolute.
HTML:
<img class='header' />
CSS:
img.header {
position:absolute;
top:0;
...other styles...
}
Try to avoid "inline styling" - this is where you set the style of the element directly in the HTML.
It is good practice to split the style from the markup, since later, in a more complex page, you can find your way around more easily.