Polyline Google Maps

Polyline Google Maps - javascript

Can't figure out where my code is going wrong. Want markers on the map, when clicked on it indicates the City name. Want a line connecting the markers. Any ideas?
var line = new google.maps.Polyline({
path: [
new google.maps.LatLng(37.4419, -122.1419),
new google.maps.LatLng(37.4519, -122.1519)
],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
map: map
});
var locations = [
['Dalian', 38.914003, 121.614682]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(45.141789, 124.825118),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

you are defining the polyline before you define the map. The map property of the polyline needs to be a valid map object, it is easier to do that if you define it after the map.
your polyline is in Palo Alto CA, the map is centered over China.
you only have one marker in your question, you can't make a polyline with one point.
fiddle
code snippet:
function initialize() {
var locations = [
['Dalian', 38.914003, 121.614682]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: new google.maps.LatLng(45.141789, 124.825118),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var line = new google.maps.Polyline({
path: [
new google.maps.LatLng(37.4419, -122.1419),
new google.maps.LatLng(37.4519, -122.1519)
],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
map: map
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
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>

Related

Google Map - change style attributes for an existing marker and update map

In Google map one could create a map and place a custom marker as follows
let lat = 19.29;
let long = 72.85;
let map = new google.maps.Map(document.getElementById('map'), {zoom: 12});
let LatLng = new google.maps.LatLng(lat, long);
let marker = new google.maps.Marker({
position: LatLng,
map: map,
icon: { path: google.maps.SymbolPath.CIRCLE,
scale: 2,
fillColor: 'Crimson',
strokeColor: 'Crimson'
}
});
How do we change the marker style later on, fillColor for example ?
This question is different from the one marked as a duplicate of - this one is generic about updating style attributes of an existing marker and specific to google map api v3.

Get the current icon from the marker, change its color, set the new icon:
var icon = marker.getIcon();
icon.fillColor = "#00FF00";
icon.strokeColor = "#00FF00";
marker.setIcon(icon);
proof of concept fiddle
code snippet:
var color = ["#FF0000", "#00FF00", "#0000FF"];
var colorIdx = 1;
function initialize() {
let lat = 19.29;
let long = 72.85;
let LatLng = new google.maps.LatLng(lat, long);
let map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: LatLng
});
let marker = new google.maps.Marker({
position: LatLng,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
fillColor: 'Crimson',
strokeColor: 'Crimson'
}
});
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
var icon = marker.getIcon();
icon.fillColor = color[colorIdx];
icon.strokeColor = color[colorIdx];
colorIdx++;
colorIdx %= color.length;
marker.setIcon(icon);
})
}
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>
<input type="button" id="btn" value="change color" />
<div id="map"></div>

Add a circle to a specific marker added via loop from an array

I have loaded a map and few markers via Google Map Js API. My code so far looks as below:
var mapCenter = {lat: 10.0268196, lng: 76.3080968};
var locations = [
[ 'Malabar Gold', 10.02695298, 76.30807266],
[ 'Sky Jewellery', 10.0268196, 76.3080968],
[ 'Gilli', 10.02676809, 76.3081786],
[ 'Mark & Spencer', 10.02667433, 76.30830199],
[ 'Dar Optics', 10.02626758, 76.30800158]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 28,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow()
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][4],
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Then on some event, I want to highlight a marker (the icon that's added from the array) with a circle around it, as shown in code below. But in the below code the circle always comes around the last marker(last cordinate in the array in the loop) added to the map. I need a way to select whichever marker I want, by using the i(index) value or something of the array, for example the second marker or the third marker and add a circle around it programmatically instead of just the last one.
var circle = new google.maps.Circle({
map: map,
radius: 2.5, // 10 miles in metres
fillColor: '#4A90E2',
strokeColor: '#2577D6',
strokeOpacity: 0.9,
strokeWeight: 1,
});
circle.bindTo('center', marker[1], 'position');

store your markers in an array so you can access them after creation
add the circle to the specified google.maps.Marker in that array
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][4],
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
To add the circle on a (for example) click event later:
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
var circle = new google.maps.Circle({
map: map,
radius: 2.5, // 10 miles in metres
fillColor: '#4A90E2',
strokeColor: '#2577D6',
strokeOpacity: 0.9,
strokeWeight: 1,
});
circle.bindTo('center', markers[document.getElementById('markerNum').value], 'position');
})
proof of concept fiddle
code snippet:
var geocoder;
var map;
var markers = [];
function initialize() {
var mapCenter = {
lat: 10.0268196,
lng: 76.3080968
};
var bounds = new google.maps.LatLngBounds();
var locations = [
['Malabar Gold', 10.02695298, 76.30807266],
['Sky Jewellery', 10.0268196, 76.3080968],
['Gilli', 10.02676809, 76.3081786],
['Mark & Spencer', 10.02667433, 76.30830199],
['Dar Optics', 10.02626758, 76.30800158]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 28,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow()
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][4],
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
map.fitBounds(bounds);
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
var circle = new google.maps.Circle({
map: map,
radius: 2.5, // 10 miles in metres
fillColor: '#4A90E2',
strokeColor: '#2577D6',
strokeOpacity: 0.9,
strokeWeight: 1,
});
circle.bindTo('center', markers[document.getElementById('markerNum').value], 'position');
})
}
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>
<input id="markerNum" value="1" />
<input id="btn" value="click" type="button" />
<div id="map"></div>

You are overwriting your marker variable in each iteration of the for cycle, so instead of
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][4],
map: map
});
try
marker.push(new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][4],
map: map
}));
google.maps.event.addListener(marker[i], 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker[i], i));

How to make circle on a current location in google map instead of marker

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>

Google Maps Engine API - KML Layers Obstructing New Markers Event

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>

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>

Develop Reference

JavaScript is the programming language of the Web.

Polyline Google Maps - javascript

Related

Google Map - change style attributes for an existing marker and update map

Add a circle to a specific marker added via loop from an array

How to make circle on a current location in google map instead of marker

Google Maps Engine API - KML Layers Obstructing New Markers Event

Google Map Circle for single address not working

Categories

Resources