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
Related
I have this part of code, that should show pins on google map of certain locations.
<script>
$(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 = ['Sarajevo', '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);
new google.maps.Marker({
position: latlng,
map: map,
icon: "http://i.imgur.com/DOd1sH3.png"
});
});
}
});
<div id="map_canvas"></div>
Map shows up and everything works, but the pins of locations are not shown.
I really dont know why.
Seems like you are calling the constructor without a reference to a variable.
Try this:
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "http://i.imgur.com/D0d1sH3.png"
});
Alternatively you can set the markers to the map by calling the setMap function
var marker = new google.maps.Marker({
position: latlng,
icon: "http://i.imgur.com/D0d1sH3.png"
});
marker.setMap(map);
Hope this helps
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);
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I have a MySQL database from which I fetch data to show a marker on my Google map. I would want to show n markers but I don't know how to implement for-loop so that
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
});
would repeat n-times. I've tried adding for loop function but I can't get it right. I'm only starting to learn JavaScript.
Here's the rest of the code: http://jsfiddle.net/Wkn9v/7/
Thank you!
What did you try? A for loop works fine http://jsfiddle.net/Wkn9v/3/
for(var i=0; i < 3; i++) {
var myLatlng = new google.maps.LatLng(-25.363882 + i/2, 131.044922);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
});
}
Maybe you're using the same lat/long in your loop? If so, they're on top of each other, and it looks like a single marker?
I modified your code so the logic is performed in the initialize function, because otherwise the loop wasn't executing properly. There was some other stuff in the wrong places too. This works:
jQuery(function ($) {
var map_canvas = document.getElementById('map_canvas');
$.getJSON('http://www.wawhost.com/appProject/fetchmarker.php?callback=?', function (data) {
initialize(data);
});
function initialize(data) {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922),
mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(map_canvas, mapOptions),
pos, lat, lng, latlang, marker;
for (var i = 0, l = data.length; i < l; i++) {
localStorage.loc = data[i].location;
pos = localStorage.loc.split(",");
lat = parseFloat(pos[0]);
lng = parseFloat(pos[1]);
latlang = new google.maps.LatLng(lat, lng);
marker = new google.maps.Marker({
position: latlang,
map: map,
title: 'Hello World!' // <<< Keep in mind that trailing , that was here is unnecessary
});
}
}
});
http://jsfiddle.net/userdude/Wkn9v/13/
You can use a for loop like this:
var myLatlng = [
new google.maps.LatLng(-10.0, 10.0),
new google.maps.LatLng(-10.2, 10.0),
new google.maps.LatLng(-10.0, 10.2)
];
var marker;
for(var i = 0; i < myLatlng.length; i++) {
marker = new google.maps.Marker({
position: myLatlng[i],
map: map,
title: 'Hello World!',
});
}
Here's what you need to do: http://jsfiddle.net/Wkn9v/10/
The code is pretty simple:
function initialize(data) {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-25.363882, 131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 4
});
var length = data.length;
for (var i = 0; i < length; i++) {
var loc = data[i].location;
var pos = loc.split(",");
var lat = +pos[0];
var lng = +pos[1];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
}
}
Here's what it does:
Creates a map centered at a fixed location.
For each location fetched via AJAX it creates a new marker.
If you have a list to run through, and you don't need the list you're working with but to setup the markers or whatnot, you can use a queue-based method that iterates over the list until the list is empty:
jQuery(document).ready(function ($) {
(function initialize() {
var pos = localStorage.loc.split(","),
lat = parseFloat(pos[0]),
lng = parseFloat(pos[1]),
myLatlngs = [
new google.maps.LatLng(-25.0, 131.0),
new google.maps.LatLng(-26.0, 132.0),
new google.maps.LatLng(-24.0, 130.0)
],
myLatlngs,
mapOptions = {
zoom: 4,
center: myLatlngs[0],
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
while (myLatlng = myLatlngs.shift()) {
new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
})();
});
http://jsfiddle.net/userdude/Wkn9v/9/
By "list" here I'm referring to an array, not an objects properties. So assume you get something the following back from your fetch script:
data = [
{"id":"1","published":"yes","location":"-25.363882,131.044922"},
{"id":"2","published":"yes","location":" -24.96614015991296, 139.7900390625"},
{"id":"3","published":"yes","location":"-28.76765910569124, 128.3203125"}
];
while (localStorage.loc = data.shift()) {
pos = localStorage.loc.location.split(",");
lat = parseFloat(pos[0]);
lng = parseFloat(pos[1]);
latlang = new google.maps.LatLng(lat, lng);
marker = new google.maps.Marker({
position: latlang,
map: map,
title: 'Hello World!'
});
}
I'm not real sure what you're up to with localStorage.loc here, since you overwrite it each time. If you omit it, you could possible set while (pos = ...location.split(',')) instead. Just depends on what you're doing and how the data is being interacted with in your script.
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);
});
});
How to plot more number of markers in google map
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
var latt=[13.0423734,12.918907];
var lang=[80.2727993,80.145264];
for(i=0; i<latt.length;i++)
{
initialize(latt[i],lang[i]);
}
});
function initialize(lat,lng)
{
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
}
</script>
Use arrays.
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
var latt=[13.0423734,12.918907];
var lang=[80.2727993,80.145264];
initialize(latt, lang);
});
function initialize(lat_arr,lng_arr)
{
// Assuming first array element is where you want the map centered
var latlng = new google.maps.LatLng(lat_arr[0],lng_arr[0]);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var markers = [];
// start i at 0 if you want a marker at the center as well
for(var i = 1; i < lat_arr.length; i++) {
latlng = new google.maps.LatLng(lat_arr[i], lng_arr[i]);
markers[i] = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
}
}