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);
});
});
Related
So this set of code is pulling in locations (Latitude, Longitude, and Address) from a C# backend.
the backend code pulls data from a SQL database and inputs it into the ASP.Net DataField columns.
It was an enhancement to a prebuilt application to include Google Maps.
The locations pull just fine and stepping through it shows the latitude and longitude correctly.
The issue I'm having is that only one marker shows up which looks to be the last one.
Its as if each location isn't actually adding a new marker, but overwriting the current one which leaves the last location as the marker on the map.
What do I need to change to get each location to show up as a new marker?
<script type="text/javascript">
function locate() {
var inputList = GridView1.getElementsByTagName("td");
var rows = GridView1.getElementsByTagName("tr");
// var markers = inputList[0].innerHTML;
for (i = 1; i < rows.length; i++) {
var lat = rows[i].cells[2].innerHTML;
var lng = rows[i].cells[3].innerHTML;
var addr = rows[i].cells[1].innerHTML;
var mapOptions = {
center: new google.maps.LatLng(rows[1].cells[2].innerHTML, rows[1].cells[3].innerHTML),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var markers = [];
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var data = rows[i]
var myLatlng = new google.maps.LatLng(data.cells[2].innerHTML, data.cells[3].innerHTML);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
markers.push(marker);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.cells[1].innerHTML);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</form>
</body>
</html>
You're creating the map and the marker within the same loop. i.e. you're creating a map with a single marker on it, rows times. You want to create the map outside of your loop. Something like this:
function locate() {
var rows = GridView1.getElementsByTagName("tr");
var mapOptions = {
center: new google.maps.LatLng(rows[1].cells[2].innerHTML, rows[1].cells[3].innerHTML),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 1; i < rows.length; i++) {
var data = rows[i];
var myLatlng = new google.maps.LatLng(data.cells[2].innerHTML, data.cells[3].innerHTML);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.cells[1].innerHTML);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
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 have a Google map. I created some markers, but I can not hide these markers. I looked at this document. I have one function, but it failed.
function LoadMap () {
var markers = JSON.parse('<%=Stations() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map2 = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions2);
for (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: map2,
title:"Hello",
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
icon: InitIcon
});
}(marker, data);
}
}
You need to apply the setMap(null) to your Array of markers.
If your markers variable contains all your markers, you need to loop through each markers and delete each of them using
markers[i].setMap(null);
as shown on your sample
BTW, your code contains somme errors, like a missing ; after var data = markers[i]
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);
Here is my fiddle link.
I added markers to the maps, also infowindows for every marker.
But only one infowindow appears?
Here you go:
var ships = [['63.44204833', '10.40340333'], ['63.49261667', '9.92661167'], ['63.43243500', '10.37030833'], ['63.43896000', '10.40036167'], ['63.64856000', '10.67950167'], ['63.43330667', '10.36608000'], ['63.43840500', '10.40874000'], ['63.78920833', '11.19232167'], ['63.45155667', '10.20245833'], ['63.43366667', '10.36150000'], ['63.43956667', '10.40019333'], ['63.47066500', '10.33613500'], ['63.43928333', '10.40971667'], ['63.43822000', '10.39873167']];
var map;
var infowindow = new google.maps.InfoWindow({
content: 'bla'
});
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(63.65, 10.65);
var myOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function createMarker(lat, lon, html) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: html
});
createInfoWindow(marker);
}
function createInfoWindow(m) {
google.maps.event.addListener(m, 'click', function() {
infowindow.open(map, m);
});
}
function processShips(ships) {
for (var i = 0; i < ships.length; i++) {
createMarker(ships[i][0], ships[i][1], 'bla');
}
}
function load(ships) {
initialize();
processShips(ships);
}
load(ships);
Working example.
Simply add var in front of marker in your createMarker function
var marker = new google.maps.Marker({....