I'm looking for a method to my Google map auto refresh for each "n" seconds, now i'm refreshing all page, but i must to refresh only the map,
follow my JS code:
var DEFAULT_ZOOM = 14;
function initialize() {
var map;
var latlng = new google.maps.LatLng(-19.0, -59.0);
var myOptions = {
zoom: parseInt(getCookie("zoom_gm")),
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
initMarkers(map);
var zm = DEFAULT_ZOOM;
google.maps.event.addListener(map, 'zoom_changed',
function(){
zm = map.getZoom();
setCookie("zoom_gm", zm);
}
);
}
You will have to retrieve the new data using AJAX. Once you received the data, you have to walk the array/object you've received and add the new Markers. Depending on what you receive(maybe the response contains coordinates you've already set) you need to remove existing markers by using markerObj.setMap(null) .
That's all I can suggest so far, you're very stingy with informations.
Related
This code takes a big list of (400) markers and adds it to the map, at the end, it shows the whole map including all the markers.
What I have tried to achieve is: when geolocation is available, center the map on location, zoom to level 16 and refresh the map to show it, otherwise, let the whole big map show... I have read and tried many different things, but the geolocation must happen before the map is created. I want to make it happen after. I show you my code here and the temporary link to the working site: http://studioteknik.co/brasseursillimites.com/detaillants/
function initialize()
{
var map = new google.maps.Map(document.getElementById('map-canvas'));
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var i in locations) {
var p = locations[i];
var latlng = new google.maps.LatLng(p[1], p[2]);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: p[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.title);
infowindow.open(map, this);
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
Here is a simple example of geolocation. Just add the geolocation code anywhere after the map object is created. If the user doesn't allow geolocation, the map will be shown at the default location / zoom level.
function initialize() {
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(0,0)
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Geolocation code
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
map.setZoom(16);
});
}
}
initialize();
JSFiddle demo
Im building a web app in order to show a marker in the users current location using geolocation and GPS. Here is my code
var marker;
$(window).load(function() {
myOptions = { zoom: 20, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var watchId = navigator.geolocation.watchPosition(centerMap);
});
function centerMap(location)
{
var myLatlng = new google.maps.LatLng(location.coords.latitude,location.coords.longitude);
map.setCenter(myLatlng);
map.setZoom(15);
$("#lat").text("Latitude : " + location.coords.latitude);
$("#lon").text("Longitude : " + location.coords.longitude);
//show current location on map
marker = new google.maps.Marker({
position: myLatlng,
map: map,
zIndex:1
});
navigator.geolocation.clearWatch(watchId);
}
This code works but it keep adding markers as the user changes location.
How i can show only one marker in the current users location?
Instead of generating a new marker each time centerMap is called simply update its position with marker.setPosition(myLatlng).
I'm quite new to Google Maps API 3 and can't figure out the following error: All clicks on my markers open the infowindow on the same marker (bad), but with different text (good).
I'm pulling the data out of wordpress custom meta data into an xml, which i then parse; What makes me wondering is the fact that generating the markers works this way, but adding the listener for the infowindow obviously fails.
Any ideas what's happening here?
Live demo at:
http://goo.gl/9seK9
Code
$(document).ready(function(){
var infowindow;
var latlng = new google.maps.LatLng(47.580231,13.771362);
var settings = {
zoom: 8,
center: latlng,
panControl: true,
zoomControl: true,
mapTypeControl: true,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
jQuery.get("http://rundumadum.eu/de/wp-content/themes/rud/rundumadumMap.xml", {}, function(data) {
var xmllength = $(data).find("mymarkers").children().size();
var supermarkers = [];
jQuery(data).find("mymarker").each(function() {
var myid = $(this).find("id").text();
var mytitle = $(this).find("title").text();
var mylink = $(this).find("link").text();
var mylocation = $(this).find("location").text();
var mysplits = mylocation.split(",");
var mylat = mysplits[0];
var mylng = mysplits[1];
var mylatlng = new google.maps.LatLng(parseFloat(mylat), parseFloat(mylng));
var myinfo = ""+mytitle+"";
var marker = createMyMarker(mytitle, myinfo, mylink, mylatlng);
});
});
function createMyMarker(mytitle, myinfo, mylink, mylatlng) {
marker = new google.maps.Marker({
position: mylatlng,
map: map,
clickable:true,
icon:'http://rundumadum.eu/de/wp-content/themes/rud/static/img/markerTest.png',
html: ''+mytitle+''
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: myinfo});
infowindow.open(map, marker);
});
}
return marker;
});
Would be grateful for any ideas ...
One thing I notice is that the marker you are creating in createMyMarker is not declared using var marker, so it looks like you are inadvertently creating a global marker reference. Also, it appears that the statement: return marker is actually after the end of your createMyMarker function, although that may just be a typo that was introduced when you set up your code sample in your question.
At any rate, I believe if you change the code in createMyMarker to declare the marker using var marker within that function, it will give you better results.
I'm trying to get my hands dirty on Google Maps API v3. But now I'm stuck with figuring out how to get the coordinates of a certain marker?
<script>
var homeLatlng = new google.maps.LatLng(16.61096000671, 120.31346130371);
var homeMarker = new google.maps.Marker({
position: homeLatlng,
map: map
});
var myOptions = {
center: new google.maps.LatLng(16.61096000671, 120.31346130371),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map =
new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//I know that I'm the one who set the coordinates for this,
// but how do I fetch it back?
$('#plot').click(function(){
homeMarker.setMap(map);
});
</script>
homeMarker.getPosition(); //returns a google.maps.LatLng object
I'm trying to do this.When a user comes to sites,i need to show him on google map and also will pass some latitude and longitude.Now my map has to show the path of user and the lat and long which i pass.
Using my below code,i pass my lat and long.Now,i need to show the user position.
How to show both this?
function initialize() {
var myOptions = {
zoom: 17,
center: new google.maps.LatLng(23.333,34.534),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var image = 'image.png';
var myLatLng = new google.maps.LatLng(23.333,34.534);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
[This is how i tried]:http://dpaste.com/695949/
it did not work.
If you want to use HTML5 geo location then in your initialize function after you add the beachMarker put:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(e) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(e.coords.latitude, e.coords.longitude);
});
}, function() {
// Handle error here
});
}
To display directions on google map you need to have source and destination latlong. in your above code you have destination latlong but user latlong are missing. you need to first get user latlong then you have to use google direction renderer. for more reference read http://code.google.com/apis/maps/documentation/javascript/directions.html
user(source) latlong can be found in many ways -
using geocoder gem based on ip, address, etc.
using html5 geolocation read http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/