Develop Reference

how to passlatitude and longitude values dynamically to polyline path of googlemap in javascript

I am having an array like this [17.4172192,78.401285,17.418407,78.401629,17.41809,78.40061,17.417865,78.398234,17.405446,78.404805], i want to pass this JSONArray dynamically to the path of polyline in google maps.
When i pass latitude and longitude by static it was working fine, but in dynamic i have run a for loop it was not working please help me, here is my javascript,
In request.getAttribute("latlongjson") i am having the values are [17.4172192,78.401285,17.418407,78.401629,17.41809,78.40061,17.417865,78.398234,17.405446,78.404805]
<script>
var poly;
var map;
var locations = <%= request.getAttribute("latlongjson") %> ;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: 17.4172192, lng: 78.401285}
});
// for polyline
for (var i = 0, ln = locations.length; i < ln; i += 2) {
poly = new google.maps.Polyline({
path:[
new google.maps.LatLng(latitide[i],latitude[i+1])
],
strokeColor: '#0000FF',
strokeOpacity: 1.0,
strokeWeight: 3,
});
}
poly.setMap(map);
// google.maps.event.addDomListener(window, 'load', initialize);
}
}
</script>
Anyone please help me thanks in advance

<script>
var poly;
var map;
var locations = [
17.4172192,78.401285,
17.418407, 78.401629,
17.418090, 78.400610,
17.417865, 78.398234
];
// var locations = <%= request.getAttribute("latlongjson") %>
// for center the map
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: 17.4172192, lng: 78.401285} // Center the map on Chicago, USA.
});
var flightPlanCoordinates = new Array();
for(i=0;i<locations.length;i += 2)
{
var point =new google.maps.LatLng(locations[i],locations[i+1]);
flightPlanCoordinates.push(point);
}
alert(flightPlanCoordinates);
// for polyline
poly = new google.maps.Polyline({
/* path:[
new google.maps.LatLng(17.4172192,78.401285),
new google.maps.LatLng(17.418407, 78.401629),
new google.maps.LatLng(17.418090, 78.400610),
new google.maps.LatLng(17.417865, 78.398234)
], */
path : flightPlanCoordinates,
// geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 1.0,
strokeWeight: 3,
});
// for markers
for (var i = 0, ln = locations.length; i < ln; i += 2) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i], locations[i + 1]),
map: map,
title: locations[i]+", "+locations[i+1],
});
}
poly.setMap(map);
// google.maps.event.addDomListener(window, 'load', initialize);
// Add a listener for the click event
map.addListener('click', addLatLng);
}
}
</script>

Google API multiple markers (addresses NOT latlong) displaying title (tool tip)

I'm trying to use the script made by user netbrain as found here on stackoverflow to also show the address title when the user clicks on the marker. It should be relatively simple but I'm lost.
Any ideas? I've tried numerous options but nothing seems to work. netbrain's code below:
var map;
var elevator;
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'roadmap'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=true', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
title: addresses[0]
});
});
}

This answer assumes you're only after tool tip and not the infowindow.
The variables addresses and x cannot be used within the callback as the value of x will always be 5 (in this example, see length of addresses array). Instead look at the data object like so:
var map;
var elevator;
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'roadmap'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=true', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
title: data.results[0].formatted_address
});
});
}
EDIT
For completeness the data object is the result of the geocoding API call. The formatted_address is a property of a match within the results, see https://developers.google.com/maps/documentation/geocoding/#GeocodingResponses

Use this code:
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
var info_window = new google.maps.InfoWindow({maxWidth: 500});
info_window.setContent('Content here');
info_window.setPosition(latlng);
info_window.open(map, marker);
});
});
}
});

Random marker on google maps Jquery

I'm trying to create a map where I can loop through an array of different locations. Then I want to set out the position of a random coordinate. So I want one coordinate to place a marker for me randomly each time I reload the page!
function initialize() {
//here is the starting for the map, where it will begin to show
var latlng = new google.maps.LatLng(59.2982762, 17.9970823);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//below are the markers coordinates, change it to your coordinates
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var i = 0;
function randAreas() {
var flagAreas = (Math.round(Math.random())-0.5);
}
var flagAreas = [
[59.2967322, 18.0009393],
[59.2980245, 17.9971503],
[59.2981078, 17.9980875],
[59.2982762, 17.9970823],
[59.2987638, 17.9917639],
[59.2987649, 17.9917824],
[59.2987847, 17.9917731],
[59.2988498, 17.991684],
[59.2988503, 17.9981593],
[59.3008233, 18.0041763],
[59.3014033, 18.0068793],
[59.3016619, 18.0137766]
];
return flagAreas;
flagAreas.sort(randAreas);
//script counts the array of coordinates
//for (var i = 0; i < flagAreas.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(flagAreas[i], flagAreas[i]),
map: map,
});
}
window.onload = initialize;
</script>

