I am new to google maps api. I create a maps with hardcore values as markers. But I want to create my markers with the values came from database. Here is my code
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
var markers = [ // Here I set the hard core values for my markers.
{ lat: 22.64201389, lng: 88.43034722, name: "Airport" },
{ lat: 22.60944444, lng: 88.42694444, name: "Baguihati" },
{ lat: 22.53604167, lng: 88.36083333, name: "Ballygunge Phari" },
{ lat: 22.49895833, lng: 88.31902778, name: "Behala" },
{ lat: 22.65743056, lng: 88.36409722, name: "Dakshineshwar" },
{ lat: 22.62013889, lng: 88.39215278 , name: "Dum-Dum Station." },
{ lat: 22.52111111, lng: 88.36479167, name: "Gariahat" },
{ lat: 22.58763889, lng: 88.34027778, name: "Howrah" },
{ lat: 22.59131944, lng: 88.43291667, name: "Karunamayee East" },
{ lat: 22.52131944, lng: 88.38201389, name: "Kasba Bosepukur" },
{ lat: 22.60256944 , lng: 88.40166667 , name: "Lake Town" },
{ lat: 22.68993056, lng: 88.47569444, name: "Madhyam Gram_East" },
{ lat: 22.50875 , lng: 88.33284722 , name: " New Alipur" },
{ lat: 22.54409722 , lng: 88.36743056, name: "Park circus" },
];
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.name
});
}
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
Please help me to set the database values in the maker.. The values will be comes from servlet.
You can write a PHP (or whatever the language you use) page which contacts with the database and return the details in it as JSON Array.So that you can easily call it via ajax and retrieve the values you need.If you are using servlets GSON library will be useful when converting objects to JSON. However you should have a database table which contains the latitude,longitude and the name.
maybe this code will help you,write this inside doGet() or doPost() in your servlet
Gson gson = new Gson();
java.sql.Connection con = new DBConn().getConnection(); //establish the database connection you use
String getquery = "SELECT * from markers";
ResultSet res = DBHandle.getData(con, getquery);
ArrayList<Marker> markerList;
markerList = new ArrayList<Marker>();
while (res.next()) {
Marker marker=new Marker(); //model class with attributes latitude,longitude and name along with their getters and setters
marker.setLatitude(res.getString("latitude"));
marker.setLongitude(res.getString("longitude"));
marker.setName(res.getString("name"));
markerList.add(marker);
}
String JsonString = gson.toJson(markerList, ArrayList.class);
out.print(JsonString);
And this would help you when retrieving it in javascript.I prefer using jquery for that.
You can try this code to retrieve it via jquery
$.getJSON("url_with_json_here", function(data){
for (var i=0, len=data.length; i < len; i++) {
data[i].latitude;
console.log(data[i].name);
console.log(data[i].longitude);
console.log(data[i].latitude);
}
});
Related
I have ajax success function like below
success: function(result) {
for (var i = 0; i < result['Result'].length; i++) {
if (result['Result'][i]['ClusterId'] == '2414040001') {
if (result['Result'][i]['UserLatitude'] != '' &&
result['Result'][i]['UserLatitude'] != null) {
window.UserLatitude = result['Result'][i][
'UserLatitude'
];
} else {
window.UserLatitude = '';
}
if (result['Result'][i]['UserLongitude'] != '' &&
result['Result'][i]['UserLongitude'] != null) {
window.UserLongitude = result['Result'][i][
'UserLongitude'
];
} else {
window.UserLongitude = '';
}
console.log("LAT:" + UserLatitude + "LONG:" +
UserLongitude);
}
}
const myLatLng = {
lat: UserLatitude,
lng: UserLongitude
};
console.log(myLatLng);
const map = new google.maps.Map(document.getElementById(
"googleMap"), {
zoom: 4,
center: myLatLng,
});
new google.maps.Marker({
position: {
lat: -33.890,
lng: 151.274
},
map,
title: "Hello World!",
});
}
I am getting latitude and longitude from remote server and want use it for Google Map.
Its working fine if I use const like below
const myLatLng = { lat: -33.890, lng: 151.274 };
but if I use variable for it, its giving me error like below
InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number
I am not getting idea what is the problem and how I can solve it.
Thanks!
The response returned by the server might be string.Can you please try this code to parse the lat and long value to float lat and lng value using parseFloat() method from javascript.
// const myLatLng = { lat: UserLatitude, lng: UserLongitude };
// change above code to
const myLatLng = { lat: parseFloat(UserLatitude), lng: parseFloat(UserLongitude) };
console.log(myLatLng);
const map = new google.maps.Map(document.getElementById("googleMap"), {
zoom: 4,
center: myLatLng,
});
new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map,
title: "Hello World!",
});
I am passing dictionary from Views in Django, and want to access in JavaScript(written in HTML)
This is my code written in HTML, here I want to access dictionary:
let map;
// global array to store the marker object
let markersArray = [];
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 43.8445608, lng: -79.55882869999999 },
zoom: 8,
});
addMarker({ lat: 43.8445608, lng: -79.55882869999999 }, "red");
addMarker({ lat: 43.5982087, lng: -79.6252701 }, "green");
addMarker({ lat: 43.846656, lng: -79.566523 }, "green");
addMarker({ lat: 43.839778900146484, lng: -79.57058715820312 }, "green");
}
I have file foo.ftl
<script>
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
center: {lat: 20.993514917846174, lng: 105.78660475957122},
});
// const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const labels = [
"The Light Trung Văn",
"Khu đô thị Mulbery Lane",
"Nhà thờ giáo xứ Phùng Khoang",
"Khỏe đẹp 24h"];
const locations = [
{ lat: 20.9935851166474, lng: 105.78857910579417 },
{ lat: 20.986910834987295, lng: 105.78535398147808 },
{ lat: 20.990339683019226, lng: 105.7922698253056 },
{ lat: 20.996770381033244, lng: 105.79321396285934 }
];
const markers = locations.map((location, i) => {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length],
});
});
new MarkerClusterer(map, markers, {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
const ecolife = {lat: 20.993514917846174, lng: 105.78660475957122};
// const map22 = new google.maps.Map(document.getElementById("map"), {
// zoom: 18,
// center: ecolife,
// });
// const marker = new google.maps.Marker({
// position: ecolife,
// map: map22,
// });
}
</script>
I see HTML source of web-page
Encoding in text editor
but still error font UTF-8
How to display text in UTF-8 correctly?
This is a defect of FreeMarker
<#ftl encoding="utf-8">
See https://freemarker.apache.org/docs/pgui_misc_charset.html#autoid_52
I have pushed markers into the a markerClusterer. When I click on the markerClusterer I want to display the info of the nmarkers in the cluster. However, when I use the getMarkers() method, it does not give me the info that I stored in marker, only data about the marker itself. Is there any way that I can implement this? https://codesandbox.io/s/joey-gmaps-c5kdf
const markerCluster = new MarkerClusterer(map, [],
{ imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
google.maps.event.addListener(markerCluster, 'clusterclick', function (c) {
console.log('Number of managed markers in cluster: ' + c.getSize());
var m = c.getMarkers();
for (i in m) {
console.log(Object.values(m[i]));
console.log(m[i].getTitle());
console.log(m[i].toString());
}
var p = [];
for (var i = 0; i < m.length; i++) {
p.push(m[i]);
}
});
You can get your markers' information using getMarkers so there may be an issue somewhere in your code implementation that you haven't posted.
Try the following jsfiddle based off of Google's example.
JS code below:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: -28.024,
lng: 140.887
}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length],
title: location.lat.toString() + "," + location.lng.toString(),
myObj: { myKey: i }
});
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
google.maps.event.addListener(markerCluster, 'clusterclick', function(c) {
console.log('Number of managed markers in cluster: ' + c.getSize());
var m = c.getMarkers();
for (let i in m) {
console.log(m[i].getLabel());
console.log(m[i].getTitle());
console.log(m[i].myObj.myKey);
}
});
}
var locations = [{
lat: -31.563910,
lng: 147.154312
},
{
lat: -33.718234,
lng: 150.363181
},
{
lat: -33.727111,
lng: 150.371124
},
{
lat: -33.848588,
lng: 151.209834
},
{
lat: -33.851702,
lng: 151.216968
},
{
lat: -34.671264,
lng: 150.863657
},
{
lat: -35.304724,
lng: 148.662905
},
{
lat: -36.817685,
lng: 175.699196
},
{
lat: -36.828611,
lng: 175.790222
},
{
lat: -37.750000,
lng: 145.116667
},
{
lat: -37.759859,
lng: 145.128708
},
{
lat: -37.765015,
lng: 145.133858
},
{
lat: -37.770104,
lng: 145.143299
},
{
lat: -37.773700,
lng: 145.145187
},
{
lat: -37.774785,
lng: 145.137978
},
{
lat: -37.819616,
lng: 144.968119
},
{
lat: -38.330766,
lng: 144.695692
},
{
lat: -39.927193,
lng: 175.053218
},
{
lat: -41.330162,
lng: 174.865694
},
{
lat: -42.734358,
lng: 147.439506
},
{
lat: -42.734358,
lng: 147.501315
},
{
lat: -42.735258,
lng: 147.438000
},
{
lat: -43.999792,
lng: 170.463352
}
]
If e.g. you click on the blue cluster #3, you'll get the following output logged in the console:
Number of managed markers in cluster: 3
T
-42.734358,147.439506
U
-42.734358,147.501315
V
-42.735258,147.438
Edit: This error appears to be typescript related. There's a solution in related thread custom property with google marker in type script
Please try the code below:
for (var i = 0; i < features.length; i++) {
const marker2 = new google.maps.Marker({
position: features[i].position,
icon: icons[features[i].type].icon,
animation: google.maps.Animation.DROP,
map: map
});
marker2.set("customInfo", features[i].location);
console.log("Marker222223", marker2["customInfo"]);
markerCluster.addMarker(marker2);
}
Hope this helps!
While creating markers add object into marker so that each marker will have asociated object with it i.e. customInfo
var marker = new google.maps.Marker({
position: accident_LatLng,
title: accident_title,
map: map,
customInfo: object,
});
to Access marker object use below code. I have created custom array to store marker object.
var markers = cluster.getMarkers();
var markerCustom = [];
for (var i = 0; i < markers.length; i++) {
markerCustom.push(cluster.markers_[i].customInfo)
}
Hope this helps
Reference https://medium.com/#sunil.jadhav38/implementing-marker-clustering-is-angular-using-google-charts-6b62a33f3b61
I have the following script which uses a drop down index to create a reference to a variable to plot coordinates on a Google map. These are the co-ordinate objects:
var posl0 = { lat: 53.486204, lng: -3.217980 };
var posl1 = { lat: 51.493399, lng: -2.994917 };
var posl2 = { lat: 53.328493, lng: -3.098814 };
var posl3 = { lat: 53.412157, lng: -2.838219 };
var posl4 = { lat: 53.481338, lng: -2.886647 };
var posl5 = { lat: 53.401431, lng: -2.994917 };
var posl6 = { lat: 53.513252, lng: -2.944996 };
var posl7 = { lat: 53.372710, lng: -3.183254 };
var posl8 = { lat: 53.374466, lng: -2.868754 };
This is my script:
function addnewmarker(selc, mapno) {
var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool City", "Maghull", "West Kirby", "Woolton"];
var pos = 'posl' + mapno;
var pos.toArray();
alert(pos);
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Aintree',
animation: google.maps.Animation.DROP,
});
adsho(1);
}
My issue appears to be with my use of the pos variable as a pointer to the posl object. If I enter the position as position: posl1 all works fine but position: pos does nothing although it alerts the same posl1 ref.
Can anyone help / advise please?
The issue is because your pos value is a string, not a reference to the object held in the posX variable. You could use eval() to fix this, but eval() is incredibly bad practice and should be avoided.
Instead, you can achieve what you need by instead placing all your objects in to an array and then accessing them by index. Something like this:
var pos = [{ lat: 53.486204, lng: -3.217980 },{ lat: 51.493399, lng: -2.994917 },{ lat: 53.328493, lng: -3.098814 },{ lat: 53.412157, lng: -2.838219 },{ lat: 53.481338, lng: -2.886647 },{ lat: 53.401431, lng: -2.994917 },{ lat: 53.513252, lng: -2.944996 },{ lat: 53.372710, lng: -3.183254 },{ lat: 53.374466, lng: -2.868754 }]
function addnewmarker(selc, mapno) {
var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool City", "Maghull", "West Kirby", "Woolton"];
marker = new google.maps.Marker({
position: pos[mapno],
map: map,
title: 'Aintree',
animation: google.maps.Animation.DROP,
});
adsho(1);
}
Also note that your use of jQuery's toArray() is not required (and most likely caused errors) and the locaz array is not used, but I assume this is simply due to redacting parts of your code in the question.
Replace this line
var pos = eval('posl' + mapno);
Try this ;)
The way you are creating array of elements is wrong and the way you are using to access the element from the array is again wrong;
You can add element to array one by one or multiple when you are defining it;
Multiple elements when creating array;
var array = [1, 2, 3, 4, 6, 7];/* in this way you can assign as many elements you want to add to this array array index starts from 0; */
var array = []; /* empty array later you can add elements to it */
array[0] = 1;
array[1] = 2; /* add element to directly at desired index */
array.push(1);
array.push(2);/* add element to array at the end */
So in your case try this
var positions = [{ lat: 53.486204, lng: -3.217980 },
{ lat: 51.493399, lng: -2.994917 },
{ lat: 53.328493, lng: -3.098814 },
{ lat: 53.412157, lng: -2.838219 },
{ lat: 53.481338, lng: -2.886647 },
{ lat: 53.401431, lng: -2.994917 },
{ lat: 53.513252, lng: -2.944996 },
{ lat: 53.372710, lng: -3.183254 },
{ lat: 53.374466, lng: -2.868754 }];
function addnewmarker(selc, mapno) {
var locaz = ["Aintree", "Formby", "Heswall", "Huyton", "Kirby", "Liverpool City", "Maghull", "West Kirby", "Woolton"];
var pos = positions[mapno];
alert(pos);
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Aintree',
animation: google.maps.Animation.DROP,
});
adsho(1);
}