How To shows Two column values ,when i selected location Maps

How To shows Two column values ,when i selected location Maps - javascript

<script type="text/javascript">
function initialize1() {
var markers = JSON.parse('<%=FarmerMap()%>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].Lats, markers[0].Longs),
zoom: 10,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("FarmerMap"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.Lats, data.Longs);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.BOUNCE
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.FarmerName,data.Area);
infoWindow.open(map, marker);
});
})(marker, data);
}
return true;
}
</script>
My question is infoWindow.setContent(data.FarmerName,data.Area); will not dispaly two columns values ..it shows only one column Name..that means FarmerName only...i want to shows farmername and area also...

Try this:
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent('<p>' + data.FarmerName
+ ', ' + data.Area + '</p>');
infoWindow.open(map, marker);
});

Related

When I click a marker on Google map it should open multiple markers, but the marker that has been clicked should also appear

I have written code for Google Maps API where when I click a marker multiple markers should appear, but the marker that has been clicked should also appear. Means the page should not refresh. Please help me. Here is my code where if you click on the marker multiple markers will appear, but the marker disappears.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 25.2138, lng: 75.8648};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!',
map: map
});
marker.addListener('click', function() {
clicktoOpenMAp();
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
infowindow.close();
});
}
function clicktoOpenMAp() { var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.setTilt(50);
var markers = [
['chittorgarh', 24.8887, 74.6269],
['morak', 24.7265, 75.9739],
['mangrol', 25.3362, 76.5112]
];
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(8);
google.maps.event.removeListener(boundsListener);
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key='YourGoogleApiBecauseicantsharemine'&callback=initMap"></script>
</body>
</html>
Please use your Google API key, because I can't share mine.

Ok, this is how I fixed it:
function initMap() {
var uluru = {
lat: 25.2138,
lng: 75.8648
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!',
map: map
});
marker.addListener('click', function() {
clicktoOpenMAp();
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
infowindow.close();
});
function clicktoOpenMAp() {
// var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.mapTypeId = "roadmap";
map.setTilt(50);
var markers = [
['chittorgarh', 24.8887, 74.6269],
['morak', 24.7265, 75.9739],
['mangrol', 25.3362, 76.5112]
];
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(8);
google.maps.event.removeListener(boundsListener);
});
}
}
You were "creating" another map everytime you clicked in the marker (I commented the line so you know), then you need to put the Function clicktoOpenMap inside initmap.
Note: I also added async defer to the script where you call the api
<script
src="https://maps.googleapis.com/maps/api/js?key='YourGoogleApiBecauseicantsharemine'&callback=initMap" async defer></script>
You can hide the markers with
markers[i].setMap(null);
and to erase them
var markers = [];

Is there a way to add location to the label of a marker that is randomly placed in google maps with javascript?

Is it possible to add the LatLng to the label of the marker that is placed at random to show where that marker is? Also considering the infoWindow option but have not been successful yet.
var map;
var markers = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markersIndex = 0;
function initialize() {
var Wilm = new google.maps.LatLng(34.2257,-77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map-
canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
label: markers[markersIndex++ % markers.length],
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);

Not sure what you mean by a label.
this will add markers to the map with an info window with the latlng:
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
<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?key=KEY&callback=initMap">
</script>

animated gif in array in google map

I am trying to use optimize:false parameter in my code to use animated gif as a mouseover:
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
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,
visible: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
when I use for example:
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,
visible: false,
icon: icon2, //here I purposely changed it to animated gif first
optimize: false
});
I have no problems.
but when I try to use the same here:
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
optimize:false;// here is the wrong code obviously
}
})(marker, i));
I get the image disappearing not animating
Please suggest solution
based on the suggestions posted by the #geocoder here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html,
body,
#map-canvas{
width: 100%;
margin: 0px;
padding: 0px;
height: 880px;
z-index:2
}
#maptwo {
z-index:1
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
var marker, i;
var bounds = new google.maps.LatLngBounds();
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,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
// iterate over markers and call setVisible
for (i = 0; i < locations.length; i++) {
markers[i].setVisible(zoom >= 11);
}
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['Location1', 39.031586, 46.590031, 5],
['Location2', 38.998439, 46.557591, 4],
['Location3', 38.913429, 46.547370, 3],
['Location4', 39.090245, 46.703794, 2],
['Location5', 39.130588, 46.696239, 1]
];
//here I create a function that will show/hide layers that are defined by the latLng values
function toggleLayer(firLayer, id) {
if ($('#' + id).is(':checked')) {
firLayer.setMap(map);
} else {
firLayer.setMap(null);
}
}
//this is the end of the function
// Fir AZE is one of the many layers that are drawn
drawAZE = new google.maps.Polygon({
path: firAZE,
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00CCFF',
fillOpacity: 0.15
});
//end of FirAZE end of layer
// Add a listener for the drawAZE mouseover/mouseout event.
google.maps.event.addListener(drawAZE ,'mouseover',function(){
this.setOptions({fillColor: "#FF0000"},{fillOpacity:"0.8"});
});
google.maps.event.addListener(drawAZE ,'mouseout',function(){
this.setOptions({fillColor: "#00CCFF"},{fillOpacity:"0.5"});
});
//end of drawAZE listener
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="maptwo"></div>
<input id="fir_azerbaijan" type="checkbox" onClick="toggleLayer(drawAZE,'fir_azerbaijan')" /> AZERBAIJAN
</body>
</html>
as you can see the code in "Fir AZE" draws a layer.
then later it(the drawn layer) is supposed to be shown on click , the example provided initially at this link www.visualguide.ca/example shows that.
when I was asking about the solution for the animated marker I thought that I had problem with optimize :false - because all their lines of code were working ok.
as I have tried to implement solution provided below it worked! but I lost my ability to show/hide layers on click.sorry if this was not clear initially
my intial code was:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(40.222869, 47.602673),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zIndex: 3
};
// Set map
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
it was changed to
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var bounds = new google.maps.LatLngBounds();
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,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
//....
}
map.fitBounds(bounds);
}
I have compared line by line to locate this, and am stumbled.

