how to add marker in google map? [duplicate] - javascript

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.

Related

Google Map marker not showing after uploading to server, locally works fine

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';

Google Maps - displays blank when browser language changed

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>

Google Maps API - renders static map rather than dynamic

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);

How to add multiple markers for single location on Google Map

I'm using Google Maps version 3 and would like to add two markers for a single location on the map.
One would be the default marker which appears with Google Maps, but second would show the name of the brand associated with that location.
My code is
function initialize() {
var filterLatlng = new google.maps.LatLng(18.928184,72.832601);
var mapOptions = {
center: filterLatlng,
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker = new google.maps.Marker({
position: filterLatlng,
title:"Filter Shop"
});
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
marker.setMap(map);
}
You probably want this library:
http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303
It will allow you to add a label on the map.
That label will be attached to a hidden marker like you described.
The use is quite simple you should be able to figure it out quite easy.

google maps API v3 set marker and get point

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).

Categories