First, move your map variable outside of initialize in case you need to use it elsewhere in your code.
var map;
function initialize() {
var latlng = new google.maps.LatLng(59.2982762, 17.9970823);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var flagAreas = [
[59.2967322, 18.0009393], [59.2980245, 17.9971503],
[59.2981078, 17.9980875], [59.2982762, 17.9970823],
[59.2987638, 17.9917639], [59.2987649, 17.9917824],
[59.2987847, 17.9917731], [59.2988498, 17.991684],
[59.2988503, 17.9981593], [59.3008233, 18.0041763],
[59.3014033, 18.0068793], [59.3016619, 18.0137766]
];
Shuffle the flagAreas and grab the first array.
var random = flagAreas.sort(function () { return Math.random() - 0.5 } )[0];
Add the marker.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(random[0], random[1]),
map: map,
});
}
window.onload = initialize;
Fiddle

There are 3 problems in your code.
1) Unexpected termination of the initialize without executing the for loop.
return flagAreas; //Remove this code
2)
flagAreas[i] //An array returns both lat and lng
position: new google.maps.LatLng(flagAreas[i], flagAreas[i]) //Wrong
Replace like
position: new google.maps.LatLng(flagAreas[i][0], flagAreas[i][1]) //Correct
3) Remove , whenever you reach the last option.
map: map
Finally check this in JSFiddle

group markers in google map

I found this great tutorial it works perfectly.
http://lab.abhinayrathore.com/ipmapper/
Here is the javascript code which returnred lat&lon values from an IP address:
http://pastebin.com/1gE91nuh
So there are a lot of markers in the same place and I would like to make groups something like this:
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.9/examples/simple_example.html
Example:
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.9/docs/examples.html
But somebody could help me how to make groups in the original code? ( original code: http://pastebin.com/1gE91nuh )
Thanks!

This is the code that creates the marker clusters. When markers are created, they are pushed into an array. That array is passed into a new MarkerClusterer object.
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < 100; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);

Move google map center javascript api

In my project I want to move the center of the map to new coordinates. This is the code I have for the map
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function moveToLocation(lat, lng){
var center = new google.maps.LatLng(lat, lng);
var map = document.getElementById("map_canvas");
map.panTo(center);
}
The moveToLocation function does get called but the map does not re center. Any idea what I'm missing?

Your problem is that in moveToLocation, you're using document.getElementById to try to get the Map object, but that only gets you an HTMLDivElement, not the google.maps.Map element you're expecting. So your variable map has no panTo function, which is why it doesn't work. What you need to is squirrel the map variable away somewhere, and it should work as planned. You can just use a global variable like so:
window.map = undefined; // global variable
function initialize() {
const mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// assigning to global variable:
window.map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
}
function moveToLocation(lat, lng){
const center = new google.maps.LatLng(lat, lng);
// using global variable:
window.map.panTo(center);
}
See working jsFiddle here: http://jsfiddle.net/fqt7L/1/

Display the Google Maps API using dynamically, fetch the data in database to display the place, lat, long and to show map marker in center using AngularJS. Done by Sureshchan...
$(function() {
$http.get('school/transport/scroute/viewRoute?scRouteId=' + scRouteId).success(function(data) {
console.log(data);
for (var i = 0; i < data.viewRoute.length; i++) {
$scope.view = [];
$scope.view.push(data.viewRoute[i].stoppingName, data.viewRoute[i].latitude, data.viewRoute[i].longitude);
$scope.locData.push($scope.view);
}
var locations = $scope.locData;
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId : google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var marker, j;
for (j = 0; j < locations.length; j++) {
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[j][1], locations[j][2]),
map : map
});
google.maps.event.addListener(marker, 'click', (function(marker, j) {
bounds.extend(marker.position);
return function() {
infowindow.setContent(locations[j][0]);
infowindow.open(map, marker);
map.setZoom(map.getZoom() + 1);
map.setCenter(marker.getPosition());
}
})(marker, j));
};
map.fitBounds(bounds);
});
});