I need some help in figuring out where to put any of the weather layer code to a custom Google Map (API v3), any input would be greatly appreciated :)
We have created a custom Google Map, and on it we have 2 Fusion Table layers with a simple toggle. From the developer documentation, and what I have found here on this site, I can see I need to add this bit of code:
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
but I am totally clueless as to where to place this, as each time I have tried adding it (2 days now) the code breaks and I am shown a blank white page with all kinds of errors in the F12 Console window.
Where do we need to add that, and how can we add it to the toggle? Here is what we have working:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var map;
var layer1;
var tableid = '';
var layer2;
var tableid2 = 'xxxxx';
var layer3;
var tableid3 = 'xxxxx';
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(31.499, -111.202),
zoom: 10,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
});
var styledMapType = new google.maps.StyledMapType({
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layer1 = new google.maps.FusionTablesLayer({
query: {
select: '',
from: tableid
},
map: map
});
layer2 = new google.maps.FusionTablesLayer({
query: {
select: 'LOC',
from: tableid2
},
map: map
});
layer3 = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: tableid3
},
suppressInfoWindows:true,
map: map
});
}
function changeMap(layerNum) {
if (layerNum == 2) {
update(layer2);
}
if (layerNum == 3) {
update(layer3);
}
}
function update(layer) {
var layerMap = layer.getMap();
if (layerMap) {
layer.setMap(null);
} else {
layer.setMap(map);
}
}
</script>
<style type="text/css">
#toggle_box {
position: absolute;
top: 7px;
right: 7px;
padding: 3px;
border: 1px solid #707735;
background: #DED9C6;
font-family: 'Coda', cursive;
}
body {
margin: 0px;
padding: 0px;
font-family: 'Coda', cursive;
}
#map_canvas {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
font-family: 'Coda', cursive;
}
</style>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
<div id="toggle_box"><input type="checkbox" value="2" onclick="changeMap(this.value)" checked="checked" />REFERENCE POINTS
<input type="checkbox" value="3" onclick="changeMap(this.value)" checked="checked" />AZ COUNTIES</div>
</body>
</html>
Place it somewhere where the map is initialized, e.g. before that line:
var styledMapType = new google.maps.StyledMapType({
Related
I have made some markers on my map, each marker represents a report sent from that location.
I want to do that when I click on a specific marker I'll have its information on a popup.
The info is stored in a SQL database and it contains Category, Title, Remarks(Description), statUrgence(Urgence) & images Path(path). You can see it in the code as #_Data.Category ...
Code:
<link rel="stylesheet" href="~/css/ol.css">
<link rel="stylesheet" href="~/css/ol-ext.css">
<script src="~/js/ol.js"></script>
<div id="map" style="position: fixed; top: 62.5px; left: 0; bottom: 65px; right: 0; z-index:-1"></div>
<style>
.ol-zoom {
top: 2.5%;
}
</style>
<script type="text/javascript">
var layers = [new ol.layer.Tile({ source: new ol.source.OSM() })];
var map = new ol.Map({
target: 'map',
view: new ol.View({
zoom: 5,
center: [166326, 5992663]
}),
interactions: ol.interaction.defaults({ altShiftDragRotate: false, pinchRotate: false }),
layers: layers
});
const options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
//Tried to make here that when a marker is clicked something will happen, wasn't much of a success
// Vector Feature Popup logic
map.on('click', function (e) {
map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
console.log(feature, layer);
})
})
</script>
#{
if (Model != null)
{
foreach (var _Data in Model)
{
#*Saving the data that needs to be in each marker*#
#*<div class="card" id="overlay-container-#_Data.Id" style="display:none;">
<div class="card-header">
<h3><u>Category</u>: #_Data.category</h3><br />
<h5><u>Title</u>: #_Data.title</h5>
</div><br />
<div class="card-body">
<p>
<u>Description</u>: <br />#_Data.remarks
</p><br />
<u>Urgence</u>: #_Data.statUrgence <br />
</div>
<div class="card-footer">
#_Data.path
</div>
</div>*#
<script>
markers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png'
})
})
});
map.addLayer(markers);
var marker = new ol.Feature(new ol.geom.Point([parseFloat(#_Data.coordLat), parseFloat(#_Data.coordLong)]));
markers.getSource().addFeature(marker);
</script>
}
}
}
Include the properties you need in the popup as properties of the features, then you can copy them to the popup as required, as with name in https://openlayers.org/en/latest/examples/icon.html Complex popups can be created and styled as in https://openlayers.org/en/latest/examples/popup.html
End result of that using a simple subset of your properties and no extra css
<!DOCTYPE html>
<html>
<head>
<title>Popup</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#main/dist/en/v7.1.0/ol/ol.css" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#main/dist/en/v7.1.0/ol/dist/ol.js"></script>
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
<script>
/**
* Elements that make up the popup.
*/
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');
/**
* Create an overlay to anchor the popup to the map.
*/
const overlay = new ol.Overlay({
element: container,
autoPan: {
animation: {
duration: 250,
},
},
});
/**
* Add a click handler to hide the popup.
* #return {boolean} Don't follow the href.
*/
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
const Model = [
{
category: 'Capital city',
title: 'London',
long: -0.12755,
lat: 51.507222,
description: 'UK capital',
},
{
category: 'Capital city',
title: 'Rome',
long: 12.5,
lat: 41.9,
description: 'Italy capital',
},
{
category: 'Capital city',
title: 'Bern',
long: 7.4458,
lat: 46.95,
description: 'Switzerland capital',
},
];
/**
* Create the map.
*/
const map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
overlays: [overlay],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([7.5, 47]),
zoom: 3,
}),
});
const features = [];
for (key in Model)
{
const _Data = Model[key];
const feature = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([parseFloat(_Data.long), parseFloat(_Data.lat)])
),
category: _Data.category,
title: _Data.title,
description: _Data.description,
});
features.push(feature);
}
const markers = new ol.layer.Vector({
source: new ol.source.Vector({
features: features,
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png',
}),
}),
});
map.addLayer(markers);
map.on('click', function (evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature) {
const coordinates = feature.getGeometry().getCoordinates();
content.innerHTML =
'<p>Category:</p><code>' + feature.get('category') + '</code><br>' +
'<p>Title:</p><code>' + feature.get('title') + '</code><br>' +
'<p>Description:</p><code>' + feature.get('description') + '</code>'
overlay.setPosition(coordinates);
}
});
</script>
</body>
</html>
My goal is to have CSS-only icons for my Google Maps marker clusters. I have seen in the documentation's "advanced example" (link) that CSS-only icons are possible. However, I have been unable to translate this example into my own project.
I have attempted to build a JSFiddle with my code, though I can not seem to initialize the map through JSFiddle due to API restrictions. When I run the code on my site, it adds numbers to the map, but no icons, as seen below.
I created some styles
var styles = [{
width: 30,
height: 30,
className: "custom-clustericon-1",
},
{
width: 40,
height: 40,
className: "custom-clustericon-2",
},
{
width: 50,
height: 50,
className: "custom-clustericon-3",
},
];
And I have attempted to initialize like this:
var markerCluster = new MarkerClusterer(map, markers,
{
styles: styles,
clusterClass: "custom-clustericon",
});
Where am I missing the mark here? I'd like to have marker icons exactly like the ones in the "advanced example", but I'm at a loss. I have searched extensively online for examples of css-only icons but could not find any standalone examples. Your help is kindly appreciated.
You are using the wrong version of the MarkerClusterer library.
Use this one:
<script src="https://googlemaps.github.io/js-markerclustererplus/dist/index.min.js"></script>
proof of concept fiddle
code snippet:
function map_initialize() {
var mapoptions = {
center: new google.maps.LatLng(0, 0),
zoom: 0,
maxZoom: 15,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true,
zoomControl: true,
scrollwheel: true
};
var styles = [{
width: 30,
height: 30,
className: "custom-clustericon-1",
},
{
width: 40,
height: 40,
className: "custom-clustericon-2",
},
{
width: 50,
height: 50,
className: "custom-clustericon-3",
},
];
var map = new google.maps.Map(document.getElementById("mapdivbig"),
mapoptions);
var infoWin = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var markers = locations.map(function(location, i) {
bounds.extend(location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
position: location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
styles: styles,
clusterClass: "custom-clustericon",
});
}
var locations = [{
lat: 45.4208,
lng: -123.8,
info: 'Location 1'
},
{
lat: 47.6117,
lng: -122.345,
info: 'Location 2'
},
{
lat: 47.6308,
lng: -122.375,
info: 'Location 3'
}
]
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#mapdivbig {
width: 100%;
height: 100%;
background-color: grey;
}
#mapdiv {
width: 100%;
height: 325px;
background-color: grey;
}
.custom-clustericon {
background: var(--cluster-color);
color: #fff;
border-radius: 100%;
font-weight: bold;
font-size: 15px;
display: flex;
align-items: center;
}
.custom-clustericon::before,
.custom-clustericon::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background: var(--cluster-color);
opacity: 0.2;
border-radius: 100%;
}
.custom-clustericon::before {
padding: 7px;
}
.custom-clustericon::after {
padding: 14px;
}
.custom-clustericon-1 {
--cluster-color: #00a2d3;
}
.custom-clustericon-2 {
--cluster-color: #ff9b00;
}
.custom-clustericon-3 {
--cluster-color: #ff6969;
}
<!DOCTYPE html>
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://googlemaps.github.io/js-markerclustererplus/dist/index.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=map_initialize" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="mapdivbig"></div>
</body>
</html>
I'm wondering how can I use the new official Google Maps map marker, in my web-application with Google Maps API v3 (JavaScript).
This is the picture. I like it.
By the way, is there a way to change its color?
Thanks and happy x-mas :-)
You can not add the google maps' marker. You can only use the default marker or custom your marker.
This is an example of default marker:
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
/* 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;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
And this is an example of custom marker:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91539, 151.22820),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91747, 151.22912),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91910, 151.22907),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91725, 151.23011),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91872, 151.23089),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91784, 151.23094),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91682, 151.23149),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91790, 151.23463),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91666, 151.23468),
type: 'info'
}, {
position: new google.maps.LatLng(-33.916988, 151.233640),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: 'library'
}
];
// 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;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
Tell me if you have some questions.
I am facing problem in magento for the google map.
I have controller as the following:
class MapSoftware_Map_Adminhtml_MapbackendController extends Mage_Adminhtml_Controller_Action
{
public function indexAction()
{
$this->loadLayout();
$this->_title($this->__("MapSales"));
$block = $this->getLayout()->createBlock('core/text', 'example-block')->setTemplate('map/mapbackend.phtml')->toHtml();
$this->_addContent($block);
$this->renderLayout();
}
}
I am going to use mapbackend.phtml file and its code is given below
<style>
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
#map-canvas img {
max-width: none;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather,places,drawing"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(0.1768697,37.9083264),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new
google.maps.Map(document.getElementById('mapcanvas'),mapOptions);
var image = 'https://cdn0.iconfinder.com/data/icons/small-n-
flat/24/678111-map-marker-32.png';
var myLatLng = new google.maps.LatLng(0.1768697,37.9083264);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 96%; height: 500px; position: absolute;"></div>
So now my problem is when I go through the page it's showing only the map and not the controllers. This code is running on local machine but it's not working on magento.
Please help me , I am stuck with this part, also I am new in magento.
I think this is a Google Map bug in the latest version that makes the map controls not visible and throws a JS error. I have seen the same problem in other places. Try with v3.17 instead.
Ok, I just found the perfect script I was looking for.
http://web3o.blogspot.com.br/2010/05/google-maps-dynamically-movable-and.html
You can add circles with lat/long and radius on Google Maps.
The problem is that this script it's only for v2 api.
I found this one too
http://www.mapdevelopers.com/draw-circle-tool.php
But there's no code or source available on it :(
Does anybody know any script like these that could work on v3?
Thank you
That functionality is built in to the Google Maps API v3 Drawing Library
Example
You can customize it to just allow circles (or just allow one circle).
Working example
code snippet:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.CIRCLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE
]
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas,
#map_canvas {
height: 100%;
}
#media print {
html,
body {
height: auto;
}
#map-canvas,
#map_canvas {
height: 650px;
}
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.CIRCLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE
]
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas,
#map_canvas {
height: 100%;
}
#media print {
html,
body {
height: auto;
}
#map-canvas,
#map_canvas {
height: 650px;
}
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="map-canvas"></div>