I have the following code that creates a marker on Google Maps:
function initializeMap() {
var lat = '-32.089608'; //Set your latitude.
var lon = '115.933216'; //Set your longitude.
var centerLon = lon - 0.0105;
var myOptions = {
scrollwheel: false,
draggable: false,
disableDefaultUI: true,
center: new google.maps.LatLng(lat, centerLon),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Bind map to elemet with id map-canvas
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lon),
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
I would like to add custom text to the pointer above the default marker but I cannot work out how to do it. At the moment it displays a small empty box above the default marker. (I am unable to post an example image due to lack of reputation points.
I am not very experienced with coding so any help is appreciated.
Thank you
You only need add content into your infowindow:
var infowindow = new google.maps.InfoWindow({
content: 'abcxyz'
});
I doubt the standard library supports this.
But you can use the google maps utility library:
https://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
Google Maps API v3 marker with label
You only need to edit your marker click event function as below.
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
infoWindow.setContent('abcdxyz'); // add this line to your existing code
});
With this you can deal with multiple infoWindow for multiple markers.
Also if you want to display contents on mouseover, then you can use title property of marker like:
var marker = new google.maps.Marker({
position: {lat:lat, lng:lng},
map: map,
title: 'abcXYZ' // this will be displayed on marker mousover
});
Related
Hi Friends i cant able to find the solution for map-active.js file i think JS expert can do easily can u please help me i will share the map-active.js file
here only mention one location i want add one more location how it possible
...?
// google map
function initialize() {
var grayStyles =[{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
var mapOptions = {
zoom: 12,
styles: grayStyles,
hue: '#E9E5DC',
scrollwheel: false,
center: new google.maps.LatLng(9.967027, 76.243499),
};
var map = new google.maps.Map(document.getElementById('googleMap'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
animation:google.maps.Animation.BOUNCE,
icon: './assets/img/map.png',
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Like you added the first location, same way create new markers attached to same map.
var marker1 = new google.maps.Marker({
position: {lat: LOCATION_1_LAT, lng: LOCATION_1_LON},
animation:google.maps.Animation.BOUNCE,
icon: './assets/img/map.png',
map: map
});
var marker2 = new google.maps.Marker({
position: {lat: LOCATION_2_LAT, lng: LOCATION_2_LON},
animation:google.maps.Animation.BOUNCE,
icon: './assets/img/map.png',
map: map
});
Demo here: https://jsfiddle.net/sz9gkox6/
I'm trying to implement a marker on a map. I can verify that the map renders correctly at the right center and zoom, but the marker does not show up.
function initMap() {
var latLng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}})
var mapOptions = {
center: latLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: latLng,
visible: true,
map: map
});
}
I've also tried the implementation of adding the marker directly using marker.setMap(map):
function initMap() {
var myLatlng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}});
var mapOptions = {
zoom: 14,
center: myLatlng
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
Neither render a marker. I've noticed that even when I replace the handlebars values for latitude and longitude with numerical coordinates for testing, the marker still does not appear. Any help appreciated!
I'm testing in Chrome.
You need to use this syntax window.onload = function initMap() and you are not assigning the marker to the map marker.setMap(map);, try in this way:
window.onload = function initMap() {
//I just put some custom LatLng to make it work
var LatLng = new google.maps.LatLng(41.9026329,12.452200400000038);
var mapOptions = {
center: LatLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
};
Here you can find a working Plunker made with this code + css + html.
If you are doing it with some AngularJS, give a look at my answer to this Question by #Dorin.
Window.OnLoad W3Schools Documentation
Question Related to Window.OnLoad
If you have still some problems, just let me know.
I hope I've been helpful.
Why is it that only the first (one only) InfoWindow showing on Google Map? I want all of the pinned address show InfoWindow.
I already searched for answers like Only the first marker showing on google map , Google Maps API InfoWindow only showing the first location for all the markers and Google maps-api v3 InfoWindow automatically open on page load but still no luck.
here is my code.
$scope.initialise = function(){
$http.get('http://remoteapi.com/' + $scope.name)
.success(function(data)
{
var myLatlng = new google.maps.LatLng(8.4844173, 124.6526134);
var mapOptions = {
center: myLatlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for( var i in data ) {
var position = new google.maps.LatLng(data[i].lat, data[i].lon);
marker = new google.maps.Marker({
position: position,
map: map,
content: data[i].description
});
var infowindow = new google.maps.InfoWindow({
content: "<img style='max-width:50px;max-height50px;' src='images/"+data[i].image+"'>"
});
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
});
};
google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
I'm creating a map using the Javascript API, and I'm having some trouble getting the markers to show up.
I've followed this tutorial to create the map, which works well:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
I've then followed this tutorial to add the marker, but it's not loading:
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here's my code now:
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(43.643296, -79.408475),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options, marker);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This line
var map = new google.maps.Map(map_canvas, map_options, marker);
is wrong. mapconstructor has only two arguments. It should be
var map = new google.maps.Map(map_canvas, map_options);
And myLatlng is not defined. So, you can change your code to:
function initialize() {
myLatlng = new google.maps.LatLng(43.643296, -79.408475);
var map_canvas = document.getElementById('map');
var map_options = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}
Use this url you will get your answer http://www.w3schools.com/googleAPI/google_maps_overlays.asp
Is that possible to click on the other Tab 2 and the marker/location change? Click back on Tab 1 marker/location change back to first location.
[Links to Fiddle] http://jsfiddle.net/ye3x8/
function initialize() {
var styles = [{
stylers: [{
saturation: -100
}]
}];
var styledMap = new google.maps.StyledMapType(styles, {
name: "Styled Map"
});
var mapProp = {
center: new google.maps.LatLng(3.165659, 101.611416),
zoom: 17,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
overviewMapControl: false,
rotateControl: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style')
var marker = new google.maps.Marker({
position: new google.maps.LatLng(3.167244, 101.612950),
animation: google.maps.Animation.DROP,
icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Outside-Pink.png',
});
marker.setMap(map);
google.maps.event.addListener(marker, "click", function () {
});
}
google.maps.event.addDomListener(window, 'load', initialize);
A marker can be added to your map like so:
var myLatlng = new google.maps.LatLng(lat, lon)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
The marker position can then be changed like so:
marker.setPosition(new google.maps.LatLng(lat, lon));
In order to change the position of your maker based on which tab a user selects, you could do something like:
var myLatlng = new google.maps.LatLng(lat, lon)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
//When user clicks tab1:
changeMarkerPos(marker, tab1lat, tab1lon);
//When user clicks tab1:
changeMarkerPos(marker, tab2lat, tab2lon);
function changeMarkerPos(marker, lat, lon){
marker.setPosition(new google.maps.LatLng(lat, lon));
}
Create 2 markers and add 2 functions like :
<script>
function recenter() {
map.setCenter(new google.maps.LatLng(<?php echo $coord[0].",".$coord[1];?>));
map.setZoom(16);
}
function recenter2() {
map.setCenter(new google.maps.LatLng(<?php echo $coord2[0].",".$coord2[1];?>));
map.setZoom(16);
}
</script>
$coord[0] and $coord[1] are latitude and longitude of first marker
$coord2[0] and $coord2[1] are latitude and longitude of second marker
don't forget to add onclick function on your tabs :
onclick="recenter();"
onclick="recenter2();"