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);
}
Related
I have this part of code, that should show pins on google map of certain locations.
<script>
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Sarajevo', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&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,
icon: "http://i.imgur.com/DOd1sH3.png"
});
});
}
});
<div id="map_canvas"></div>
Map shows up and everything works, but the pins of locations are not shown.
I really dont know why.
Seems like you are calling the constructor without a reference to a variable.
Try this:
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "http://i.imgur.com/D0d1sH3.png"
});
Alternatively you can set the markers to the map by calling the setMap function
var marker = new google.maps.Marker({
position: latlng,
icon: "http://i.imgur.com/D0d1sH3.png"
});
marker.setMap(map);
Hope this helps
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.
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
Trying to add a marker to a google map on a contact page I've created. Map renders fine but marker does not appear. Heres my code:
function initialize() {
var latlng = new google.maps.LatLng(-43.51187,172.621192);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
NSMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Add Marker Location
function NSMarker() {
NSArchitects = new google.maps.LatLng(-43.51187,172.621192);
addMarker(NSArchitects);
}
declare var map outside of initialize() function
var map; // declare globel
function initialize() {
var latlng = new google.maps.LatLng(-43.51187,172.621192);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
NSMarker();
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Add Marker Location
function NSMarker() {
NSArchitects = new google.maps.LatLng(-43.51187,172.621192);
addMarker(NSArchitects);
}
How to plot more number of markers in google map
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
var latt=[13.0423734,12.918907];
var lang=[80.2727993,80.145264];
for(i=0; i<latt.length;i++)
{
initialize(latt[i],lang[i]);
}
});
function initialize(lat,lng)
{
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
}
</script>
Use arrays.
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
var latt=[13.0423734,12.918907];
var lang=[80.2727993,80.145264];
initialize(latt, lang);
});
function initialize(lat_arr,lng_arr)
{
// Assuming first array element is where you want the map centered
var latlng = new google.maps.LatLng(lat_arr[0],lng_arr[0]);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var markers = [];
// start i at 0 if you want a marker at the center as well
for(var i = 1; i < lat_arr.length; i++) {
latlng = new google.maps.LatLng(lat_arr[i], lng_arr[i]);
markers[i] = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
}
}