Develop Reference

Drawing a POLYGON from initial position

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>

Google Maps API, add hover state to pin

i'm creating a Marker layer on my Google Map, and then adding pins. These get added to this layer. I want to add a hover effect which is basically a circle behind the pin.
I was going to just use CSS, however I can't add a before or after to the image, so I need to get the parent element and add it to this. However the Google Maps API doesn't give you access to the Pin element.
var markerLayer = new google.maps.OverlayView();
markerLayer.draw = function () {
this.getPanes().markerLayer.id='markerLayer';
};
markerLayer.setMap(_.map);
// Create pin and store it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location.lat, location.lng),
icon: marker,
title: location.name,
optimized: false
});
_.markers.push(marker);
Below is a screenshot of what the marker object contains, and as you can see there is no reference to the HTMLElement.
My only though was to search the #markerLayer div for images and storing them, assuming that these will appear in the same order as they are added to the _.markers property.
Or would a better way be to create a Circle using the API and putting it in the same position as the pin?

I used the Google Maps Circle to create a circle shape, when hovering to markers.
here is the link to doc:
(https://developers.google.com/maps/documentation/javascript/examples/circle-simple)
Check this addMarker function
function addMarker(position) {
var marker = new google.maps.Marker({
position: position,
map: map
});
var markerCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
center: position,
radius: 500000
});
circles.push(markerCircle);
markers.push(marker);
marker.addListener('mouseover', function() {
var index = markers.indexOf(marker);
circles[index].setMap(map);
});
marker.addListener('mouseout', function(){
var index = markers.indexOf(marker);
circles[index].setMap(null);
});
return marker;
}
I made a simple app, that will add markers by clicking on the map.
Check this working example: http://jsbin.com/nukecog/2/edit?html,js,output
var map;
var markers = [];
var circles = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {
lat: 0,
lng: 0
}
});
map.addListener('click', function(e) {
addMarker(e.latLng);
});
}
function addMarker(position) {
var marker = new google.maps.Marker({
position: position,
map: map
});
var markerCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
center: position,
radius: 500000
});
circles.push(markerCircle);
markers.push(marker);
marker.addListener('mouseover', function() {
var index = markers.indexOf(marker);
circles[index].setMap(map);
});
marker.addListener('mouseout', function() {
var index = markers.indexOf(marker);
circles[index].setMap(null);
});
return marker;
}
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap">
</script>
</body>
</html>

Google Maps Infowindows with shapes

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);

Cant zoom in and out of google map

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>

Google Map Circle for single address not working

I am trying to get a single circle for my google map, i am not using the multiple array as it is specified in the google map document because i just want one single point with the circle to be shown in the map.
I don't know where exactly am i making error, please will someone let me know where exactly am i making error.
this is my code
var loc = new google.maps.LatLng(25.800693, 55.976199);
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: loc
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: loc
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(25.800693, 55.976199),
radius: 50
});
google.maps.event.addDomListener(window, 'load', initialize);
Thanks in advance

Move the initialization of the circle inside the initialize function, so it is initialized after the map, not before.
var loc = new google.maps.LatLng(25.800693, 55.976199);
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: loc
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: loc
});
cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(25.800693, 55.976199),
radius: 50
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>