When the user clicks on the marker the first time I want a polygon to appear. The second time they click the polygon should disappear. This code works fine for the appearing part but it does not remove the polygon from the map. Every odd click just makes the polygon darker.
body onload="initMap()">
<p id="instructions"></p>
<div id="map" style='overflow:hidden;height:500px;width:500px;'></div>
<script type="text/javascript">
function initMap() {
var myOptions = {zoom:11,center:new google.maps.LatLng(37.55020520861464,126.98140242753904),mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById('map'), myOptions);
document.getElementById("myButton").addEventListener("click", function() {
initMarker();
myTimer();
});
}
function initMarker() {
var t1 = 1;
marker1 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.55020520861464,126.98140242753904)});
marker2 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.558816, 126.908212)});
marker3 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.580107, 127.056797)});
marker4 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.446290, 126.862625)});
marker5 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.435041, 126.999528)});
marker6 = new google.maps.Marker({map: map,position: new google.maps.LatLng(37.522926, 126.853862)});
marker1.addListener('click', function() {
var triangleCoords = [
{lat: 37.550, lng: 123.9814},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
var triangle1 = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: 'FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
if (t1 == 1) {
triangle1.setMap(map);
t1 = 2;
}
else {
triangle1.setMap(null);
t1 = 1;
}
});
}
</script>
<div><button id="myButton">Start</button></div>
<div id="timer"></div>
<p id="explain"></p>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'
async defer ></script>
</body>
Try moving the new polygon inside the if statement. I think, when ever you evoke that function it makes a new instance of triangle1, that's why when you try to remove polygon it deletes the new instance of "var triangle1" (which wasn't drawn to to map yet) rather than the one on the map. (sorry about the English)
marker1.addListener('click', function() {
var triangleCoords = [
{lat: 37.550, lng: 123.9814},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
if (t1 == 1) {
var triangle1 = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: 'FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
triangle1.setMap(map);
t1 = 2;
}
else {
triangle1.setMap(null);
t1 = 1;
}
});
One option (from Removing Rectangle from Map, slightly modified...
define the triangle1 variable outside the scope of the click listener
check if the triangle1 object exists and has a .setMap method.
if it does, set it's map property to null (the polygon is currently displayed), hide it, and set it to null.
if it doesn't exist, or doesn't have a .setMap method, create the marker.
var map;
function initMap() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(37.55020520861464, 126.98140242753904),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
document.getElementById("myButton").addEventListener("click", function() {
initMarker();
});
}
function initMarker() {
marker1 = new google.maps.Marker({
map: map,
title: "marker 1",
position: new google.maps.LatLng(37.55020520861464, 126.98140242753904)
});
var triangle1;
marker1.addListener('click', function(evt) {
if (triangle1 && triangle1.setMap) {
triangle1.setMap(null);
triangle1 = null;
} else {
var triangleCoords = [{
lat: 37.550,
lng: 123.9814
}, {
lat: 18.466,
lng: -66.118
}, {
lat: 32.321,
lng: -64.757
}, {
lat: 25.774,
lng: -80.190
}];
triangle1 = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: 'FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div>
<button id="myButton">Start</button>
</div>
<div id="timer"></div>
<p id="explain"></p>
<div id="map"></div>
Related
I am trying to remove all the 4 circle from google map with a click of a button, but currently I can only remove one circle. Could anyone let me know how I can remove the multiple circle at once with a click of a button. Sorry I am new to this. Thanks in advance.
My code:
<input onclick="removecircle();" type=button value="Remove line">
<input onclick="addcircle();" type=button value="Restore line">
<div id="map"></div>
<script>
var cityCircle;
var citymap = {
chicago: {
center: {lat: 41.878, lng: -87.629},
population: 2714856
},
newyork: {
center: {lat: 40.714, lng: -74.005},
population: 8405837
},
losangeles: {
center: {lat: 34.052, lng: -118.243},
population: 3857799
},
vancouver: {
center: {lat: 49.25, lng: -123.1},
population: 603502
}
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 37.090, lng: -95.712},
mapTypeId: 'terrain'
});
// 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) {
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle({
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
});
}
}
function addcircle(){
cityCircle.setMap(map);
}
function removecircle(){
cityCircle.setMap(null);
}
Image 1
Image 2
You need to keep references to the circles (and the map) in the global scope (where they will be accessible from HTML click listener functions). Then process through all the circles to either add or remove them from the map.
var circles = [];
var map;
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 37.090,
lng: -95.712
},
mapTypeId: 'terrain'
});
// 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) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
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
});
// keep reference to the circle
circles.push(cityCircle);
}
}
function addcircle() {
for (var i = 0; i < circles.length; i++) {
circles[i].setMap(map);
}
}
function removecircle() {
for (var i = 0; i < circles.length; i++) {
circles[i].setMap(null);
}
}
proof of concept fiddle
code snippet:
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
<input onclick="removecircle();" type=button value="Remove circles">
<input onclick="addcircle();" type=button value="Restore circles">
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<div id="map"></div>
<script>
var circles = [];
var map;
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 37.090,
lng: -95.712
},
mapTypeId: 'terrain'
});
// 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) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
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
});
circles.push(cityCircle);
}
}
function addcircle() {
for (var i = 0; i < circles.length; i++) {
circles[i].setMap(map);
}
}
function removecircle() {
for (var i = 0; i < circles.length; i++) {
circles[i].setMap(null);
}
}
google.maps.event.addDomListener(window, 'load', initMap);
var cityCircle;
var citymap = {
chicago: {
center: {
lat: 41.878,
lng: -87.629
},
population: 2714856
},
newyork: {
center: {
lat: 40.714,
lng: -74.005
},
population: 8405837
},
losangeles: {
center: {
lat: 34.052,
lng: -118.243
},
population: 3857799
},
vancouver: {
center: {
lat: 49.25,
lng: -123.1
},
population: 603502
}
};
</script>
I want the marker to be detected and display a value that is assigned to a rectangle. Through research, I found this, but it is not applicable in my case as I only need a latlong point. I have found something similar to what I want and tried it out, which is here
But it does not seem to work in my case.
I have a rectangle below:
var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: -37.822802,
south: -37.822260,
east: 145.036010,
west: 145.035324
}
});
And I tried to insert a point, which is -37.822545, 145.035526, and this point is within the rectangle, and it is supposed to return true but it wasn't.
Here is my JSfiddle
Looks like the LatLngLiteralBounds input for google.maps.Rectangle is broken. It creates a rectangle with north and south reversed. With your original rectangle (north: -37.822802, south: -37.822260), I get:
NE1:-37.822802,145.03601 (north=-37.822802, incorrect)
SW1:-37.82226,145.035324 (south=-37.82226, incorrect)
Whereas if I create the rectangle with a google.maps.LatLngBounds object, I get:
NE2:-37.82226,145.03601 (north=-37.82226, correct)
SW2:-37.822802,145.035324 (south=-37.822802, correct)
proof of concept fiddle
(blue markers are NE/SW of rectangle2, red markers are NE/SW of rectangle1.)
someone should create an issue in the issue tracker
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 19,
center: {
lat: -37.82280243352756,
lng: 145.0353240966797
},
mapTypeId: 'terrain'
});
var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
north: -37.822802,
south: -37.822260,
east: 145.036010,
west: 145.035324
}
});
var rectangle2 = 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(-37.822802, 145.035324), // SW
new google.maps.LatLng(-37.822260, 145.036010)) // NE
});
var marker = new google.maps.Marker({
map: map,
position: {
lat: -37.822545,
lng: 145.035526
},
title: "-37.822545, 145.035526"
});
var NEmark1 = new google.maps.Marker({
map: map,
position: rectangle1.getBounds().getNorthEast(),
title: "NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue()
});
var SWmark1 = new google.maps.Marker({
map: map,
position: rectangle1.getBounds().getSouthWest(),
title: "SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue()
});
var NEmark2 = new google.maps.Marker({
map: map,
position: rectangle2.getBounds().getNorthEast(),
title: "NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue(),
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
var SWmark2 = new google.maps.Marker({
map: map,
position: rectangle2.getBounds().getSouthWest(),
title: "SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue(),
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
map.fitBounds(rectangle1.getBounds());
console.log(rectangle1.getBounds().toUrlValue());
console.log("NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue());
console.log("SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue());
document.getElementById('contains').innerHTML = "rectangle1 bounds.contains=" + rectangle1.getBounds().contains({
lat: -37.822545,
lng: 145.035526
});
console.log(marker.getPosition().toUrlValue());
console.log(rectangle2.getBounds().toUrlValue());
console.log("NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue());
console.log("SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue());
console.log(rectangle2.getBounds().contains({
lat: -37.822545,
lng: 145.035526
}));
document.getElementById('contains').innerHTML += " rectangle2 bounds.contains=" + rectangle2.getBounds().contains({
lat: -37.822545,
lng: 145.035526
});
console.log(rectangle2.getBounds().contains(marker.getPosition()));
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
height: 95%;
width: 100%;
}
<div id="contains"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
I think you just mixed up your north and south parameters. (A larger negative latitude number is further south than a smaller one)
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 19,
center: {
lat: -37.82280243352756,
lng: 145.0353240966797
},
mapTypeId: 'terrain'
});
var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
south: -37.822802, // This is further south ...
north: -37.822260, // than this
east: 145.036010,
west: 145.035324
}
});
alert(rectangle1.getBounds());
alert(rectangle1.getBounds().contains({lat:-37.822545, lng:145.035526}));
}
With north and south switched like this, the js-fiddle returns true.
Im trying to get a Notification if My marker gets into any of the polygons inside the map. However, can't seem to find a way to do it correctly, this is my code so far:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="signin.js"> </script>
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAjp8cvAcEYCwzuCyTQORL3Z1iQPdQMg_8",
authDomain: "just-don-t.firebaseapp.com",
databaseURL: "https://just-don-t.firebaseio.com",
projectId: "just-don-t",
storageBucket: "just-don-t.appspot.com",
messagingSenderId: "925350346315"
};
firebase.initializeApp(config);
</script>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"> </script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAjp8cvAcEYCwzuCyTQORL3Z1iQPdQMg_8&libraries=drawing&callback=initMap" async defer> </script>
<header><h1><center><b>WELCOME TO THE JUST DON'T APP</b> </center></h1></header>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style >
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
body {font-family: Arial, Helvetica, sans-serif;}
[...] Here is just visual parts of the app such as buttons and such, it should not affect the rest of the app [...]
<div id="map"></div>
<script>
var lineCoords = [];
var pubnub = new PubNub({
publishKey: 'pub-c-22289088-791b-4f24-900a-84dc41c860bf',
subscribeKey: 'sub-c-e781e56c-23f5-11e8-a8f3-22fca5d72012'
});
window.lat = 55.845890;
window.lng = -4.423741;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(updatePosition);
}
return null;
};
function updatePosition(position) {
if (position) {
window.lat = position.coords.latitude;
window.lng = position.coords.longitude;
}
}
setInterval(function(){updatePosition(getLocation());}, 10000);
function currentLocation() {
return {lat:window.lat, lng:window.lng};
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: lat, lng: lng},
zoom: 17
});
var infoWindow = new google.maps.InfoWindow({
map: map
});
var pleasantAreaCoords = [
{lat: 55.84478883022466, lng:-4.423067882047013},
{lat: 55.84485326696093, lng: -4.422505549698727},
{lat: 55.84538931148452, lng: -4.4228536960804},
{lat: 55.84525930830721, lng: -4.423344253807979},
{lat: 55.84478883022466, lng: -4.423067882047013}
];
var pleasant = new google.maps.Polygon({
paths: pleasantAreaCoords,
strokeColor: '#E9F52C',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#E9F52C',
fillOpacity: 0.35
});
pleasant.setMap(map);
var unsafeCoords = [
{lat: 55.84582542929267, lng:-4.423879981040955 },
{lat: 55.845723031335204, lng: -4.424362778663635},
{lat: 55.84565677368958, lng:-4.424352049827576},
{lat: 55.845723031335204, lng:-4.4238585233688354},
{lat: 55.8458284409932, lng: -4.423881322145462}
]
var unsafe_area = new google.maps.Polygon({
paths: unsafeCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
unsafe_area.setMap(map);
var unpleasantAreacoords = [
{lat: 55.84580133567989,lng:-4.424523711204529},
{lat: 55.84583747609345,lng: -4.424319863319397},
{lat: 55.84653618415134,lng: -4.424673914909363},
{lat: 55.8465000443874,lng: -4.425221085548401},
{lat: 55.84580160878137,lng: -4.4245168063742994}
];
var unpleasant = new google.maps.Polygon({
paths: unpleasantAreacoords,
strokeColor: '#F5942C',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#F5942C',
fillOpacity: 0.35
});
unpleasant.setMap(map);
var commercialZoneCoords = [
{lat: 55.846999974806145,lng: -4.423676133155823},
{lat: 55.84714453180107,lng: -4.421852231025696},
{lat: 55.84583747609345,lng: -4.421680569648743},
{lat: 55.84553630495364,lng: -4.423472285270691}
];
var commercialZone = new google.maps.Polygon({
paths: commercialZoneCoords,
strokeColor: '#3CB2F1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#3CB2F1',
fillOpacity: 0.35
});
commercialZone.setMap(map);
var mainStreetCoords =[
{lat: 55.84504840275506,lng: -4.426873326301575},
{lat: 55.84528331939289,lng: -4.4235581159591675},
{lat: 55.84553028150705,lng: -4.423697590827942},
{lat: 55.8452652489327,lng: -4.426959156990051}
];
var mainStreet = new google.maps.Polygon({ paths: mainStreetCoords,
strokeColor: '#E63CF1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#E63CF1',
fillOpacity: 0.35
});
mainStreet.setMap(map);
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var initialize = function() {
map = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12});
mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map});
};
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
window.initialize = initialize;
var Paisley = pos;
var mark = new google.maps.Marker({
position:{lat:lat, lng:lng},
map:map,
});
var redraw = function(payload) {
lat = payload.message.lat;
lng = payload.message.lng;
mark.setPosition({lat:lat, lng:lng, alt:0});
lineCoords.push(new google.maps.LatLng(lat, lng));
var lineCoordinatesPath = new google.maps.Polyline({
path: lineCoords,
geodesic: true,
strokeColor: '#2E10FF'
});
lineCoordinatesPath.setMap(map);
};
point = position;
var pnChannel = "map-channel";
var pubnub = new PubNub({
publishKey: 'pub-c-22289088-791b-4f24-900a-84dc41c860bf',
subscribeKey: 'sub-c-e781e56c-23f5-11e8-a8f3-22fca5d72012'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw});
map.setCenter({lat:lat, lng:lng, alt:0});
setInterval(function() {
pubnub.publish({channel:pnChannel, message:currentLocation()});
}, 100);
}, function () {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
}
</script>
</body>
</html>
And here is the code Im trying to implement to detect and notify if the marker gets inside the polygon (for this example I am using
point = Marker
if(google.maps.containsLocation(point, mainStreetCoords) == true) {
alert("You are at the Main street");
}
If I get it to work will update this but would appreciate if someone could explain me how to get it to work.
according to Google map api document
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src=".../maps/api/js?key=YOUR_API_KEY&libraries=geometry">
google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle)
the first variable would be like this var point = new google.maps.LatLng(x, y);
but not a marker
so I tried your code (but mine google map api ;) )
add a click event and test, it works
here's working code
commercialZone.addListener('click', function(e) {
var marker = new google.maps.Marker({
position: e.latLng,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "red",
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
if(google.maps.geometry.poly.containsLocation(marker.position, commercialZone) == true) {
alert("You are at the Main street");
}
});
if you click on commercialZone (blue one), alert will be triggered
you can do what you want base on this
hope this helps
I've made a website with the Google Maps API. If users click in a polygon a message appears. It works on click, so the user has to click in or outside the Polygon area, but I would like to make it on page load, based on the users current position.
Is it possible to trigger the function below on page load?
google.maps.event.addListener(map, 'click', function (event) {
if (boundaryPolygon!=null && boundaryPolygon.Contains(event.latLng)) {
document.getElementById('result').innerHTML = 'You live in this area.';
} else {
//alert(event.latLng + " Du bist ein Ossi!");
document.getElementById('result').innerHTML = 'You live outside this area.';
}
});
}
You can trigger a click event on the map like this (where the latLng property is the location of the click):
google.maps.event.trigger(map, 'click', {
latLng: new google.maps.LatLng(24.886, -70.268)
});
proof of concept fiddle
code snippet:
// polygon example from: https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [{
lat: 25.774,
lng: -80.190
}, {
lat: 18.466,
lng: -66.118
}, {
lat: 32.321,
lng: -64.757
}, {
lat: 25.774,
lng: -80.190
}];
// Construct the polygon.
var boundaryPolygon = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
clickable: false
});
boundaryPolygon.setMap(map);
google.maps.event.addListener(map, 'click', function(event) {
if (boundaryPolygon != null && google.maps.geometry.poly.containsLocation(event.latLng, boundaryPolygon)) {
document.getElementById('result').innerHTML = 'You live in this area.';
} else {
document.getElementById('result').innerHTML = 'You live outside this area.';
}
});
google.maps.event.trigger(map, 'click', {
latLng: new google.maps.LatLng(24.886, -70.268)
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="result"></div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap">
</script>
I'm trying to display google map with markers and circles. The map and the circle is displaying correctly but the marker are not visible on the map.
Please suggest what changes i should make in my code.
<div id="mapview" style="width: 100%; height: 700px;">
</div>
<script>
var map;
var info_window;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918, -0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false
};
map = new google.maps.Map(document.getElementById('mapview'), mapOptions);
var image = '../Image/salemarker.png';
var user = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.561918, -0.31237799999996696),
animation: google.maps.Animation.DROP, icon: image
});
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 10 miles in metres
strokeColor: '#08355A;',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#fffff',
fillOpacity: 0.2,
});
info_window = new google.maps.InfoWindow({
content: 'loading'
});
user.setMap(null);
function addMarkersc() {
createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728, 51.5661728), '<p>48, The fairway, wembley, HA..</p>');
}
addMarkersc();
circle.bindTo('center', user, 'position');
map.fitBounds(circle.getBounds());
}
google.maps.event.addDomListener(window, 'load', initialize);
var image1 = '../Image/salemarker.png';
function createLocationOnMap(titulo, posicao, conteudo) {
var m = new google.maps.Marker({
map: map,
title: titulo,
icon: image1,
position: posicao,
html: conteudo
});
google.maps.event.addListener(m, 'mouseover', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
</script>
Your marker is out of view. It is at 51.5661728,51.5661728:
createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728,51.5661728), '<p>48, The fairway, wembley, HA..</p>');}
Your map is centered at 51.561918,-0.31237799999996696
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918,-0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};
working fiddle
You can try this
function InitializeMap1() {
geocoderMap = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(48.856614, 2.352222);
var myOptions =
{
zoom: 12,
minZoom: 12, // panControl: false, zoomControl: false, scaleControl: false, streetViewControl: true, //
center: latlng,
streetViewControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var arrayMain = [];
var markerLatLng = new google.maps.LatLng(48.856614, 2.352222);
var marker = new google.maps.Marker({
map: map,
position: markerLatLng,
center: markerLatLng
});
arrayMain.push(marker);
}
Try like this:
<div id="mapview" style="width: 100%; height: 700px">
<script>
var map;
var info_window;
function addMarkersc() {
var titulo = '4 bed semi detached For sale';
var posicao = new google.maps.LatLng(51.5661728,51.5661728);
var conteudo = '<p>48, The fairway, wembley, HA..</p>';
var image = '../Image/salemarker.png';
var m = new google.maps.Marker({
map: map,
title: titulo,
icon: image,
position: posicao,
html: conteudo
});
google.maps.event.addListener(m, 'mouseover', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918,-0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};
map = new google.maps.Map(document.getElementById('mapview'),mapOptions);
var image = '../Image/salemarker.png';
var user = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.561918,-0.31237799999996696),
animation: google.maps.Animation.DROP,
icon: image
});
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 10 miles in metres
strokeColor: '#08355A;',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#fffff',
fillOpacity: 0.2,
});
info_window = new google.maps.InfoWindow({
content: 'loading'
});
user.setMap(null);
circle.bindTo('center', user, 'position');
map.fitBounds(circle.getBounds());
addMarkersc();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>