I am adding a google map to my site, and i've added exactly the same code as from the google maps api documentation but my map appears as a static map without marker (with the correct center point which is a good start) instead of a dynamic draggable map with marker and controllers.
Any ideas what I'm doing wrong? Code is below although I'm fairly sure the code is fine since it's straight from the google maps api site.
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);
Related
This question already has answers here:
Add Marker function with Google Maps API
(5 answers)
Closed 3 years ago.
I am new to use javascript, anybody can help me to add a marker in the map?
<script src="http://maps.googleapis.com/maps/api/js ......
<script>
var myMap;
var myLatlng = new google.maps.LatLng(-7.797068, 110.370529);
function initialize() {
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP ,
scrollwheel: false
}
myMap = new google.maps.Map(document.getElementById('map'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This is my code to call google map, and I tried to add a marker in the map.
Just read Google maps documentation
For adding marker you need to call Marker object from google maps API and give relevant properties
var marker = new google.maps.Marker({
position: myLatLng, // For position your marker
map: map, //For your google map element
});
And one important thing.
Google maps api source script tag must be after your js code not before.
I'm trying to implement a simple page that have google maps enabled, but I'm having an issue where my google maps marker is not showing after uploading the files to the hosting, it works fine locally.
I tried both using a custom marker and the default one, the issue is the same, it works locally but doesn't after uploading.
Here's the script I'm using
/*GOOGLE MAPS*/
function initialize() {
// Declare map style
var grayscale = [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}];
var mapOptions = {
center: {lat: 46.211000, lng: 16.913157},
zoom: 13,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Change map style
map.setOptions({styles: grayscale});
var image = 'img/vemo-google-map-marker.png';
var marker = new google.maps.Marker({
position: {lat: 46.211000, lng: 16.913157},
map: map,
title: "VEMO TRADE d.o.o.",
icon: image,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You need to specifiy whole absolute path here:
var image = '//YOUR_DOMAIN/img/vemo-google-map-marker.png';
I display a google map on a web page, based on latitude and longitude. All works fine. But if I change my browser language to any language (e.g. French, German) from the default English, then the map goes blank (google map box displayed, but no map).
I tried adding language=en to the script link; makes no difference. Anyone who can shed some light?
Code is shown below:-
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng("50.00123", "0.012311");
var mapOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('mapdiv'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Event Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I enter the coordinates of antwerp in my JavaScript code to place a marker on the map , but when I test it in my browser it places a marker in the middle of the map and if I zoom in it becomes more accurate until the marker is at the right place ... what am I doing wrong ??
The marker is not at the right place when zoomed out but it is when I zoom in. thanks in advance!
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.2239721,4.413785),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var myLatlng = new google.maps.LatLng(51.2239721,4.413785);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"ap hogeschool"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can use google map latlngBounds as the code below will do that. u may need to read this
here
var locBounds = new google.maps.LatLngBounds();
locBounds.extend(LatLng1);
locBounds.extend(latlng2);
map.fitBounds(locBounds);
I have a problem to set marker and get latitude and longitude for that marker. How can I do that in google maps v3 API
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("divGoogleMaps"), myOptions);
google.maps.event.addListener(map, 'click', function() {
});
this is my start code.
You should check Google Maps API doc web-site they have a fex example to help you started.
http://code.google.com/apis/maps/documentation/javascript/basics.html
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
Here you set a marker and get the position.
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
Taken directly from Google Maps API v3
If you want to attach an event listener to the marker, it is advisable to do it right after you add it to the map, while you still have a fresh reference to it (in the case where you're potentially looping through some marker adding code, as is common).