Why google map is not drawing a polylines? - google-maps

I am making a Polyline on google maps. But i can't see it. Following is the code:
$('#mapdiv').html('<div id="map_convas" style="width:640px; height:427px; margin-left:auto; margin-right:auto"></div>');
var centerLatLng = new google.maps.LatLng(obj[i].centerlat, obj[i].centerlong);
var myOptions = {
center: centerLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: true
};
var map_polyline;
var map = new google.maps.Map(document.getElementById("map_convas"),
myOptions);
var marker = new google.maps.Marker({
clickable: true,
position: centerLatLng,
map: map,
zIndex: 1
});
marker.setIcon('http://localhost:8888/images/marker.png');
var locations = obj[0].locations;
// in my current case locations.length is 1
for(var p=0; p<locations.length; p++){
var triangleCoords = new Array();
var markerArray = locations[p];
for(var x=0;x<markerArray.length;x++){
triangleCoords.push(new google.maps.LatLng(markerArray[x].latitude, markerArray[x].longitude));
}
map_polyline = new google.maps.Polyline({
path: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
map_polyline.setMap(map);
}
// doing some stuff
google.maps.event.trigger(map, "resize");
Json which i am parsing and making obj is following:
[
{
"centerlat": 55.68369272317236,
"centerlong": 13.176000376097194,
"locations": [
[
{
"longitude": 13.17480473780369,
"latitude": 13.17480473780369
},
{
"longitude": 13.17456847989296,
"latitude": 13.17456847989296
},
{
"longitude": 13.17426541821395,
"latitude": 13.17426541821395
},
{
"longitude": 13.1741324253503,
"latitude": 13.1741324253503
},
{
"longitude": 13.17386236043011,
"latitude": 13.17386236043011
},
{
"longitude": 13.17352138460909,
"latitude": 13.17352138460909
}
]
]
}
]
and i am parsing it using following line of code:
var obj = jQuery.parseJSON(result);
Everything else like center of map, marker and size is working fine. The only thing is that i can not see any polyline on the map. i put some alert to check values of markerArray and triangleCoords. They are fine. Can anybody tell me why can't i see the polylines? I am using more maps intances before. Is there any problem because of them? Thanks in advance.

Related

How to automatically remove markers depending on Boolean value in JSON file

I have a JSON file:
[
{
"id": 1,
"city": "Milan",
"availability": true,
"lat": 45.4655,
"long": 9.1865,
"marker": "example.png"
},
{
"id": 2,
"city": "Berlin",
"availability": true,
"lat": 52.520008,
"long": 13.404954,
"marker": "example.png"
},
{
"id": 3,
"city": "Paris",
"availability": false,
"lat": 48.864716,
"long": 2.349014
}
]
What happens so far is if a city has "availability": true then the "marker" within the JSON file appears on my map. However the other city's that have "availability": false are showing the Google Maps red marker on my map when I don't want any marker to show if the "availability": false.
This is my code so far:
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.520008, 13.404954),
disableDefaultUI: true,
zoom: 2
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
$.getJSON('example.com', function(data) {
$.each(data, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.long);
var marker = new google.maps.Marker({
position: myLatlng,
icon: value.marker,
map: map
});
});
});
}
Any help on how to remove these Google Maps Red Markers on a city with "availability": false would be great. Thanks in advance.
Check for the value in the loop, also you don't need a variable assigned the marker, it get's lost in the loop anyways.
$.getJSON('example.com', function (data) {
$.each(data, function (i, value) {
// Don't create a marker if field is false
if (value.availability === false) {
return;
}
// No variables used
new google.maps.Marker({
position: new google.maps.LatLng(value.lat, value.long),
icon: value.marker,
map: map
});
});
});
const filtered = data.filter(item => item.availability);
$.each(filtered, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.long);
var marker = new google.maps.Marker({
position: myLatlng,
icon: value.marker,
map: map
});
});

Removing Markers in Google Maps API v3 JS

