Maps API not showing border which was visible is google maps - google-maps

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.

Related

kmlLayer not displaying google maps api

First time ever posting on StackOverflow so tell me and be crude if I am doing something terribly wrong anyway. I recently created a KML file with maps.google.com and I uploaded the kml to my site, and I am trying to implement to the google maps that we created, but I am stumped as I have no errors but it does not show at all.
// North Campus SHuttle KML implementation
var redShuttle = new google.maps.KmlLayer (
'http://blazelist.org/maps/test/RedShuttle.kml'
);
redShuttle.setMap(map);
Can you share more code?
In my example your code is working:
function initialize()
{
var map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(22.7964,73.8456),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
/* var kmlLayer = new google.maps.KmlLayer('http://blazelist.org/maps/test/RedShuttle.kml',
{
suppressInfoWindows: true,
map: map
});
*/
var redShuttle = new google.maps.KmlLayer ( 'http://blazelist.org/maps/test/RedShuttle.kml' ); redShuttle.setMap(map);
}
http://jsfiddle.net/iambnz/WbzpS/

Google Maps - How to get a blank basemap

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

Can I style my current geographical position in google maps api V3

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).

Is it possible to disply the ROADMAP without label using Google Maps JavaScript API V3?

I'm using the Google Maps JavaScript API V3 to display a map. I love the familiar yellow/brownish ROADMAP I have no use for the labels (street names, city names, etc.)
Is it possible to have those not display?
I noticed the Satellite map has the option. Why not the ROADMAP/
function initialize() {
var Nice = new google.maps.LatLng(43.7, 7.25);
var myOptions = {
zoom: 4,
center: Nice,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
Use styled map types to turn off labels:
http://code.google.com/apis/maps/documentation/javascript/reference.html#StyledMapType
Here's a good builder for building the properties you want:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

How to show marker

How to show marker? if it already exists in Google map. Link with marker http://maps.google.com/maps?&z=10&q=36.26577+-92.54324&ll=36.26577+-92.54324
and my function for initialization
function initialize() {
var latlng = new google.maps.LatLng(36.26577, -92.54324);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'map': map,
'title': 'set map in option'
});
or
var yourMarker = new google.maps.Marker({
'position': some_where.latLng,
'title': 'set map later'
});
yourMarker.setMap(map)
Perhaps, what you seek can be done with the Places Api
http://code.google.com/apis/maps/documentation/places/
There are, however, some limitations on the number of requests per hour, per user.
In short: you search a particular LatLng point for nearby places. Then you receive a json (or xml) list of places, wich in turn can be transformed (by you) into markers on your map.