I am plotting the markers on google map using infobox.js not using https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple which is working fine the code is as shown below
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
</style>
<script>
var map;
var AutoCircle = [
{
"latitude": '21.170931',
"longitude": '72.855607',
},
{
"latitude": '21.192533',
"longitude": '72.848750',
},
{
"latitude": '21.190178',
"longitude": '72.797578',
}
];
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat:21.181272, lng:72.835066},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
addLabel(AutoCircle);
}
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
function addLabel(circleArray){
for (var i=0;i<circleArray.length;i++) {
var circleData = circleArray[i]
var circleLatlng = new google.maps.LatLng(circleData.latitude, circleData.longitude);
// Add the circle for this city to the map.
var myOptions = {
content: 300+"*"+"<br>autos",
boxStyle: {
background: '#FFFFFF',
color: 'red',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
position: new google.maps.LatLng(circleArray[i].latitude,
circleArray[i].longitude),
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
zIndex: 100,
enableEventPropagation: true
};
var ib = new InfoBox(myOptions);
ib.open(map);
}
}
google.maps.event.addDomListener(window, "load", initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
how to add the infowindow which we click on the label
Please help
I couldn't make it work with a dynamically rendered div from a text string (if you use the domready event, you should be able to access the node by its id, not sure why that doesn't work), If I create the <div> as a DOM node, I can add a listener to it.
code snippet:
function addLabel(circleArray) {
for (var i = 0; i < circleArray.length; i++) {
var circleData = circleArray[i]
var circleLatlng = new google.maps.LatLng(circleData.latitude, circleData.longitude);
// Create div for infoBubble
var div = document.createElement("div");
// create text node
var text = document.createTextNode(300 + "*" + "\nautos\n" + circleData.content);
// append text to div
div.appendChild(text);
// add click listener to div
google.maps.event.addDomListener(div, 'click', (function(i, latLng) {
return function() {
infowindow.setContent('clicked on ' + i);
infowindow.setPosition(latLng);
infowindow.open(map);
}
}(i, circleLatlng)));
var myOptions = {
content: div, // use DOM node for content
boxStyle: {
background: '#FFFFFF',
color: 'red',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
position: new google.maps.LatLng(circleArray[i].latitude,
circleArray[i].longitude),
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
zIndex: 100,
enableEventPropagation: true
};
var ib = new InfoBox(myOptions);
ib.open(map);
}
}
var map;
var infowindow = new google.maps.InfoWindow();
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 21.181272,
lng: 72.835066
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
addLabel(AutoCircle);
}
google.maps.event.addDomListener(window, "load", initMap);
var AutoCircle = [{
"latitude": '21.170931',
"longitude": '72.855607',
"content": "content0"
}, {
"latitude": '21.192533',
"longitude": '72.848750',
"content": "content1"
}, {
"latitude": '21.190178',
"longitude": '72.797578',
"content": "content2"
}];
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>
If I understand your code correctly, the 'label' you refer to is an instance of the InfoBox class, which according to its docs, "fires the same events as a google.maps.InfoWindow":
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
So you should be able to do something like:
var infowindow = new google.maps.InfoWindow({
content: 'foo'
});
ib.addListener('click', function() {
infowindow.open(map, this);
});
Related
How to left align the google maps, I mean the marker positions. Here is my JS
function showGoogleMaps() {
var latLng = new google.maps.LatLng(position[0], position[1]);
var mapOptions = {
zoom: 16,
zoomControl:false,
mapTypeControl:false,
streetViewControl: false, // hide the yellow Street View pegman
scaleControl: true, // allow users to zoom the Google Map
mapTypeId:ROADMAP,
center: latLng,
scrollwheel: false,
styles: styles
};
map = new google.maps.Map(document.getElementById('googlemaps'),
mapOptions);
// Show the default red marker at the location
marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: false,
title: 'Hello',
animation: google.maps.Animation.DROP
});
}
Here are the screenshots
The default marker location
How I want this to be
The marker or location is centered by default. I want that either to the left or right by default.
Thanks
A simple approach:
Initially set the width of the map to e.g 30%.
The center of the map now will be in the middle of these 30%.
Once the map is loaded set the width of the map to 100%.
function initialize() {
var goo = google.maps,
map = new goo.Map(document.getElementById('googleMap'), {}),
markers = [{
pos: new goo.LatLng(26.1445169, 91.7362)
}, {
pos: new goo.LatLng(26.2571285, 92.05991)
}, {
pos: new goo.LatLng(26.3143518, 91.0497609)
}, ],
bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; ++i) {
new google.maps.Marker({
map: map,
position: markers[i].pos
});
bounds.extend(markers[i].pos);
}
map.fitBounds(bounds);
goo.event.addListenerOnce(map, 'idle', function() {
this.getDiv().style.width = '100%';
goo.event.trigger(this, 'resize');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_wrapper,
#googleMap {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#googleMap {
width: 30%;
}
<div id="map_wrapper">
<div id="googleMap"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
To align the markers on the right additionally use the panBy-method:
function initialize() {
var goo = google.maps,
map = new goo.Map(document.getElementById('googleMap'), {}),
markers = [{
pos: new goo.LatLng(26.1445169, 91.7362)
}, {
pos: new goo.LatLng(26.2571285, 92.05991)
}, {
pos: new goo.LatLng(26.3143518, 91.0497609)
}, ],
bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; ++i) {
new google.maps.Marker({
map: map,
position: markers[i].pos
});
bounds.extend(markers[i].pos);
}
map.fitBounds(bounds);
goo.event.addListenerOnce(map, 'idle', function() {
this.getDiv().style.width = '100%';
this.panBy(-(this.getDiv().offsetWidth/1.5),0);
goo.event.trigger(this, 'resize');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_wrapper,
#googleMap {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#googleMap {
width: 30%;
}
<div id="map_wrapper">
<div id="googleMap"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
So I have found a couple of ways to get maps onto my page, the first version is by using an iframe like so:
<iframe src="https://www.google.com/maps/embed/v1/place?key=[APIKEY]&q=place_id:[PlaceID]"></iframe>
which gives a marker like the following image with the name of the place next to the marker:
However, this isn't perfect as it has that massive white box in the top left and according to many SO posts, you are unable to remove it.
So I thought I would try the js route so have the following code:
var map = new google.maps.Map(this, {
zoom: 15,
center: { lat: options.latitude, lng: options.longitude }
});
marker = new google.maps.Marker({
map: map,
title: options.title
});
marker.setPlace({
placeId: options.placeId,
location: { lat: options.latitude, lng: options.longitude }
});
var infowindow = new google.maps.InfoWindow(
{
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
Where all the options are filled in with proper values. However, this produces the following map which is better as it doesn't have the white box:
However, the second map doesn't have the shop text on the map even though it is using the same place id as the first one is.
Is there any way to change the js code so that it will include the place text like in the iframe version? I have searched all the documentation and examples but couldn't find any setting to do this
You can add that label to the map yourself. One option is to use an InfoBox:
function addMapLabel(text, latlng, map) {
var labelText = "<b>" + text + "</b>";
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "auto",
color: "#800000"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(10, -10),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
proof of concept fiddle
code snippet:
function addMapLabel(text, latlng, map) {
var labelText = "<b>" + text + "</b>";
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "auto",
color: "#800000"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(10, -10),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
var map;
var options = {
placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
latitude: 53.7153659,
longitude: -1.8790866,
title: "Dickies Tiles",
address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 15,
center: {
lat: options.latitude,
lng: options.longitude
}
});
marker = new google.maps.Marker({
map: map,
title: options.title
});
marker.setPlace({
placeId: options.placeId,
location: {
lat: options.latitude,
lng: options.longitude
}
});
var infowindow = new google.maps.InfoWindow({
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
addMapLabel(options.title, new google.maps.LatLng(options.latitude, options.longitude), map);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>
Just in case anyone else needs this type of thing, I found a better plugin than the infobox one in my accepted answer (although I am leaving that as the accepted as it pointed me in the right direction). It is:
MarkerWithLabel.
It offers the same as InfoBox but also lets you click on the label, as you would the marker, to open the info window
An example of how I used it would be:
var map;
var options = {
placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
latitude: 53.7153659,
longitude: -1.8790866,
title: "Dickies Tiles",
address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 15,
center: {
lat: options.latitude,
lng: options.longitude
}
});
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(options.latitude, options.longitude),
map: map,
title: options.title,
labelContent: options.title,
labelAnchor: new google.maps.Point(-13, 15),
labelClass: "map-label",
labelStyle: {
border: 'none',
textAlign: 'center',
fontSize: '12px',
width: 'auto',
color: '#800000'
}
});
marker.setPlace({
placeId: options.placeId,
location: {
lat: options.latitude,
lng: options.longitude
}
});
var infowindow = new google.maps.InfoWindow({
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.map-label { text-shadow: -1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff; font-weight:bold; }
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>
Can you please take a look at this Demo and let me know how I can clear ONLY the Rectangle (Not Markers) after zoom in finshed.
I already tried adding the map.setMap(null); into rectanglecomplete but it is not working besides I think this might remove all drawing even the markers from the map which I do not want to do
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
map.fitBounds(r.getBounds());
map.setMap(null);
});
Update
I also tried this:
var drawings = [];
function deleteRect() {
for (var i=0; i < drawings.length; i++)
{
drawings[i].overlay.setMap(null);
}
drawings = [];
}
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
drawings.push(r);
map.fitBounds(r.getBounds());
deleteRect()
});
but still no success and I am getting the
Uncaught TypeError: Cannot read property 'setMap' of undefined
in the console!
code snippet:
var map;
var drawingManager
$(document).ready(function () {
var latlng = new google.maps.LatLng(49.241943, -122.889318);
var myOptions = {
zoom: 12,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE]
}
});
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
map.fitBounds(r.getBounds());
});
drawingManager.setMap(map);
});
body {
padding-top:25px;
}
#map_canvas {
width: 100%;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
<div class="container">
<div class="well">
<div id="map_canvas"></div>
</div>
</div>
You can draw a transparent rectangle this way
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: {
fillColor: '#cccccc',
fillOpacity: 0,
strokeWeight: 5,
}
});
and for remove the rectangle use
google.maps.event.addListener(drawingManager,'rectanglecomplete',function(r) {
map.fitBounds(r.getBounds());
r.setMap(null);
});
like this sample
I am attempting to stop events from firing when an infoBox is opened. The issue is when the Infobox is rendering ontop of other markers, users have the ability to click through the InfoBox and click on the markers behind it. Is there a way to prevent this while still being able to click on a marker not behind the infobox?
dropInfoBox = new InfoBox({
content: document.getElementById("pinDrop"),
disableAutoPan: false,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
color: 'white',
background: '#101010',
width: "90px"
},
infoBoxClearance: new google.maps.Size(1, 1)
});
dropInfoBox.open(map, marker);
$('.infoBox > img').css('height', '');
$('.infoBox').click(function (evt) {
evt.stopPropagation();
});
Set enableEventPropagation to false.
enableEventPropagation | boolean | Propagate mousedown, mousemove, mouseover, mouseout,
mouseup, click, dblclick, touchstart, touchend, touchmove, and contextmenu events in the
InfoBox (default is false to mimic the behavior of a google.maps.InfoWindow). Set
this property to true if the InfoBox is being used as a map label.
dropInfoBox = new InfoBox({
enableEventPropagation: false,
content: document.getElementById("pinDrop"),
disableAutoPan: false,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
color: 'white',
background: '#101010',
width: "90px"
},
infoBoxClearance: new google.maps.Size(1, 1)
});
dropInfoBox.open(map, marker);
code snippet:
var map = null;
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.901458523676155,
8.381676499999912),
zoom: 15
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'Point') {
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'),
map: map
});
google.maps.event.addListener(marker, 'click', function(marker, e) {
return function() {
var myHTML = e.feature.getProperty('name');
boxText.innerHTML = "<div style='text-align: center;height: 100px'><b>" + myHTML + "</b><br>This is an InfoBox</div>";
infobox.setPosition(e.feature.getGeometry().get());
infobox.setOptions({
pixelOffset: new google.maps.Size(-140, -20)
});
infobox.open(map);
};
}(marker, e));
if (e.feature.getProperty('name') == "Guetersloh") {
clickMarker(marker);
}
}
});
layer = map.data.addGeoJson(geoJson);
map.data.setMap(null);
google.maps.event.addListener(map, "click", function() {
infobox.close();
});
}
function clickMarker(marker) {
setTimeout(function() {
google.maps.event.trigger(marker, 'click');
}, 1000);
}
google.maps.event.addDomListener(window, 'load', initialize);
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Guetersloh"
},
"geometry": {
"type": "Point",
"coordinates": [8.383353, 51.902917]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh2"
},
"geometry": {
"type": "Point",
"coordinates": [8.38, 51.9]
}
}]
};
html,
body,
#map {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>
simply add optimized:false parameter when creating the markers and problem solved!
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({