I'm creating a map using the Javascript API, and I'm having some trouble getting the markers to show up.
I've followed this tutorial to create the map, which works well:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
I've then followed this tutorial to add the marker, but it's not loading:
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here's my code now:
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(43.643296, -79.408475),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options, marker);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This line
var map = new google.maps.Map(map_canvas, map_options, marker);
is wrong. mapconstructor has only two arguments. It should be
var map = new google.maps.Map(map_canvas, map_options);
And myLatlng is not defined. So, you can change your code to:
function initialize() {
myLatlng = new google.maps.LatLng(43.643296, -79.408475);
var map_canvas = document.getElementById('map');
var map_options = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}
Use this url you will get your answer http://www.w3schools.com/googleAPI/google_maps_overlays.asp
Related
I'm trying to implement a marker on a map. I can verify that the map renders correctly at the right center and zoom, but the marker does not show up.
function initMap() {
var latLng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}})
var mapOptions = {
center: latLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: latLng,
visible: true,
map: map
});
}
I've also tried the implementation of adding the marker directly using marker.setMap(map):
function initMap() {
var myLatlng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}});
var mapOptions = {
zoom: 14,
center: myLatlng
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
Neither render a marker. I've noticed that even when I replace the handlebars values for latitude and longitude with numerical coordinates for testing, the marker still does not appear. Any help appreciated!
I'm testing in Chrome.
You need to use this syntax window.onload = function initMap() and you are not assigning the marker to the map marker.setMap(map);, try in this way:
window.onload = function initMap() {
//I just put some custom LatLng to make it work
var LatLng = new google.maps.LatLng(41.9026329,12.452200400000038);
var mapOptions = {
center: LatLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
};
Here you can find a working Plunker made with this code + css + html.
If you are doing it with some AngularJS, give a look at my answer to this Question by #Dorin.
Window.OnLoad W3Schools Documentation
Question Related to Window.OnLoad
If you have still some problems, just let me know.
I hope I've been helpful.
The code below is what I am trying to use in order to add markers to the maerkers var and then add an additional marker to the handler. The second handler.addMarker method just overwrites my first setting of the markers. How can I concatenate using the gmaps4rails gem?
markers = handler.addMarkers(<%=raw #hash.to_json %>);
markers = handler.addMarker({
lat: position.coords.latitude,
lng: position.coords.longitude
});
Using JavaScript you can add your multiple marker by creating new object for each one.
function initialize() {
var myLatlng_first = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng_second = new google.maps.LatLng(-20.253256,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker_first = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
var marker_second = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I am working on google maps api on web
This is my code
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Just the map is shown but the marker is not, why please?
I have a second question please. What is the best action the user expect to click (or do) what they want to add a marker on the map?
Thanks
Maybe you used the ID wrong.
JS:
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Demo : http://jsfiddle.net/lotusgodkk/x8dSP/3523/
I have looked every where and am starting to go crazy. I know I am close, but can't get it.
I have my html:
<div id="glasgow-map" class="collapse">
<div class="map">
<div id="map-canvas" style="width:100%; height:350px;"></div>
</div>
</div><!--end collapse-->
my JS is:
function initialize() {
var myLatlng = new google.maps.LatLng(55.860949,-4.244938);
var mapOptions = {
zoom: 16,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Taylor Hopkinson Associates'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$('#glasgow-map').on('shown.bs.collapse', function () {
google.maps.event.trigger(map, "resize");
map.setCenter(center);
})
From all the other info I have seen I know I need the (map, "resize) but I am getting this error in the console:
Uncaught ReferenceError: map is not defined
Any help would be fantastic. It's been a long day!!
Thanks for your Help #kamlesh, I think you are right, but this is the way I finally managed to get it to work, and also for multiple maps - if anyone needs help with that, it's below.
I stripped the google.maps.event.addDomListener(window, 'load', initialize); and added the initialize to the .collapse button for when it is clicked. This way there is no need for the resize.
function initialize() {
var myLatlng = new google.maps.LatLng(55.860949,-4.244938);
var myLatlng2 = new google.maps.LatLng(51.510142,-0.143314);
var myLatlng3 = new google.maps.LatLng(51.4004236,0.0172711);
var mapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions2 = {
zoom: 16,
center: myLatlng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions3 = {
zoom: 16,
center: myLatlng3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas1'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2);
var map3 = new google.maps.Map(document.getElementById('map-canvas3'), mapOptions3);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Taylor Hopkinson Associates'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map2,
title: 'Taylor Hopkinson Associates'
});
var marker3 = new google.maps.Marker({
position: myLatlng3,
map: map3,
title: 'Taylor Hopkinson Associates'
});
}
$('#glasgow-map').on('shown.bs.collapse', function (e) {
initialize();
})
$('#london-map').on('shown.bs.collapse', function (e) {
initialize();
})
$('#bromley-map').on('shown.bs.collapse', function (e) {
initialize();
})
Perhaps there is a way of streamlining this code, but it certainly works for me.
How can I add new marker to the map? I managed to show the map function startGoogleMaps()
but my function (onclick()), does not work.
function startGoogleMaps(){
var map = new google.maps.Map(document.getElementById('canvasMap'), {
zoom: 5,
center: initCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
document.getElementById("testButton").onclick = function(){
var marker = new google.maps.Marker({
position: (37, -97),
map: map,
title:"Hello World!"});
}
Try defining the map object in the same scope as you are binding the click event:
var map = null;
function startGoogleMaps(){
map = new google.maps.Map(document.getElementById('canvasMap'), {
zoom: 5,
center: initCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
document.getElementById("testButton").onclick = function(){
var marker = new google.maps.Marker({
position: (37, -97),
map: map,
title:"Hello World!"});
}
Also note that you need to pass your position as an instance of google.maps.LatLng:
...
position: google.maps.LatLng(37, -97),
...
Keep in mind that Javascript uses functional scope. You'll need to declare map globally like so:
var map;
function startGoogleMaps(){
map = new google.maps.Map(document.getElementById('canvasMap'), {
zoom: 5,
center: initCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
document.getElementById("testButton").onclick = function(){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37, -97),
map: map,
title:"Hello World!"});
}
In addition, the marker itself may be outside the scope of your map, so you can use map.fitBounds to display it properly:
document.getElementById("testButton").onclick = function(){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37, -97),
map: map,
title:"Hello World!"});
var latlngbounds = new google.maps.LatLngBounds();
latlngbounds.extend(new google.maps.LatLng(37, -97));
map.fitBounds(latlngbounds);
}