I'm using Wordpress. I want to change default zoom level on google maps API. I edited "zoom: 5" property, but nothing happens. Function:
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById("map-canvas"),
{
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng( -5.796453, -35.206706),
new google.maps.LatLng( -5.796453, -35.206706));
map.fitBounds(defaultBounds);
(...)
map.fitbounds resets the viewport and ignores the zoom property you set. I found this fiddle that simulates the map.fitbounds function but where the zoom isn't ignored: https://jsfiddle.net/pdnsown1/2/
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 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.
I am using google map API V3. i want to use a custom marker instead of that red marker. Earlier the code was
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// display map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if(display_marker) {
// create a map marker
var marker = new google.maps.Marker({
map: map,
position: latlng
});
}
but for the custom marker, i changed the code to
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// display map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// create a map marker
var image = 'imgs/pin.png';
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: image
});
but yet this is not working.
The image path is likely incorrect but,
You could also eliminate var image and just define the icon under var marker depending on your situation.
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: 'imgs/pin.png',
});
Your code looks okay.
Perhaps the image path is off.
Try putting the pin.png in the same folder as the map and then changing the
var image = 'imgs/pin.png';
to
var image = 'pin.png';
If it works, then you need to revise the path, probably to something like
var image = '/imgs/pin.png';
or
var image = '../imgs/pin.png';
This is the code for generating map with a kml file
var myLatlng = new google.maps.LatLng(47.711516,-117.395075);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapdiv"), myOptions);
var geoLayer = new google.maps.KmlLayer(
'http://some.kml.url/kmllayer.kml',
{suppressInfoWindows: true,map: map});
geoLayer.setMap(map);
My problem is its always getting at max distance, zoom settings not working even if i try to map.setCenter() call, its still same.
Another question is when i draw polygons on map, is there any way to highlight inside color of it when someone mouse overs it.
2nd question. Draw an initial polygon with a fill opacity of 0 but stroke opacity of 1. Have two event listeners attached to the polygon, for mouseover and mouseout.
google.maps.event.addListener(polygon, 'mouseover', function() {
polygon.setOptions({fillOpacity:0.5});
}
google.maps.event.addListener(polygon, 'mouseout', function() {
polygon.setOptions({fillOpacity:0.0});
}