I have this code in javascript and html, everything works perfectly but i tried many way to remove markers in google maps. Help me, thank you !
<script type="text/javascript">
function initialize() {
var markers = [
{
"title": 'ABC',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'ZXVZXV'
},
{
"title": 'ASDASD',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'ZXVZXA.'
},
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 25,
center: new google.maps.LatLng(19.1759668, 72.79504659999998),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
mapTypeId: 'satellite'
});
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You could use top window array of markersObject eg markersObj store the markers object inside and then looping for set null or set map
<script type="text/javascript">
var markersObj = [];
var map;
function initialize() {
var markers = [
{
"title": 'ABC',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'ZXVZXV'
},
{
"title": 'ASDASD',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'ZXVZXA.'
},
];
map = new google.maps.Map(document.getElementById('map'), {
zoom: 25,
center: new google.maps.LatLng(19.1759668, 72.79504659999998),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
mapTypeId: 'satellite'
});
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
});
markersObj.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function hideMarkers() {
nElem = markersObj.length
for (i=0; i< nElem; i++){
markersObj[i].setMap(null);
}
}
function showMarkers() {
nElem = markersObj.length
for (i=0; i< nElem; i++){
markersObj[i].setMap(map);
}
}
....
You need two buttons that call hideMarkers or showMarkers respectively

Can't get listener to open infoWindow on click with drop down animation

