I have the following code to display the bicycling layer in Google Maps. But I wondered if it is possible to change the dark green colour to another colour?
I have tried setting the strokeColor is var mapOptions but this didn't seem to work.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(53.231472, -0.539783);
var mapOptions = {
zoom: 17,
center: myLatlng
};
var map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions);
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
Related
Trying to do a simple position marker on a Google map imbed. Everything looks right, but not working.
<link rel="stylesheet" type="text/css" href="default.css"/>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322,-82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714,-82.9121331),
map: map
});
</script></head>
The map is loading fine, but no marker is found.
You need to create the marker inside the initialize function (where the map variable exists).
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322, -82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714, -82.9121331),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Yes, you need to initialize the marker object inside the initialize() method of the code. One way is how geocodezip has demoed. Here is one more way if you want to write modular code.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.0501322, -82.914233);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
GoldenGatePark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(GoldenGatePark);
}
</script>
Here you have added a marker in the TestMarker function and the TestMarker function is called in the initialize() method. You can just change the values of LatLng in the TestMarker function code.
I want to display a custom location with an icon and a label on the Google map in my web site.
In the head section Insert the following JS library and the coding. Change LatLng to match your exact location.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(7.316306, 80.622160);
var mapOptions = {
zoom: 14,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'My new location is this :P'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
And in the body section insert this div where you want the map to be displayed.
<div id="map-canvas" width="350" height="271"></div>
Hi, i am trying to point out the location of my company. It goes to the right location but the pointer is missing. I tried alot of things but it still doesn't work. I am a beginning programmer and i need some help. Thank you for your time.
This is my code:
<jsp:include page="header.jsp">
<jsp:param name="subTitle" value="AutoTotaalDiensten - Locatie info" />
</jsp:include>
</head>
<%# include file="menu.html"%>
Locatie
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<style>
#map_canvas {
height: 400px;
}
<div id="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
var mapPin = " http://www.google.com/mapfiles/marker.png";
var Marker = new google.maps.Marker({
center : new google.maps.LatLng(52.124707, 5.088196),
zoom : 13,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<%# include file="footer.html"%>
Call Marker.setMap(map) after you initialize the map.
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center : new google.maps.LatLng(52.124707, 5.088196),
zoom : 13,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var mapPin = " http://www.google.com/mapfiles/marker.png";
var Marker = new google.maps.Marker({
position : map_options.center,
});
var map = new google.maps.Map(map_canvas, map_options)
Marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
Or create it after you create and initailize the map and set its "map" property.
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center : new google.maps.LatLng(52.124707, 5.088196),
zoom : 13,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var mapPin = " http://www.google.com/mapfiles/marker.png";
var map = new google.maps.Map(map_canvas, map_options)
var Marker = new google.maps.Marker({
map: map,
position: map.getCenter()
});
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
I want to draw several circles in Google Maps API v3. I have found a script which seems to do right what I want. But so far, it works only for one circle. How should this code look like to draw "birrfeld" AND "zuerich"?
<script>
var birrfeld=new google.maps.LatLng(47.443411,8.234478);
var aelggialp=new google.maps.LatLng(46.80121,8.226692);
var zuerich=new google.maps.LatLng(47.463031,8.549252);
function initialize()
{
var mapProp = {
center:aelggialp,
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:birrfeld,
radius:6000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
var zuerich = new google.maps.Circle({
center:zuerich,
radius:8000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You're not calling:
zuerich.setMap(map);
Example: http://jsfiddle.net/jKuck/
So these Google Maps were working fine and then all of a sudden they weren't. The only change I made was uploading new images for the markers. Upon inspection I can see that the new markers are loading properly and the console produces no errors (Chrome and FF). I have tried flipping the sensor between true and false, also with no luck. When I removed the sensor attrib it kicked back the standard alert error of needing it.
Am I missing something simple?
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false">
</script>
<script type="text/javascript">
var wildbasin = new google.maps.LatLng(30.310716, -97.824238);
var seucampus = new google.maps.LatLng(30.229723, -97.755275);
var austin = new google.maps.LatLng(30.275079, -97.792053);
var basinm = 'http://www.test.stedwards.edu/sites/default/files/wildbasinmarker_1.png';
var campusm = 'http://www.test.stedwards.edu/sites/default/files/maincampusmarker_0.png';
var map;
function initialize() {
var myOptions = {
zoom: 12,
center: austin,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var campus = new google.maps.Marker({
position: seucampus,
map: map,
title:"St.Edward's University",
icon: campusm
});
var thebasin = new google.maps.Marker({
position: wildbasin,
map: map,
title:"Wild Basin",
icon:basinm
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
While the map will default to 100% width, you need to set a height for the containing div. For example, this will solve your issue:
<div id="map_canvas" style="height:400px;"></div>