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).
Related
I am unable to view the rotation icon when I create a google map setting the
type id to satelite as shown below.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading: 0
});
Can anyone please help me with this
Per Google maps docs:
rotateControl enables/disables the appearance of a Rotate control for
controlling the orientation of 45° imagery. By default, the control's
presence is determined by the presence or absence of 45° imagery for
the given map type at the current zoom and location. You may alter the
control's behavior by setting the map's rotateControlOptions to
specify the RotateControlOptions to use. You cannot make the control
appear if no 45° imagery is currently available.
Also, rotateControl appears only if zoom is high enough. For example, this map will not show rotateControl:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: -37.8136, lng: 144.9631},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
But if you zoom it a bit more, it will show rotateControl:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: {lat: -37.8136, lng: 144.9631},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
}
this is code i use to initialize the map, nothing special.
function initializeMap() {
var mapArray = document.getElementById("latLong").value.split("_");
var latLng = new google.maps.LatLng(mapArray[0], mapArray[1]);
var mapOptions = {
center: latLng,
zoom: 10,
tilt: 30,
zoomControl: true,
panControl: false,
streetViewControl: true
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({ position: latLng, map: map, title: mapArray[2] });
}
latitude is -39.3455 and longitude is -8.0554. however when the map displays the marker is in the middle of the ocean, where point 0,0 is. Why is this happening? I tried a few browsers, nothing different. I tried to hardcode the values from a google example showing canada and I did see canada, however it does not want to work with my values.
Usually 0,0 will be displayed when the coordinates are not valid. Try to switch the order, maybe you made a mistake there.
I am using Google maps API for my project.
var elevator;
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(55.50, -129.35),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var address="CA,state"
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+address+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
});
});
Google Maps CA in maps.google.com
In My App through API
California Boundary is not shown in map which drawn through API. Any help will be useful.
Google Maps API leaves to the user the job of implementing anything outside the basic features.
Google Maps shares a lot of features in common with Google Maps API but it has always had an edge over his little brother.
For this particular case, you could use a google.maps.KmlLayer to display your desired boundaries. For this, you need a publicly available kml file. This means, if you find said kml, storing it in your public dropbox folder would suffice. Also, there's a size limit on kml files, so don't get carried away.
I guess you need more than just California, but here's an example just for CA
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
disableDefaultUI: true,
zoomControl: true,
center: new google.maps.LatLng(38, -111),
mapTypeId: "roadmap"
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://dl.dropboxusercontent.com/u/3133731/kml/california.kml',
map:map,
preserveViewport: true,
suppressInfoWindows: true
});
Here: I made you a jsFiddle.
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?.
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);
}