One option is to create the marker with {optimized: false}:
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,
optimized: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
code snippet with animated gif:
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
var marker, i;
var bounds = new google.maps.LatLngBounds();
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,
optimized: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['palace', 52.231871, 21.005841],
['arkadia', 52.257305, 20.984481],
['stadium', 52.215147, 21.035074]
];
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

somehow I have managed(with the help of geocoder and Alex - thanks
//announce my variables
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
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,
optimized:false, // <-- required for animated gif
visible: false,
icon: icon1
});
I also managed to have my layers appearing on click

google map api V3 markers

I am having a problem with google maps, I cant put markers on some location. My idea was to find my location and to put marker on it, then to put markers on other locations but the markers on other locations are not showing on a map.
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Vasa lokacija"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
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
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}

The main problem with your function is that your marker adding loop is outside success function, so it never gets called. You also had an extra }at the end of your code. Here is a full solution jsfiddle
var map;
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Vasa lokacija"
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
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
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
} //success fn ENDS
var position = {
coords: {
latitude: 44.766666699999990000,
longitude: 17.183333299999960000
}
};
success(position);

the main problem with your code is you are plotting the marker before the map is loaded because it is out side of your function success.try this:I have use static value for center you can change it as per your code.
$(document).ready(function () {
success(position);
});
var position = { // suppose this is your position
coords: {
latitude: 44.666666699999990000,
longitude: 17.183333299999960000
}
};
var map;
var marker, i;
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
document.getElementById('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 8,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapcontainer"), options);
marker = new google.maps.Marker({
position: coords,
map: map,
title: "Vasa lokacija"
});
var infowindow = new google.maps.InfoWindow();
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
});
google.maps.event.addListener(marker, 'click', function (marker, i) {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
});
}
}

Google maps v3 array marker

Hy i am unable to display multiple markers in Google Maps V3, i am getting the coordinates correctly but not displays on map. Also no errors in console
map_items[0] = title
map_items[1] = 55.153766, 11.909180
map_items[2] = link
map_items[3] = text
all of them appear correctly if i do an alert.
example
"Title","51.00150763193481, -2.5659284999999272", "link", "text"
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(55.153766, 11.909180),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var x = 0; x < temp.length; x++) {
if(temp[x][1]){
var map_items = temp[x];
var myLatlng = new google.maps.LatLng(map_items[1]);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">'+map_items[0]+'<br /><p>'+map_items[3]+'</p></div>');
infowindow.open(map, marker);
});
}
}
}

google.maps.LatLng() takes two parameters, not one, so:
var latlon = map_items[1].split(',');
var myLatlng = new google.maps.LatLng(parseFloat(latlon[0]), parseFloat(latlon[1]));
though in fact, it would be better to use objects rather than an array in which each item contains different data types, for example:
marker_data[0] = {
"lat": 55.153766,
"lon": 11.909180,
"title": "My Title",
"link": "http://stackoverflow.com"
}
//etc...
and then you'd access it like this:
var myLatlng = new google.maps.LatLng(marker_data[0].lat, marker_data[0].lon);

Assuming map_items[1] is string
if (temp[x][1]) {
var map_items = temp[x];
var latlng = map_items[1].split(",");
var myLatlng = new google.maps.LatLng(parseFloat(latlng[0]), parseFloat(latlng[1]));
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">' + map_items[0] + '<br /><p>' + map_items[3] + '</p></div>');
infowindow.open(map, marker);
});
}

I think only last map_items would be available when you click on any marker. Creating a different context may solve your problem.
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(55.153766, 11.909180),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function AttachEventToMarker(marker, map_items){
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">'+map_items[0]+'<br /><p>'+map_items[3]+'</p></div>');
infowindow.open(map, marker);
});
}
for (var x = 0; x < temp.length; x++) {
if(temp[x][1]){
var map_items = temp[x];
var myLatlng = new google.maps.LatLng(map_items[1]);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
AttachEventToMarker(marker, map_items);
}
}
}

Develop Reference

JavaScript is the programming language of the Web.

How To shows Two column values ,when i selected location Maps - javascript

Try this: google.maps.event.addListener(marker, "click", function(e) { infoWindow.setContent('<p>' + data.FarmerName + ', ' + data.Area + '</p>'); infoWindow.open(map, marker); });

Related

When I click a marker on Google map it should open multiple markers, but the marker that has been clicked should also appear

Is there a way to add location to the label of a marker that is randomly placed in google maps with javascript?

animated gif in array in google map

google map api V3 markers

Google maps v3 array marker

Categories

Resources