I am attempting to customize links int a Google Maps info-bubble with Bootstrap and font awesome Icons.
I was able to use a list-group from bootstrap for my links in the info bubble successfully, but when I tried to add a font awesome Icon to the link it just does not show up.
<i class="fab fa-youtube"></i> Hiking 42 Miles along Michigan's Lake Superior (Adventure Archive)
I followed the code on this link here: https://fontawesome.com/v4.7.0/examples/
But when I test on my site the font awesome icon doesn't show up like in the example I followed.
Not sure what I am doing wrong....
Have you gotten the Font Awesome CDN in the <head> tags of your file as <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">? I don't know if you have issues with other icons in your website, but without that CDN, you may not be able to get your icons to show up! See Font Awesome's Troubleshooting Page.
What's your code so far? Do you have a parent <div class="list-group"> above your anchor tag to match the class attributes of your list-group-item list-group-item-action anchor tag (but this may just be hierarchy issue, not the cause of your Font Awesome icons not showing up)? Still, check out this article by Bootstrap, under "Links and Buttons" header. Play around with it!
You are follow FontAwesome v4.7.0 then you can't use fab class because of this is belong to FontAwesome v5+. So you just need to replace fab fa-youtube to fa fa-youtube.
function initMap() {
var lakeShore = {lat: 47.7231, lng: 86.9407};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: lakeShore
});
var contentString = `<h6>Lake Shore Trail</h6>
<div class="list-group">
<i class="fa fa-youtube"></i> Hiking 42 Miles along Michigan's Lake Superior (Adventure Archive)
</div>`;
var infowindow = new google.maps.InfoWindow({
content: contentString,
// maxWidth: 320
});
var marker = new google.maps.Marker({
position: lakeShore,
map: map,
title: 'Lake Shore Trail'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
Check either you font awesome link <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/fontawesome.min.css"> is working or not as i can see one ERROR in you console window
Related
Hi everyone I'm trying to figure out how to add a font awesome icon with a pulse feature inside this script I'm a newbie so I don't really know what I'm doing.
I want to edit before the text that says call or zoom
window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/ezrelomd?background_color=fdf8f2&primary_color=56c4c5', text: 'Call or ZOOM', color: '#56c4c5', textColor: '#ffffff', branding: false }); }
Any ideas would be great
You should be able to simply add the Font Awesome HTML snippet to the text blurb.
Make sure to escape quotes if needed. And of course, check that you've linked Font Awesome's css file.
For example, this snippet works for me (I picked a phone icon with fa-pulse animation):
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<!-- Calendly -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Initialize floating badge with FA icon with some animation -->
<script type="text/javascript">window.onload=function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/ezrelomd?background_color=fdf8f2&primary_color=56c4c5', text: '<i class="fas fa-phone fa-pulse"></i> Call or ZOOM', color: '#56c4c5', textColor: '#ffffff', branding: false }); }</script>
i have published suitability map on arc server. but my map does not display, i have followed arcgis java script api example. i want to display suitability map of the desired area. when user click on the map pop window display the analysis result here is my code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Create web map from id</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"dojo/domReady!"
], function(
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
Scalebar
) {
ready(function(){
parser.parse();
//if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
arcgisUtils.arcgisUrl = "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0";
arcgisUtils.createMap("map").then(
function(response){
//update the app
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
var map = response.map;
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
},"legend");
legendDijit.startup();
});
});
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<div id="subtitle"></div>
</div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
<div id="legend"></div>
</div>
</div>
</body>
</html>
well, as i can see the question and code you added above below are this things you want to achieve (correct me if i am wrong)-
create a map
add a published layer(arcgis layer url) on the map
show popup on the click of published gis layer.
As your example says you don't have a webmap id so you not need to worry about that.
Below is the working example for that-
require([
"dojo/dom",
"dojo/dom-construct",
"esri/map",
"esri/dijit/InfoWindow",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"dojo/string",
"dojo/domReady!"
], function(
dom,
domConstruct,
Map,
InfoWindow,
FeatureLayer,
InfoTemplate,
string
) {
var infoWindow = new InfoWindow({}, domConstruct.create("div"));
infoWindow.startup();
// **** update center according to your feature layer url
var map = new Map("mapDiv", {
center: [-122.41, 37.78],
zoom: 17,
basemap: "topo",
infoWindow: infoWindow
});
var template = new InfoTemplate();
//*** update the title field name according to your feature layer url
template.setTitle("<b>${qAddress}</b>");
template.setContent("${*}");
// ****** replace with your Feature layer url "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0"
var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Street_Trees/FeatureServer/0",{
infoTemplate: template,
outFields: ["*"]
});
map.addLayer(featureLayer);
map.infoWindow.resize(180, 175);
});
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color:#fff;
overflow:hidden;
}
#header{
border:solid 2px #AAc4c4;
background:#fff;
color:#749749;
border-radius: 4px;
font-size:14px;
padding-left:20px;
font-weight:700;
}
#map{
padding:1px;
border:solid 2px #AAc4c4;
border-radius: 4px;
}
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<script>var dojoConfig = {
parseOnLoad: true
};
</script>
<script src="https://js.arcgis.com/3.20/"></script>
<body>
<div id="mapDiv"></div>
</body>
Note- Update the sample code as per comments in it.
If you want more info let me know i will update the answer accordingly.
Hoping this will help you :)
Well, you apparently adapted this sample:
https://developers.arcgis.com/javascript/3/jssamples/ags_createwebmapid.html
I am not sure if this is what you want, as using webmaps needs some licensing, I guess. In any case, you need to change few lines in your example. Instead of
<link rel="stylesheet" href="css/layout.css">
you should have
<link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/ags_createwebmapid/css/layout.css">
to load the original CSS file. You should make your own copy and load it from your server.
More important is to change this line:
arcgisUtils.arcgisUrl = "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0";
which should be:
arcgisUtils.arcgisUrl = "https://www.arcgis.com/sharing/rest/content/items/";
or, as the sample suggests, path with YOUR portal URL.
And, last but not least, the next line must be something like:
arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20","map").then(
I am trying to change the width and height of the map. I want to show the map on full width of the page. Map is visible on half of the page without any styles. but when i try to implement styles to change height the map disappears from the page.
here is the full code of my html with the styles in the head tag and map div is at the bottom.
<html ng-app="myApp">
<head>
<!-- Style Sheets includes -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/customstyle.css" rel="stylesheet" type="text/css">
<!-- Script includes -->
<script data-require="angular.js#*" data-semver="1.3.14" src="js/angular.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="data.js"></script>
<script src="app.js"></script>
<script src="initmap.js"></script>
<style>
html, body, #map {
width: 25%;
height: 25%;
margin: 0;
padding: 0;
}
#map {
position: relative;
}
</style>
</head>
<body ng-controller="ApplicationController as appctrl">
<div class="container">
<div id="map"></div>
</div>
Here is the function for Initialize map
//Initializes the map.
function initialize() {
// Initial options. Centers on Sierra Leone.
var mapOptions = {
center: { lat: 8.4494988, lng: -11.7868289},
zoom: 8
};
// Creates the map.
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
Then you change the size of the map div you need to resize the map (resize event of google maps) for a correct view of the content
In your case after change dinamically the size of div you can easily (re) invoke your initialize function...
(better if you before set map to null)
You can embed a basic map, a Street View image, driving directions, or a search into your website or blog from Google Maps.
When your viewers are signed in to Google, they can also see their home and work, saved places, and more in your map.
Get the code
Open Google Maps
Make sure the map or Street View image you'd like to embed shows up on the map.
In the top left corner, click the main menu .
Click Share or embed map.
At the top of the box that appears, choose the Embed map tab.
Choose the size you want, then copy the code and paste it into the source code of your website or blog.
Note: If you're using Maps in Lite mode, you won't be able to embed a map.
I'm trying to get google maps to display on a jquery mobile page.
The map works fine if I type I go directly to the page in the browser. However, when I click a link on another jqm page that goes to the map page, I just get a blank grey screen. The markers are actually there but they are plotted off the viewable area above and to the left of the viewport. Also weird is that I am able to drag on the canvas and bring the markers into view in a small, invisible viewport in the upper left hand corner (probably about 100 px wide and 200 px high), but I can't see the actual map.
Here's a screenshot: https://www.dropbox.com/s/p8berda8dbf6kh4/Screenshot%202015-05-25%2014.24.15.png?dl=0
If I immediately refresh the page after the failed load, everything shows up fine. So I don't think this is an API issue.
And one other oddity. If I wait like 10 min, the map will load properly when I click on the link to view the map. But then the next time I try it fails to load. I have to wait several minutes.
My code is basically ripped right from the jquery mobile site. Here's the relevant code:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://maps.google.com/maps/api/js?sensor=false&key=MY_KEY"></script>
<!-- JQM and other scripts loaded here -->
<script>
$( document ).on( "pagecreate", "#map", function() {
var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);
drawMap(defaultLatLng);
function drawMap(latlng) {
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
new google.maps.Marker({
position: latlng,
map: map,
title: "lat",
});
new google.maps.Marker({
position: new google.maps.LatLng(43.150358,-74.768798),
map: map,
title: 'hello',
});
}
});
</script>
<style>
#map, #map-canvas { width: 100%; height: 100%; padding: 0; }
</style>
</head>
<body>
#calling page
<div data-role="page" data-dom-cache="true" id="doors" data-url="doors" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="position: relative; min-height: 559px;">
<div role="main" class="ui-content" id="">
View map
</div>
</div>
#map page
<div data-role="page" id="map" data-url="map" style="position: relative;">
<div data-role="header" data-theme="a"><h1>Maps</h1></div><div role="main" class="ui-content" id="map-canvas">
</div>
</div>
</body>
</html>
Well, after hours of banging my head against a wall I finally got it working by changing from pagecreate to pageshow. Interestingly pageshow is deprecated in v. 1.4.5 and is supposed to be replaced by pagecontainershow but pagecontainershow does not work.
And as usual, I find the answer within minutes of posting the question.
I am pretty new to this whole WebWorks stuff (Just started playing around with it today, getting ready for a local blackberry hackathon) and i decided to learn it by action with the google maps api to generate content for me to play with, as well as considering a WebWorks port of a maps app i'm working on for Android.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta id="viewport" name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"" />
<link href='style.css' rel='stylesheet' type='text/css'>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=SNIP&sensor=true&language=es®ion=CO">
</script>
<script type="text/javascript" src="javascript.js">
</script>
</head>
<body onload="initializeMap()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
The CSS:
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%
}
And the JS:
function initializeMap() {
var mapOptions = {
center: new google.maps.LatLng(6.199383, -75.578980),
zoom: 17,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
Now my question is: Why doesn't clicking or dragging the map on the Ripple emulator work? [WebWorks BB10] It works wonders on chrome, i can pan, zoom and the markers get placed when i click them.
Thanks.
Edit
The map renders fine on Ripple, but the map itself won't work, nothing happens if i click or drag around with the mouse. The Satellite, Map and zoom buttons do work though
Clicking or dragging the map on the Ripple emulator may not work for a couple of reasons:
There is a runtime error happening and something within the Google
Maps is failing. Try opening Web Inspector (right click on map in
Ripple and select "Inspect Element") to see if there are any run
time errors. It may explain why certain behavior is not working as
expected.
Touch events may not be handled correctly. Try opening Web Inspector (right click on map in Ripple and select "Inspect Element"). Then open the settings (gear in bottom right corner) and select the "Overrides" tab. Make sure that the "Emulate touch events" checkbox is enabled.
Hope that helps.