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
Related
I want to put markers to the specific cities that I chose but I need to do it in a for loop, manually going through the process is time-consuming and looks quite ugly on the code. Any tips to use a for loop correctly? What am I doing wrong here?
var izmir = {lat: 38.4237, lng: 27.1428};
var amsterdam = {lat: 52.3680, lng: 4.9036};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {zoom: 4,
center: izmir});
var map = new google.maps.Map(document.getElementById('map'), {zoom: 4,
center: amsterdam});
var i;
for(i=0;i.length;i++)
{
nokta = new google.maps.Marker({position: izmir,amsterdam, map: map});
}
}
EDIT: I guess I've partly achieved what I wanted, only problem is that the marker is only used by the last entry, in this case it's Prague. If I change it to another city (e.g. Amsterdam), map is centered on Amsterdam and the marker is only used by Amsterdam. How can I use the marker on all?
var sehirler = {
'izmir': {lat: 38.4237, lng: 27.1428},
'amsterdam': {lat: 52.3680, lng: 4.9036},
'prague': {lat: 50.0755, lng: 14.4378}};
function initMap() {
for (var sehir in sehirler)
{
var map = new google.maps.Map(document.getElementById('map'),
{zoom: 4, center: sehirler[sehir]});
var marker = new google.maps.Marker({position: sehirler[sehir], map: map});
}
}
EDITED based on discussion below
is this what you're looking for?
// initialize object containing all cities
var sehirler = {
izmir: { lat: 38.4237, lng: 27.1428 },
amsterdam: { lat: 52.368, lng: 4.9036 },
prague: { lat: 50.0755, lng: 14.4378 }
};
function initMap() {
// initialize main map
var center = sehirler.CITY // <-- edit CITY to be the correct city
var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: center });
// iterate throughout cities to put all markers on same map
for (var sehir in sehirler) {
var marker = new google.maps.Marker({ position: sehirler[sehir], map: map });
}
}
Hi Friends i cant able to find the solution for map-active.js file i think JS expert can do easily can u please help me i will share the map-active.js file
here only mention one location i want add one more location how it possible
...?
// google map
function initialize() {
var grayStyles =[{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
var mapOptions = {
zoom: 12,
styles: grayStyles,
hue: '#E9E5DC',
scrollwheel: false,
center: new google.maps.LatLng(9.967027, 76.243499),
};
var map = new google.maps.Map(document.getElementById('googleMap'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
animation:google.maps.Animation.BOUNCE,
icon: './assets/img/map.png',
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Like you added the first location, same way create new markers attached to same map.
var marker1 = new google.maps.Marker({
position: {lat: LOCATION_1_LAT, lng: LOCATION_1_LON},
animation:google.maps.Animation.BOUNCE,
icon: './assets/img/map.png',
map: map
});
var marker2 = new google.maps.Marker({
position: {lat: LOCATION_2_LAT, lng: LOCATION_2_LON},
animation:google.maps.Animation.BOUNCE,
icon: './assets/img/map.png',
map: map
});
Demo here: https://jsfiddle.net/sz9gkox6/
On the Google Maps javascript, there is a clickable link at the bottom left of the map with the Google icon to "See this area on Google Maps". This link opens up Google Maps, however, it only centers on the latitude/longitude provided and doesn't show the marker I provide to the API.
function initMap() {
map = new google.maps.Map(document.getElementById('gmap_holder'), {
center: {lat: 37.423021, lng: -122.083739},
zoom: 15
});
map.setOptions({draggable: false, zoomControl: true, scrollwheel: false, disableDoubleClickZoom: true});
var coord = new google.maps.LatLng(37.423021, -122.083739);
var marker = new google.maps.Marker({
position: coord,
map: map
});
}
I know there is a way to produce an URL that will show a marker, such an example would be http://maps.google.com/maps?q=loc:36.26577,-92.54324, but I can't seem to figure out from the API.
Should be:
function initMap() {
var center = {lat: 37.423021, lng: -122.083739};
var map = new google.maps.Map(document.getElementById('gmap_holder'), {
zoom: 4,
center: center
});
var marker = new google.maps.Marker({
position: center,
map: map
});
// you can set other options
}
More info:
You can find required properties here: MapOptions
Example: Simple markers
EDIT:
#Sefam, I edited your code because I saw some difference with example. I edited my answer to show where is the difference.
function initMap() {
var map = new google.maps.Map(document.getElementById('gmap_holder'), {
center: {lat: 37.423021, lng: -122.083739}, // or try:
// center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739),
zoom: 15
});
map.setOptions({draggable: false, zoomControl: true, scrollwheel: false, disableDoubleClickZoom: true});
var coord = new google.maps.LatLng(37.423021, -122.083739); // here you created instance of LatLng's class
var marker = new google.maps.Marker({
position: coord, // instead this try:
//position: {lat: 37.423021, lng: -122.083739}, // here is a difference; or try:
//position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739),
map: map
});
}
If it doesn't work check your api key and callback function:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Also check css rules: did you set height for your map?
Also I want to explain why I gave two variants of creating properties center and position:
center: {lat: 37.423021, lng: -122.083739}
center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739)
position: {lat: 37.423021, lng: -122.083739}
position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739)
In my practice I used both variants and both works.
Try combinations:
center: {lat: 37.423021, lng: -122.083739} //for var map
position: {lat: 37.423021, lng: -122.083739} //for var marker
center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) //for var map
position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) //for var marker
Hope my edited answer help you to find solution. Please, post error message from console if my answer doesn't help. With error message more easier to find solution.
PS. When I need to create Google Map I always use Google Maps APIs examples and it always works.
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);
}
I'm trying to implement a marker on a map. I can verify that the map renders correctly at the right center and zoom, but the marker does not show up.
function initMap() {
var latLng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}})
var mapOptions = {
center: latLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: latLng,
visible: true,
map: map
});
}
I've also tried the implementation of adding the marker directly using marker.setMap(map):
function initMap() {
var myLatlng = new google.maps.LatLng({{latLng.latitude}}, {{latLng.longitude}});
var mapOptions = {
zoom: 14,
center: myLatlng
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
Neither render a marker. I've noticed that even when I replace the handlebars values for latitude and longitude with numerical coordinates for testing, the marker still does not appear. Any help appreciated!
I'm testing in Chrome.
You need to use this syntax window.onload = function initMap() and you are not assigning the marker to the map marker.setMap(map);, try in this way:
window.onload = function initMap() {
//I just put some custom LatLng to make it work
var LatLng = new google.maps.LatLng(41.9026329,12.452200400000038);
var mapOptions = {
center: LatLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
};
Here you can find a working Plunker made with this code + css + html.
If you are doing it with some AngularJS, give a look at my answer to this Question by #Dorin.
Window.OnLoad W3Schools Documentation
Question Related to Window.OnLoad
If you have still some problems, just let me know.
I hope I've been helpful.