Develop Reference

How to display business on embedded google map

I try to include a business on to my embedded map, however I could not do it for my life! :D
This is what I got so far:
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 47.7914, lng: 22.87691};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYMAPAPIlanguage=hu&callback=initMap">
</script>
and I want to include this business:
https://www.google.co.uk/maps/place/Boitor+Orsolya,+Cabinet+Medical+Individual/#47.7914061,22.8747236,17z/data=!3m1!4b1!4m12!1m6!3m5!1s0x473805cc6d46a92d:0x18460661870adb34!2sBoitor+Orsolya,+Cabinet+Medical+Individual!8m2!3d47.7914061!4d22.8769123!3m4!1s0x473805cc6d46a92d:0x18460661870adb34!8m2!3d47.7914061!4d22.8769123
All I can find online is using iframes, which I would avoid because of speed.
thanks
As a reference, this is what I want to achieve without iframes:

The only thing you need is to add your desired coordinates to add a marker and to center the map. Like here. You can also add a infoWindow to describe a little more what is on that place.
/*
* create map
*/
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.791846, 22.876955), // <--- I found these are the coordinates for the place you mentioned
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
/*
* create infowindow (which will be used by markers)
*/
var infoWindow = new google.maps.InfoWindow();
Check this link to see the map running

Use infoWindow
var map = new google.maps.Map(element, {
center: {lat: lat, lng: lng}, //location of the map center
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
//Location of your object
var pos = {
lat: lat,
lng: lng
};
infoWindow.setPosition(pos);
infoWindow.setContent('Business'); //Name of the infowindow
Here is what it would look like

adding marker on google map when i click button

i want to add marker on a google map where by my ng-click pass the object which have latitude and longitude so that it will put the marker to the map.....any help plz
example code
HTML
<a class="button icon icon-right ion-location" href="location.html" ng-click="search_item(item)">
call function
$scope.search_item = function (item){
lat = item.lat;
lng = item.lng
}
marker code
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
zoom: 15,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});

This question seems to have been answered here and an example can be found in googles documentation here
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}

What is not working is not clear, however...
Assuming have map loaded:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
async></script>
<script>
note async and callback=initMap, put a var map at top to allow easier later use
//add global variable for map
var map;
// Initialize and add the map mon callback when goole.map api loaded
function initMap() {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.036 };
// Create the map and store in global variable
map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
}
Then when call the function from the button it using the map varable rather than trying to create a new on
function placeMarker(myLatlng){
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!",
});
});
Then your function call code on button click.
$scope.search_item = function (item){
lat = item.lat;
lng = item.lng
latLng = new google.maps.LatLng(lat, lng);
placeMarker(latLng);
}

Adding Marker to Google Map

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

Google maps api marker not showing

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

provide a list of latitudes and longitudes to my google map to visualize them with markers

In my project, I have a database containing a list of latitudes and longitudes, corresponding to several addresses, and I want to take them from this database and pass them to a javascript code that will show all these addresses in a map using markers. So far I got all the list from the database. and I was able to visualize one and only one address in the map by using it's latitude and longitude. So what I am struggeling with now is doing so for multiple addresses. Here is the code that I came up with so far:
function initialize() {
var myLatlng = new google.maps.LatLng(locations[0], locations[1]);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Fast marker"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
locations is the list of my latitudes and longitudes, and it goes like this:
locations[0]: latitude 1
locations[1]: longitude 1
locations[2]: latitude 2
locations[3]: longitude 2 etc..
Now I know there is supposed to be some kind of loop but I couldn't manage to do it.
Thanks in advance!
P.S: This is my first question so don't judge my accept rate! :)

You just need to write a for loop as follows:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(locations[0], locations[1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i = 0, ln = locations.length; i < ln; i += 2) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i], locations[i + 1]);
map: map,
title: "Fast marker"
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);​

You can write a simple for loop to iterate through locations. Increment two at a time:
var map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i=0 ; i < locations.length-1 ; i+=2) {
var lat = locations[i];
var lng = locations[i+1];
var myLatlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Fast marker"
});
}

I got the solution. if anybody needs it in the future here is the code:
function initialize() {
console.log('hi');
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(locations[0], locations[1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i = 0, ln = locations.length; i < ln; i += 2) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i], locations[i + 1]),
map: map,
title: "Fast marker"
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);

If you have an array of locations like following
var locations = [
[33.890542, 150.274856],
[36.923036, 152.259052],
[38.028249, 154.157507]
];
then you can use following code
function initialize() {
var myLatlng = new google.maps.LatLng(locations[0][0], locations[0][1]);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
for(var i=0;i<locations.length;i++)
{
var latlng=new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "marker : "+(i+1)
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Working Example.
You may need/like other Google map related answers here.