<!doctype html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="style.css">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style>
html, body height: 100%;}
body {font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif; font-size: 16px; margin: 0; padding: 0;}
img { vertical-align: text-bottom; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
<code> remove to run
var json = [
{
"title": "Aamodt's Apple Farm",
"lat": 45.0421379,
"lng": -92.8657445,
"color": "red",
"description": "6428 Manning Ave N<br />Stillwater, MN<br />651-439-3127"
},
{
"title": "American Legion Post 643",
"lat": 44.7776140,
"lng": -93.3410110,
"color": "green",
"description": "12375 Princeton Ave.<br />Savage, MN<br />612-270-3519"
},
{
"title": "Wilderness Bar & Grill, Elysian",
"lat": 44.197934,
"lng": -93.681275,
"color": "green",
"description": "505 W Highway 60<br />Elysian, MN<br />507-267-4455"
},
{
"title": "Winjum`s Shady Acres Restaurant & Resort",
"lat": 44.3301350,
"lng": -93.3608110,
"color": "green",
"description": "17759 177th St W<br />Faribault, MN<br />507-334-6661"
}]
</code> remove to run
var map;
var color;
var markers = [];
// create map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(44.7776140, -93.3410110),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// create infoWindow
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < json.length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
if (data.color == "green") {
color = "#015982";
}
if (data.color == "red") {
color = "#FF0000";
}
title = data.title;
description = data.description;
addMarkerWithTimeout(latLng, i * 200, color, title, description);
}
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
marker=markers.push(new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
}));
attachContent(marker, data);
}, timeout);
}
// open infor window on click
function attachContent(marker, data) {
marker.addListener('click', function() {
var content = data.title + "<br />" + data.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
})(marker, data);
}
</script>
</body>
</html>
I can make this drop markers with a working rollover that displays the title, but with the drop in animation I can not get the 'click' listener for the infoWindow to work. I really need another set of eye on this one. The only examples I can find either show drop animation, or the infoWindow working but not both at the same time.
Your code mistakes at here.
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}
I get a javascript error with your code Uncaught TypeError: marker.addListener is not a function on this line (inside the attachContent function):
marker.addListener('click', function() {
The marker you are passing in to that function, is not a google.maps.Marker object, it is the return value of Array.push (the length of the array). Change addMarkerWithTimeout from:
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
marker=markers.push(new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
}));
attachContent(marker, data);
}, timeout);
}
To:
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}
proof of concept fiddle
code snippet:
var color;
var markers = [];
function initialize() {
// create map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(44.7776140, -93.3410110),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// create infoWindow
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < json.length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
if (data.color == "green") {
color = "#015982";
}
if (data.color == "red") {
color = "#FF0000";
}
title = data.title;
description = data.description;
addMarkerWithTimeout(latLng, i * 200, color, title, description, data);
}
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description, data) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}
// open infor window on click
function attachContent(marker, data) {
marker.addListener('click', function(evt) {
var content = data.title + "<br />" + data.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
var json = [{
"title": "Aamodt's Apple Farm",
"lat": 45.0421379,
"lng": -92.8657445,
"color": "red",
"description": "6428 Manning Ave N<br />Stillwater, MN<br />651-439-3127"
}, {
"title": "American Legion Post 643",
"lat": 44.7776140,
"lng": -93.3410110,
"color": "green",
"description": "12375 Princeton Ave.<br />Savage, MN<br />612-270-3519"
}, {
"title": "Wilderness Bar & Grill, Elysian",
"lat": 44.197934,
"lng": -93.681275,
"color": "green",
"description": "505 W Highway 60<br />Elysian, MN<br />507-267-4455"
}, {
"title": "Winjum`s Shady Acres Restaurant & Resort",
"lat": 44.3301350,
"lng": -93.3608110,
"color": "green",
"description": "17759 177th St W<br />Faribault, MN<br />507-334-6661"
}];
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 16px;
margin: 0;
padding: 0;
}
img {
vertical-align: text-bottom;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Google Maps Icon is not showing on website

I'm trying to learn myself some more advanced code writing. And this week I'm learning about google maps and how to customize it.
I think I'm doing fine, but I have a problem with making an icon marker show on the actual website.
The program I use to make the website is dreamweaver and in the live view option the customized map and icon are both showing correctly. However, when I go to the actual website, the icon is missing. There is no marker at all on the google map. I could really use some help with this one.
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var styles = [
{
stylers: [
{ hue: "#0D6C91" },
{ saturation: 0 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}
];
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.834250, 4.309755),
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('column_links'),
mapOptions);
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var image = '3. afbeeldingen/RLogo.png';
var myLatlng = new google.maps.LatLng(51.834250, 4.309755);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Google Maps API v3 multiple clickable markers

I'm trying to put multiple markers on Google Maps but making them each refers to an URL. I put all the markers in a loop but only the last one is executed. I want all of them to work.
Here is my code:
<script type="text/javascript">
function initialize() {
var json = [
{
"title": "title1",
"lat": 46.077428,
"lng": 18.229837
},
{
"title": "title2",
"lat": 46.042229,
"lng": 18.227134
},
{
"title": "title3",
"lat": 46.082831,
"lng": 18.225911
},
{
"title": "title4",
"lat": 46.092058,
"lng": 18.185645
},
{
"title": "title5",
"lat": 46.075493,
"lng": 18.22885,
"description": "some description to the 5th element",
"url": "http://www.pannon-home.hu/"
},
{
"title": "title6",
"lat": 46.075344,
"lng": 18.227713,
"description": "some description to the 6th element",
"url": "http://www.pannon-home.hu/"
}
]
var latlng = new google.maps.LatLng(46.071325, 18.233185);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var firstmap = new google.maps.Map(document.getElementById("allmap"),myOptions);
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: firstmap,
title: data.title,
url: data.url,
icon: 'home.png'
});
}
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "mouseover", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(firstmap, marker);
});
google.maps.event.addListener(marker, "mouseout", function() {
infoWindow.setContent("");
infoWindow.close();
});
google.maps.event.addListener(marker, "click", function() {
location.assign(marker.url);
});
}
</script>
create a new marker object
and marker.setMap(map);
Too much of your logic lies outside of your for loop, causing much of your logic to only be applied to the last marker. Try this adjustment:
<script type="text/javascript">
function initialize() {
var json = [
{
"title":"title1",
"lat":46.077428,
"lng":18.229837
},
{
"title":"title2",
"lat":46.042229,
"lng":18.227134
},
{
"title":"title3",
"lat":46.082831,
"lng":18.225911
},
{
"title":"title4",
"lat":46.092058,
"lng":18.185645
},
{
"title":"title5",
"lat":46.075493,
"lng":18.22885,
"description":"some description to the 5th element",
"url":"http://www.pannon-home.hu/"
},
{
"title":"title6",
"lat":46.075344,
"lng":18.227713,
"description":"some description to the 6th element",
"url":"http://www.pannon-home.hu/"
}
]
var latlng = new google.maps.LatLng(46.071325, 18.233185);
var myOptions = {
zoom:12,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var firstmap = new google.maps.Map(document.getElementById("allmap"), myOptions);
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position:latLng,
map:firstmap,
title:data.title,
url:data.url,
icon:'home.png'
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "mouseover", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(firstmap, marker);
});
google.maps.event.addListener(marker, "mouseout", function () {
infoWindow.setContent("");
infoWindow.close();
});
google.maps.event.addListener(marker, "click", function () {
location.assign(marker.url);
});
}
}
</script>