Trying to add a marker into a google map from a hidden variable on page load. Is this possible to do based on the address rather than the coordinates?
Code is:
var place = $('#hidden-place').val();
var markers = [];
var mapOptions = {
zoom: 15,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('google-map'),
mapOptions);
You could use the Geocoding service in the API - take a look at this example https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
In that example it lets you use a free form address and plots the first matching result as a marker.
This would get you started at least.
Related
I want to embed a satellite Bing map without country / city information and without borders, basically I only want the satellite photos and add my custom pins. Is there a way to do that?
Right now, I create my map with:
var map = new Microsoft.Maps.Map(document.getElementById("bMap"),
{
credentials:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
center: new Microsoft.Maps.Location(35.173808, 90.402344),
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
zoom: 3,
disableZooming: true,
showCopyright: false,
showDashboard: false,
enableSearchLogo: false
}
);
For sure, you can use the mapTypeId property in the mapOption and replace your line:
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
By this line:
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
See the MSDN for reference: http://msdn.microsoft.com/en-us/library/gg427625.aspx
Also, in combination, you need to configure the label information by using the labelOverlay property:
var mapOptions =
{
credentials:"Your Bing Maps Key",
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: new Microsoft.Maps.Location(37.794973,-122.393542),
zoom: 17,
labelOverlay: Microsoft.Maps.LabelOverlay.hidden
}
//Load the map
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions );
Here is the MSDN reference:
http://msdn.microsoft.com/en-us/library/gg427628.aspx
http://msdn.microsoft.com/en-us/library/gg427602.aspx
See this screenshot to see what I'm going for. Just like it is on maps.google.com, I'd like to right click on the marker and have it bring up an option for directions. I'm trying to look through the Google Maps API3 Developer's Guide, but I'm having trouble finding a solution. Here's my current code:
function initialize() {
var myLatlng = new google.maps.LatLng(38.578809, -121.493758);
var mapOptions = {
zoom: 14,
center: myLatlng,
streetViewControl: false,
scaleControl: true,
scrollwheel: false,
mapTypeControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
}
}
var map = new google.maps.Map(document.getElementById('googlemaps'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Project Church Downtown'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
What you are asking for appears simple but actually requires quite a bit of work.
I suggest looking at this reverse geocoding guide:
https://developers.google.com/maps/documentation/geocoding/#ReverseGeocoding
as well as this directions service guide:
https://developers.google.com/maps/documentation/javascript/directions
Directions service example:
https://developers.google.com/maps/documentation/javascript/examples/directions-simple
You will need to determine the start point, either from a mobile user's current GPS or a desktop users approximate location using HTML5 geolocation. And then process the end point clicked and route the two locations.
For starters you can get the coordinates for a rightclick event.
google.maps.event.addListener(map, "rightclick", function(event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
});
I have written something similar to this in the past using an older version of the google maps api I want to add some geocoding with some autocomplete using the api3. But my map won't even load in. The map will load in only if I take the map options and the geocoder off. Why is this?
function mapLoad(){
jQuery(function($) {
$('#map').animate({height:300,width:300,opacity:1},1500);
});
var mapOptions = {
center: new google.maps.LatLng(57.698254, 12.037024),
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true
};
// Define map
map = new google.maps.Map(document.getElementById("map"),mapOptions);
// Define Gecoder
geocoder = new google.maps.Geocoder();
window.alert("no errors with map load");
}
EDITED neither the geocoder or the options work
i used this as a reference purely because it looks simple.
Where are you calling mapLoad? I assume in body onload. I setup this jsbin without issue. Does it help?
Please assist. Ive googled and gone through stack overflow but am unable to find this information anywhere. Is there a way to show only a specific continent, in my case Africa and hide all other unwanted continents in google maps. These maps shouldn't show at all. I came across this article -> Can i hide land masses with Google Maps API
But there is no specific example.
I am using Google Maps API 3.
Currently I have:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
//Implement map styling
var styles = [
{
"stylers": [
{"visibility": "simplified"}
]
}
];
var styledMap = new google.maps.StyledMapType(styles, {name: "MyMap"});
var mapOptions = {
center: new google.maps.LatLng(0.972198, 23.994141),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
draggable: false,
scrollwheel: false,
panControl: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
//Load kml of africa
var kmlMap = new google.maps.KmlLayer('http://myOverLay.kmz',
{
//suppressInfoWindows: false,
//map: map,
preserveViewport: true
});
kmlMap.setMap(map);
//map.mapTypes.set();
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
One option:
Cover the whole world except for a hole over your continent of choice. example of concept (US state of Virginia)
Limit the zoom and the bounds to prevent the map from going too far from showing that continent. description of how to limit the viewable area
Doesnt seem possible. Ended up using image mapster
Is there any way to remove the circular panning navigation control but keep the zoom control in the Google Maps V3 API? I've tried forcing it offscreen with jQuery but every time the map is updated it comes back. Any ideas? Thanks!
You may also have a look in here, you can remove/add specific controls when you declare your map:
var latlng = new google.maps.LatLng(40.44062, -79.99588);
var options = {
zoom: 14,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Taking Control of the Google Maps API V3 Controls
You can use google.maps.NavigationControlStyle.SMALL to display a small plus/minus zoom control, otherwise you'll have to create your own zoom control and add it to the map.
http://code.google.com/apis/maps/documentation/javascript/controls.html
In V3, when you define your options - you have the option of disabling/enabling any UI features:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
//panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}