how can add current location on map default
show me only latlng show here
$(document).ready(function() {
var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
var map;
map_initialize(); // initialize google map
//############### Google Map Initialize ##############
function map_initialize()
{
var googleMapOptions =
{
center: mapCenter, // map center
zoom: 17, //zoom level, 0 = earth view to higher value
maxZoom: 18,
minZoom: 16,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
Related
I want to show all markers on google map , but the looping only show the last record. How can fix it?
function initMap() {
for (i = 0; i < markers.length ; i++) {
var location = {lat: markers[i][0], lng: markers[i][1]};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: location
});
var marker = new google.maps.Marker({
position: location,
// prevent the user move the marker
draggable: false,
map: map
});
}
}
You are creating the map each time in the loop. Due to this only the last marker is seen. Move the code of creating the map outside the loop.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: markers[0][0], lng: markers[0][1]}
});
for (i = 0; i < markers.length ; i++) {
var location = {lat: markers[i][0], lng: markers[i][1]};
var marker = new google.maps.Marker({
position: location,
// prevent the user move the marker
draggable: false,
map: map
});
}
}
If you want the map to be zoomed in to view all the markers then you can use the LatLngBounds class.
I'm trying to show a marker on a map with set coordinates and then show the users geolocation in relation to the marker. I'm able to show both the marker and geo location (if available) on the map but the map is only positioned on the geo location. I think I need to use fitBounds to fit both markers in view but I can't get this to work. Can anyone help?
function initialize() {
var latitude = 51.5039713;
var longitude = -0.114518;
var mapCanvas = document.getElementById('map-directions');
var center = new google.maps.LatLng(latitude, longitude);
var zoom = 18;
var mapOptions = {
center: center,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(mapCanvas, mapOptions)
marker = new google.maps.Marker({
map:map,
animation: google.maps.Animation.DROP,
position: center,
icon: '/pickup.png'
});
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var bounds = new google.maps.LatLngBounds();
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var geolocation = new google.maps.Marker({position: pos, map: map, title: 'Your geolocation', });
bounds.extend(geolocation.getPosition());
map.fitBounds(bounds);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
initialize the bounds with the position of marker as argument:
var bounds = new google.maps.LatLngBounds(center);
Related to the comment:
To have both markers in viewport but 1 in center you may:
create a circle` with:
pos as `center
the distance between pos and center as radius
call map.fitBounds() by using the bounds of the circle as argument
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
circle = new google.maps.Circle({center:pos,
radius: google.maps.geometry.spherical.computeDistanceBetween(pos,center)}),
geolocation = new google.maps.Marker({position: pos, map: map, title: 'Your geolocation'});
map.fitBounds(circle.getBounds());
I have three layers that I would like to show up on my map, but none of them are showing up. Is there something wrong with my initialize() function? I've made all the correct declarations within the script tag, so I don't know where else the problem would be.
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng (37.80, -122.27);
var mapOptions =
{
zoom: 13,
zoomControl: true,
mapTypeControl: false,
panControl: false,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var image = 'css-js/images/hospitalicon-24.png';
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//Fire Stations
var mapsEngineLayer = new google.maps.visualization.MapsEngineLayer({
layerId: '08042600090929941501-16143158689603361093',
map: map
});
//Hospitals
var mapsEngineLayer1 = new google.maps.visualization.MapsEngineLayer({
layerId: '08042600090929941501-08112974690991164587',
map: map
});
//Police Stations
var mapsEngineLayer2 = new google.maps.visualization.MapsEngineLayer({
layerId: '08042600090929941501-11613121305523030954',
map: map
});
}
I am having problems using Google Map API.
I want to plot circles on the map and create mouseover event on each circle to open an infowindow displaying the time value.
First problem is the infowindow content does not change for different circles.
Second problem is infowindow does not pop up for some reason.
Can someone help please?
Thanks
Codes are as followings:
function initialize() {
data={};
data[0]={
center: new google.maps.LatLng(51.49799,-0.196145),
population: 1000,
time:"2013-03-01T03:31:18Z"
};
data[1]={
center: new google.maps.LatLng(51.496294,-0.188184),
population: 1000,
time:"2013-03-01T13:21:15Z"
};
data[2]={
center: new google.maps.LatLng(51.497817,-0.178313),
population: 1000,
time:"2013-03-04T04:03:50Z"
};
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.494438, -0.188907),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var movingColour= '#FF0000';
var counter=0;
for (var city in data) {
// Construct the circle for each value in citymap. We scale population by 20.
//movingColour=ColorLuminance(movingColour, -0.005) ;
var populationOptions = {
strokeOpacity: 0.35,
strokeWeight: 2,
strokeColor:movingColour,
fillColor:movingColour ,
fillOpacity: 0.35,
map: map,
clickable:true,
center: data[city].center,
radius: data[city].population / 20
};
var circle = new google.maps.Circle(populationOptions);
var infowindow =new google.maps.InfoWindow({
content: data[city].time
});
google.maps.event.addListener(circle, 'mouseover', function(ev) {
alert(infowindow.content);
infowindow.open(map,circle);
});
counter++;
}
google.maps.event.addDomListener(window, 'load', initialize);
}
This is a common problem usually seen with InfoWindows on markers and can be solved a number of ways. The InfoWindow isn't opening because the optional second parameter of .open can only be a marker, without that, you need to set the position at which the marker should open. I usually use function closure to solve the InfoWindow content problem (there are other ways):
function initialize() {
data={};
data[0]={
center: new google.maps.LatLng(51.49799,-0.196145),
population: 1000,
time:"2013-03-01T03:31:18Z"
};
data[1]={
center: new google.maps.LatLng(51.496294,-0.188184),
population: 1000,
time:"2013-03-01T13:21:15Z"
};
data[2]={
center: new google.maps.LatLng(51.497817,-0.178313),
population: 1000,
time:"2013-03-04T04:03:50Z"
};
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.494438, -0.188907),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var movingColour= '#FF0000';
var counter=0;
for (var city in data) {
var populationOptions = {
strokeOpacity: 0.35,
strokeWeight: 2,
strokeColor:movingColour,
fillColor:movingColour ,
fillOpacity: 0.35,
map: map,
clickable:true,
center: data[city].center,
radius: data[city].population / 20
};
var circle = new google.maps.Circle(populationOptions);
createClickableCircle(map, circle, data[city].time);
counter++;
}
google.maps.event.addDomListener(window, 'load', initialize);
}
function createClickableCircle(map, circle, info){
var infowindow =new google.maps.InfoWindow({
content: info
});
google.maps.event.addListener(circle, 'mouseover', function(ev) {
// alert(infowindow.content);
infowindow.setPosition(circle.getCenter());
infowindow.open(map);
});
}
(you probably want to add a listener to close the InfoWindow.)
I rewrite a bit of your javascript to have better syntax and named variables which you had forgotten to define with var.
For example to define data={}; use var data=[]; since I can see below that you use it as an array containing objects. I also made a fix which stops flickering effect when you are moving your cursor over circles which has infowindow already opened:
// To stop flickering.. we wont reopen until necessary
// We open only if position has been changed or infowindow is not visible
if(infowindow.getPosition() !== this.getCenter() || infowindowClosed === true) {
// this can be used to access data values
infowindow.setContent(this.data.time);
infowindow.setPosition(this.getCenter());
infowindow.open(map);
infowindowClosed = false;
}
Other enhancements includes defining few of your variables as global above your initialize(); method, cheers.
Check out working fiddle with comments.
How can I add label to my marker if my markers are populated on ajax success each result.
map.gmap('addMarker', { 'position': new google.maps.LatLng(result.latitude, result.longitude) });
I tried like this, but with no success:
map.gmap('addMarker', {
'position': new google.maps.LatLng(result.latitude, result.longitude),
'bounds': true,
'icon': markerIcon,
'labelContent': 'A',
'labelAnchor': new google.maps.Point(result.latitude, result.longitude),
'labelClass': 'labels', // the CSS class for the label
'labelInBackground': false
});
If you just want to show label below the marker, then you can extend google maps Marker to add a setter method for label and you can define the label object by extending google maps overlayView like this..
<script type="text/javascript">
var point = { lat: 22.5667, lng: 88.3667 };
var markerSize = { x: 22, y: 40 };
google.maps.Marker.prototype.setLabel = function(label){
this.label = new MarkerLabel({
map: this.map,
marker: this,
text: label
});
this.label.bindTo('position', this, 'position');
};
var MarkerLabel = function(options) {
this.setValues(options);
this.span = document.createElement('span');
this.span.className = 'map-marker-label';
};
MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
onAdd: function() {
this.getPanes().overlayImage.appendChild(this.span);
var self = this;
this.listeners = [
google.maps.event.addListener(this, 'position_changed', function() { self.draw(); })];
},
draw: function() {
var text = String(this.get('text'));
var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
this.span.innerHTML = text;
this.span.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 10 + 'px';
this.span.style.top = (position.y - markerSize.y + 40) + 'px';
}
});
function initialize(){
var myLatLng = new google.maps.LatLng(point.lat, point.lng);
var gmap = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
map: gmap,
position: myLatLng,
label: 'Hello World!',
draggable: true
});
}
</script>
<style>
.map-marker-label{
position: absolute;
color: blue;
font-size: 16px;
font-weight: bold;
}
</style>
This will work.
I doubt the standard library supports this.
But you can use the google maps utility library:
http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new MarkerWithLabel({
position: myLatlng,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: "A",
labelAnchor: new google.maps.Point(3, 30),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
The basics about marker can be found here: https://developers.google.com/maps/documentation/javascript/overlays#Markers
Support for single character marker labels was added to Google Maps in version 3.21 (Aug 2015). See the new marker label API.
You can now create your label marker like this:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(result.latitude, result.longitude),
icon: markerIcon,
label: {
text: 'A'
}
});
If you would like to see the 1 character restriction removed, please vote for this issue.
Update October 2016:
This issue was fixed and as of version 3.26.10, Google Maps natively supports multiple character labels in combination with custom icons using MarkerLabels.
The way to do this without use of plugins is to make a subclass of google's OverlayView() method.
https://developers.google.com/maps/documentation/javascript/reference?hl=en#OverlayView
You make a custom function and apply it to the map.
function Label() {
this.setMap(g.map);
};
Now you prototype your subclass and add HTML nodes:
Label.prototype = new google.maps.OverlayView; //subclassing google's overlayView
Label.prototype.onAdd = function() {
this.MySpecialDiv = document.createElement('div');
this.MySpecialDiv.className = 'MyLabel';
this.getPanes().overlayImage.appendChild(this.MySpecialDiv); //attach it to overlay panes so it behaves like markers
}
you also have to implement remove and draw functions as stated in the API docs, or this won't work.
Label.prototype.onRemove = function() {
... // remove your stuff and its events if any
}
Label.prototype.draw = function() {
var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); // translate map latLng coords into DOM px coords for css positioning
var pos = this.get('position');
$('.myLabel')
.css({
'top' : position.y + 'px',
'left' : position.x + 'px'
})
;
}
That's the gist of it, you'll have to do some more work in your specific implementation.
You can now add a class name to the marker label via google.maps.MarkerLabel interface.
For example:
const marker = new google.maps.Marker({
position: position_var,
map,
label: {
text: 'label text',
className: "my-label-class",
},
title: "Marker Title",
});
For a full list of options see the google map reference doc:
https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel