So I am basically pulling a lat and lng from a database and using those coordinates plotting a circle on the map.
All is working well with the exception that my infoWindow, while populating the correct information, is popping up over the exact same circle, not the one that I am clicking on.
I have read several articles here but can't seem to find what it is I am doing wrong.
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var markerBounds = new google.maps.LatLngBounds();
var cityLocation;
<?php foreach($allResults as $key =>$singleResult): ?>
cityLocation = new google.maps.LatLng(<?php echo $singleResult["lat"] ?>, <?php echo $singleResult["lng"] ?>);
// Draw a marker for each random point
var circle = new google.maps.Circle({
center: cityLocation,
radius: <?php echo $meters ?>,
position: cityLocation,
strokeColor: "#222",
strokeOpacity: 0.1,
strokeWeight: 2,
fillColor: "#ff0007",
fillOpacity: 0.2,
clickable:true,
map: map
});
circle.info = new google.maps.InfoWindow ({
content:'<?php echo "Lat: " . $singleResult["lat"] . " " . "Lng: " . $singleResult["lng"] ?> '
});
google.maps.event.addListener(circle,'click',function() {
this.info.open(map, circle);
});
// Extend markerBounds with each random point.
markerBounds.extend(cityLocation);
<?php endforeach; ?>
// Map.fitBounds() method to set the map to fit markerBounds
map.fitBounds(markerBounds);
To open an infowindow on something that isn't a marker, you need to set the position of the infowindow (and not use the .open(map, anchor) syntax).
google.maps.event.addListener(circle, 'click', function (evt) {
infowindow.setContent(this.info);
infowindow.setPosition(this.getCenter());
infowindow.open(map);
});
proof of concept fiddle
Working example modified from google's circle example
Related question: Problems in Creating InfoWindow on each individual circle with mouseover using Google Map API
code snippet:
var infowindow = new google.maps.InfoWindow();
function initialize() {
// Create the map.
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100,
info: 'name: ' + citymap[city].name + "<br>population: " + citymap[city].population + "<br>" + citymap[city].info
};
// Add the circle for this city to the map.
var circle = new google.maps.Circle(populationOptions);
google.maps.event.addListener(circle, 'click', function(evt) {
infowindow.setContent(this.info);
infowindow.setPosition(this.getCenter());
infowindow.open(map);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
// This example creates circles on the map, representing
// populations in North America.
// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
population: 2714856,
name: "Chicago, IL",
info: "stuff for infowindow"
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
population: 8405837,
name: "New York, NY",
info: "stuff for infowindow"
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
population: 3857799,
name: "Los Angeles, CA",
info: "stuff for infowindow"
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
population: 603502,
name: "Vancouver, BC",
info: "stuff for infowindow"
};
var cityCircle;
html,
body,
#map-canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
change
this.info.open(map, circle);
to
this.info.open(map, this);
Related
My problem is: I need to draw with mode POLYGON with a initial point, like a marker or another element. For example - JSFiddle Example
With marker:
var initialPosition = new google.maps.Marker({
position: {
lat: -22.397542,
lng: -46.884630
}
});
This position is given without any user interaction. How can I do that?
In my example, how can I draw a polygon starting from marker without click it, making marker position my first polygon point?
You could do the following: use addListenerOnce to detect a click on the map (only once). This will allow to create a Polygon that goes from your marker position, to where the user clicked, and back to the marker position.
By setting the editable property to true, you can then move each Polygon point separately, and add segments by dragging the existing segment(s) middle point(s).
Here is a working example:
function initialize() {
var myLatLng = new google.maps.LatLng(46.2, 6.17);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListenerOnce(map, 'click', function(e) {
var origin = marker.getPosition();
var coords = [
origin,
e.latLng,
origin,
];
var poly = new google.maps.Polygon({
map: map,
paths: coords,
editable: true,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
});
}
initialize();
#map-canvas {
height: 150px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
How to make circle on a current location in google map instead of pointer.i am working on google map current location.Here is my code.Everything is working fine.I just want to point out the current location on a google map using a circle instead of pointer arrow.Here is my code.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAaczGkYJhz_uP1Xo03sWxYnBB7R1NXzZE&sensor=false&libraries=places&language=eng&types=establishment"></script>
navigator.geolocation.getCurrentPosition(function (p) {
var LatLng = new google.maps.LatLng(p.coords.latitude,p.coords.longitude);
var mapOptions = {
center: LatLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
});
google.maps.event.addListener(marker, "click", function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
});
what i have to modify in my code to do this.can any one help me please???can any one modify my code please???
i have already tried to modify my code but it is not working
var circle = new google.maps.Marker({
center: center,
center: new google.maps.LatLng(p.coords.latitude, p.coords.longitude),
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
position: LatLng,
title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
});
but it is not working
You will have to use Circles instead of a Marker. The Google Maps JS API has good documentation and samples on the same. Link to sample
Make necessary changes within the Circle options object to make the circle look like you desire.
navigator.geolocation.getCurrentPosition(function (p) {
var LatLng = new google.maps.LatLng(p.coords.latitude,p.coords.longitude);
var mapOptions = {
center: LatLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Commented out the marker
/*var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
});*/
//Added the circle
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: LatLng,
radius: 100
});
// Removed Event listner on the marker as marker is not being used
/*google.maps.event.addListener(marker, "click", function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});*/
});
Hope this helps !!
If you just want a "circular marker" instead of the default "bubble", you can use the predefined SVG SymbolPath CIRCLE:
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + LatLng.lat() + "<br />Longitude: " + LatLng.lng(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "blue",
fillOpacity: 1.0,
strokeColor: "blue",
strokeOpacity: 1.0,
strokeWeight: 0,
scale: 10
},
});
proof of concept fiddle
code snippet:
var geocoder;
var map;
var infoWindow;
function initialize() {
var LatLng = new google.maps.LatLng(37.4419, -122.1419);
var infoWindow = new google.maps.InfoWindow();
var mapOptions = {
center: LatLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + LatLng.lat() + "<br />Longitude: " + LatLng.lng(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "blue",
fillOpacity: 1,
strokeColor: "blue",
strokeOpacity: 1,
strokeWeight: 0,
scale: 10
},
});
google.maps.event.addListener(marker, "click", function(e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I am trying to implement a google map on the site I'm working on. I copied a example from the google maps api site where you can overlay circles. The map loads fine but non of the controls work being: zooming in and out, panning the map as such. Does anyone know what may be causing this> Below is my code:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
// This example creates circles on the map, representing
// populations in North America.
// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
population: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
population: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
population: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
population: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Here is a link to the site where its going wrong: http://surftoursouthafrica.com/map
Your code is fine.
On your webpage you have much more stuff that interfere with the map.
Remove col-xs-12 class from the div that surrounds map-canvas and it will work:
<div class="content">
<div id="map-canvas"></div>
</div>
I am currently building out a small widget that allows someone to see a kml heat map of the united states population density then select an area on that map and drop a market on to that location. The user then enters a number and that creates a mile radius to show the user how much area they cover.
My problem is that I have 63 .kml files for just one state in the US. I know I can remove the xml <name> and <description> to prevent the name from popping up when clicked, but I can't see that being practical with that many .kml files.
Is there a programmatic solution or API solution to prevent just the kml layers from being clickable?
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
value: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
value: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
value: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
value: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(34.7361, -92.3311),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].value) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.census.gov/main/kml/countysubs_z6/AR/05003.xml'
});
ctaLayer.setMap(map);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>
Discretionary note: Google API does not work well with Stack Overflow's code snippet's widget.
set the KmlLayer clickable option to false
clickable boolean If true, the layer receives mouse events. Default value is true.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
value: 2714856
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
value: 8405837
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
value: 3857799
};
citymap['vancouver'] = {
center: new google.maps.LatLng(49.25, -123.1),
value: 603502
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(34.7361, -92.3311),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].value) * 100
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.census.gov/main/kml/countysubs_z6/AR/05003.xml',
clickable: false
});
ctaLayer.setMap(map);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
Here is my code
I want a circles and a rectangle to appear on the same map (Map1,Map2.html)..How to do it?
Map1.html
<script>
// This example creates circles on the map, representing
// populations in North America.
// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(45.637839, -73.648316),
population: 270
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(45.637839, -73.648316),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: 40 * 1000
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
google.maps.event.addListener(map,'click',function(event) {
alert("Shan");
var map1=event.latLng.lat() + ', ' + event.latLng.lng();
document.getElementById("latlong").innerHTML=map1;
})
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Map2.html
<script>
// This example adds a red rectangle to a map.
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 11,
center: new google.maps.LatLng(45.637839, -73.648316),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(45.16267407976457,-74.6630859375),
new google.maps.LatLng(46.1665167159516,-72.6580810546875))
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Just combine it all:
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(45.637839, -73.648316),
population: 270
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(45.637839, -73.648316),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: 40 * 1000
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(45.16267407976457, -74.6630859375),
new google.maps.LatLng(46.1665167159516, -72.6580810546875))
});
google.maps.event.addListener(map, 'click', function (event) {
alert("Shan");
var map1 = event.latLng.lat() + ', ' + event.latLng.lng();
document.getElementById("latlong").innerHTML = map1;
})
}
google.maps.event.addDomListener(window, 'load', initialize);