May I know how to add numbering label to google map marker using google map api? Just add label, not trying to change the icon. Thank you.
If you don't want to use custom icons for each marker then I suggest looking into creating a label class with the OverlayView and then binding the position to the marker.
Or you could look at using something like: http://github.com/nmccready/google-maps-utility-library-v3-infobox
I think a better solution is to use a infoWindow. Something like this:
$(document).ready(function () {
var golfoMexico = new google.maps.LatLng(20.61536,-87.078975);
var settings = {
zoom: 18,
center: golfoMexico,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var pos1= new google.maps.LatLng(20.61536,-87.078975);
var infowindow = new google.maps.InfoWindow({
content: "Casa Stavola F8 II"
});
var companyMarker = new google.maps.Marker({ position: pos1, map: map,title:"Casa Stavola F8 II", visible:true});
infowindow.open(map,companyMarker);
});
Check out the example at http://www.geocodezip.com/basic8j.asp?filename=example_number.xml (for V2 of the API). There was also a question here about something similar - How can I create numbered map markers in Google Maps V3?.
Related
Hello guys I've got a simple question to ask, when I open my map I have set the lat and long to open some coords, then I place one marker with a infoBubble opening when the map is loaded, but after that the map opens in the maker position. I dont want that .. is it possible force the start location to open my map in the start position instead of the marker position?
thanks
function init() {
var mapCenter = new google.maps.LatLng(-8.799445,-63.922042);
map = new google.maps.Map( document.getElementById('map'), {
zoom: 17,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var myLatLng = new google.maps.LatLng(-8.802732,-63.921939);
var marker = new google.maps.Marker({ map: map,
position: myLatLng,
draggable: true,
icon: icon
});
}
By default the API when a InfoWindow will be opened tries to pan the map so that the infoWindow is fully visible.
Set the disableAutoPan-property of the infoWindow to true to avoid this.
I would like to have a blank google map, without any basemap showing roadmap, terrain, hybrid or satellite data: just a white background to display my layer only.
Is that possible?
hexblot was correct with his suggestion to look at custom map types documentation. Here is what I did to have a blank map (white background) without any control.
function initialize(){
var styles = [{
stylers:[{ color: "#ffffff" }]
}
];
var styledMap = new google.maps.StyledMapType(styles);
var centerlatlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 3,
center: centerlatlng,
disableDefaultUI : true,
mapTypeControlOptions: {
mapTypeIds: ['map_style']
},
mapTypeId: 'map_style'
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
map.mapTypes.set('map_style', styledMap);
}
you're most probably interested in custom map types, you can reference Google Maps documentation for that here :
https://developers.google.com/maps/documentation/javascript/maptypes?hl=en#CustomMapTypes
Google Maps are quite new to me so any help would be appreciated.
I created a custom map width custom pins and shadows with an information window that pops up when the marker is clicked.
This was working fine up untill 2-3 days ago when the markers dissappeared, the shadow still shows in the correct place?
The map marker and shadow are in the same folder as the map so should both show, any help would be greatly recieved.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
function initialize() {
var latlng = new google.maps.LatLng(51.51921,-0.07828);
var settings = {
zoom: 13,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.TERRAIN};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var westendImage = new google.maps.MarkerImage('images/WC1.png',
new google.maps.Size(50, 55),
new google.maps.Point(0,0),
new google.maps.Point(23, 75));
var westendShadow = new google.maps.MarkerImage('images/shadow.png',
new google.maps.Size(70,50),
new google.maps.Point(0,0),
new google.maps.Point(60, 48)
);
var westendPos = new google.maps.LatLng(51.52012, -0.13081);
var westend = new google.maps.Marker({
position: westendPos,
map: map,
icon: westendImage,
shadow: westendShadow,
title:"Westend Lettings Office",
zIndex: 2
});
google.maps.event.addListener(westend, 'click', function() {
infowindow1.open(map,westend);
});
Then show the map with:
<body onload="initialize()">
<div id="map_canvas" style="width:855px; height:390px;"></div>
</body>
Ok so I've answered my own question, google has updated the map api which of course has some bugs. So to fix my map icon problem I reverted to the previouse version 3.9.
Change the call to the api to this:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3.9"></script>
Bravo Me! :)
The updated maps can now be found here https://developers.google.com/maps/documentation/javascript/
I am using google maps api v3. In my map the current position name is showing larger than other names, but it is not easy to me to find it in the fist time, so I thought to style my current position, like, bold the text, change the color of the text, I searched but no answer.
This is my code:
function initialize() {
var latlng = new google.maps.LatLng(geoip_latitude(),geoip_longitude());
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Can I add a option to var myOptions = { to style my current location. In this case my current location is `colombo.
I think the best you can do within the confines of the API is to place something (such as a Marker object) on your current location. I don't believe the API permits you to style some labels and not others (and if it does, then it is probably not a way that is documented and straightforward).
I have a map in which I apply a custom overlay using KMbox overlay to signify where I think the users general point of interest lies. What I want is to display this map to the user and allow them to click on the map to give me an exact location match of their POI.
This all works fine except for when the user clicks on the map and changes the zoom of the map.
Here's my code to add the marker to the map.
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.remove();
}
if(last_marker)
{
last_marker.setMap(null);
}
marker = new google.maps.Marker({
position: location,
map: map
});
// Keep track for future unsetting...
last_marker = marker;
}
And to show the map I have this function.
function show_map(lt, ln, zoom, controls, marker)
{
var ltln = new google.maps.LatLng(lt, ln);
var vars = {
zoom: zoom,
center: ltln,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: controls,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN} ,
mapTypeControl: false,
scaleControl: false,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), vars);
KmOverlay = new KmBox(map, new google.maps.LatLng(lat, lon), KmOpts);
var totalBounds = new google.maps.LatLngBounds();
totalBounds.union(KmOverlay.getBounds());
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
I have a working example at the following link here
fixed this by using the setMap() method on the KmOverlay and passing null as a parameter.
eg:
function addMarker(location) {
if(KmOverlay)
{
KmOverlay.setMap(null);
}