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);
Related
I'm new to google map api v3. I already establish a decent google map with 2 marker but when I use google.maps.latlngBounds, it return me an error
invalidValueError : setCenter : not a LatLng or LatLngLiteral Object.
How can I fix this?
I just want to centre my map around these markers.
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng2 = new google.maps.LatLng(-25.573688, 132.567212);
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
try {
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng
});
var marker2 = new google.maps.Marker({
position: myLatlng2
});
trackerMarkerArray.push(marker);
trackerMarkerArray.push(marker2);
var latlngbound = new google.maps.LatLngBounds ();
for (var i = 0; i<trackerMarkerArray.length; i++){
trackerMarkerArray[i].setMap(map);
latlngbound.extend(trackerMarkerArray[i].position);
}
//render new map and center around group of marker
map.setCenter(latlngbound);
map.fitBounds(latlngbound);
} catch (err){
alert(err);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
To "fit" the map to a set of markers added to a google.maps.LatLngBounds object use map.fitBounds(bounds), not map.setCenter().
google.maps.Map documentation
map.setCenter(latlngbound);
map.setCenter takes a LatLng as a parameter, you're passing a LatLngBounds, I think you want to do it like this:
map.setCenter(latlngbound.getCenter());
i was trying to use google map api v3 and pop up some markers on the map. un fortunately it doesnt show up on my map. i use array push to store marker with latitude and longitude parameter.
here is my code
<script type="text/javascript">
var trackerMarkerArray = [];
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng2 = new google.maps.LatLng(-25.363800,131.044900);
var mapOptions = {
center: myLatlng,
zoom: 8
};
try {
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng
});
var marker2 = new google.maps.Marker({
position: myLatlng2
});
trackerMarkerArray.push(marker);
trackerMarkerArray.push(marker2);
for (var i = 0; i<trackerMarkerArray.lenght; i++){
trackerMarkerArray[i].setMap(map);
console.log("value" + trackerMarkerArray[i]);
}
} catch (err){
alert(err);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
for (var i = 0; i<trackerMarkerArray.lenght; i++)
lenght must be "length"
also, when the map is not showing, try to see browser's debug console for any error.
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
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);
});
});
i have an array o markers and i want to create polylines according their title markers[i].title . My brain can't think of a decent peace of code right now, so little help would be useful...
You want likely a polyline based on the coordinates (LatLng) of the markers. Here is a template code:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(42.0, 10.0),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var points = [
new google.maps.LatLng(39.0, -3.0),
new google.maps.LatLng(52.1, 12.1),
new google.maps.LatLng(40.2, 32.7)
];
var markers = [];
var path = [];
for (var i = 0; i < points.length; ++i) {
var marker = new google.maps.Marker({map: map, position: points[i]});
markers.push(marker);
path.push(marker.position);
}
var polyline = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000"
});
polyline.setMap(map);
}