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>
Related
I want to show a location on google map but nothing show :
<script src="****/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvUNbVZUPT_8V-VMCcfI9aex3ygZO4J7U"></script>
jQuery(document).ready(function($) {
// Google map
if ($('#map-canvas').length) {
var
GOOGLE_MAP_LAT = 35.706291,
GOOGLE_MAP_LNG = 51.316624;
var map,
service;
var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setMap(map);
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
}
});
my html code :
<div id="#map-canvas" style="width: 300px;height: 400px"> </div>
to see my website:
http://www.eleconf.ir/
my console log is empty.
In your html, the ID of div is given as #map-canvas. # is not required.
I have been using the Google Developers Tutorial on how to add a map to my website:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map#the_finished_code
I cannot seem to find a way to add a pin to the map, I have used the "centre" function so that the map is centred on the lat and long of the pin, but the pin itself is not visible.
Any way to create a pin at that lat and long?
Just need to instantiate a marker Object and place it at the coordinates:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {lat: 44.5403, lng: -78.5463};
var mapOptions = {
center: new google.maps.LatLng(myLatLng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Fiddle
Try the following:
replace center with location
before:
center: new google.maps.LatLng(myLatLng),
after:
location: new google.maps.LatLng(myLatLng),
That should do the trick (should add the Pin automatically).
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'm following google map api and add the following code but not showing the marker
function initialize() {
var myLatlng = new google.maps.LatLng(27.7000, 85.3333);
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(27.7000, 85.3333),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
You're creating your map after adding the marker to it, so it is null at that point
var map = new google.maps.Map(map_canvas, map_options);
marker.setMap(map);
you might have some javascript errors so look at the console log
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>