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);
}
Related
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
I can not get the marker to show up on the map. Can anyone help me find out what is wrong that would be a huge help?
Here is the code:
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(33.748995, -84.387982);
var mapOptions = {
center: myLatlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(map_canvas, mapOptions);
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() {
Atlanta = new google.maps.LatLng(33.748995, -84.387982);
addMarker(Atlanta);
}
google.maps.event.addDomListener(window, 'load', initialize);
You appear to be missing the var keyword in front of the marker and Atlanta variables. To fix, I would also declare the map, marker and Atlanta variables outside of the initialize() function in the global space, so they are accessible to other functions. Try this:
var map;
var marker;
var Atlanta;
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(33.748995, -84.387982);
var mapOptions = {
center: myLatlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(map_canvas, mapOptions);
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() {
Atlanta = new google.maps.LatLng(33.748995, -84.387982);
addMarker(Atlanta);
}
google.maps.event.addDomListener(window, 'load', initialize);
i want to make a google maps that shows the current location of the user and it should also be possible that the user can click on the map to add markers. i can do them separately but it fails when i try to combine them.
this is my code for the geolocation
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '500px';
mapcanvas.style.width = '600px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
and this is my code to add markers to the map.
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
check out the folllowing link..the example in it will help you surely.worked for me too.
http://www.codeproject.com/Articles/291499/Google-Maps-API-V3-for-ASP-NET
I have the following Javascript that includes both the standard Google Maps API initialize() function and custom addMarker() function. The map will load fine however the marker does not get added to the map.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.779502, -73.967857);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
CentralPark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(CentralPark);
</script>
You have added the add marker method call outside the function and that causes it to execute before the initialize method which will be called when google maps script loads and thus the marker is not added because map is not initialized
Do as below....
Create separate method TestMarker and call it from initialize.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.779502, -73.967857);
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() {
CentralPark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(CentralPark);
}
</script>
function initialize() {
var location = new google.maps.LatLng(44.5403, -78.5463);
var mapCanvas = document.getElementById('map_canvas');
var map_options = {
center: location,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
THis is other method
You can also use setCenter method with add new marker
check below code
$('#my_map').gmap3({
action: 'setCenter',
map:{
options:{
zoom: 10
}
},
marker:{
values:
[
{latLng:[position.coords.latitude, position.coords.longitude], data:"Netherlands !"}
]
}
});
<div id="map" style="width:100%;height:500px"></div>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 5};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
Below code works for me:
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(51.528308, -0.3817765);
function initialize() {
var mapProp = {
center:myCenter,
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
icon: {
url: '/images/marker.png',
size: new google.maps.Size(70, 86), //marker image size
origin: new google.maps.Point(0, 0), // marker origin
anchor: new google.maps.Point(35, 86) // X-axis value (35, half of marker width) and 86 is Y-axis value (height of the marker).
}
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
Reference link
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!"
});
}
}