create google maps marker from json in ionic

create google maps marker from json in ionic - javascript

i want to make google maps marker from my json: http://devonder.pe.hu/api/index.php
i use factory like this
.factory('Markers', function($http) {
var markers = [];
return {
getMarkers: function(){
return $http.get("http://devonder.pe.hu/api/index.php").then(function(response){
markers = response;
return markers;
});
}
}
})
and my controller like this
.controller('mapsctrl', function() {
var myLatLng = {lat: 1.443306, lng: 125.182833};
var myLatLng2 ={lat: 1.440444, lng: 125.117778};
var fasilitas =Markers.getMarkers();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: myLatLng
});
var infoWindow = new google.maps.InfoWindow(), marker, i;
for( i = 0; i < fasilitas.length; i++ ) {
var obj=fasilitas[i];
// var gas[0];
var judul
var position = new google.maps.LatLng(obj.latitude, obj.longitude);
//bounds.extend(position);
//var myLatLngg = {lat: [3][1], lng: [3][2]};
var marker = new google.maps.Marker({
position: position,
map: map,
title: obj.nama,
icon: 'img/marker/'+obj.id_kategori +'.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var judul = fasilitas[i]
infoWindow.setContent('<h5>'+judul.nama+'</h5><b>Alamat: </b>'+judul.alamat+' <br><b>Buka: </b>'+judul.jadwal_praktek+' <br><b>No Telp: </b>'+judul.no_telp+' ');
infoWindow.open(map, marker);
}
})(marker, i));
}
})
and it's not work.

Looks like you are using the Markers factory without injecting it to your controller
app.controller('mapsctrl',['Markers', function(Markers){
var myLatLng = {lat: 1.443306, lng: 125.182833};
var myLatLng2 ={lat: 1.440444, lng: 125.117778};
var fasilitas =Markers.getMarkers();
--- Rest of your code ---
}]);
// or
app.controller('mapsctrl',function(Markers){
var myLatLng = {lat: 1.443306, lng: 125.182833};
var myLatLng2 ={lat: 1.440444, lng: 125.117778};
var fasilitas =Markers.getMarkers();
--- Rest of your code ---
});
The controller requests a $http and returns the value on success which is a promise so you should use it like this
.controller('mapsctrl', function() {
var myLatLng = {lat: 1.443306, lng: 125.182833};
var myLatLng2 ={lat: 1.440444, lng: 125.117778};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: myLatLng
});
Markers.getMarkers().then(function(fasilitas){
// var map = new google.maps.Map(document.getElementById('map'), {
// zoom: 16,
// center: myLatLng
// });
var infoWindow = new google.maps.InfoWindow(), marker, i;
for( i = 0; i < fasilitas.length; i++ ) {
var obj=fasilitas[i];
// var gas[0];
var judul
var position = new google.maps.LatLng(obj.latitude, obj.longitude);
//bounds.extend(position);
//var myLatLngg = {lat: [3][1], lng: [3][2]};
var marker = new google.maps.Marker({
position: position,
map: map,
title: obj.nama,
icon: 'img/marker/'+obj.id_kategori +'.png'
// visible : true
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var judul = fasilitas[i]
infoWindow.setContent('<h5>'+judul.nama+'</h5><b>Alamat: </b>'+judul.alamat+' <br><b>Buka: </b>'+judul.jadwal_praktek+' <br><b>No Telp: </b>'+judul.no_telp+' ');
infoWindow.open(map, marker);
}
})(marker, i));
}
});
});

Related

Is there a way to add location to the label of a marker that is randomly placed in google maps with javascript?

Is it possible to add the LatLng to the label of the marker that is placed at random to show where that marker is? Also considering the infoWindow option but have not been successful yet.
var map;
var markers = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markersIndex = 0;
function initialize() {
var Wilm = new google.maps.LatLng(34.2257,-77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map-
canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
label: markers[markersIndex++ % markers.length],
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);

Not sure what you mean by a label.
this will add markers to the map with an info window with the latlng:
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), 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
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), 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
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap">
</script>

Google Map after load make ajax request

is there any way to know if google map is loaded ? i need to make an ajax request after map is loaded
Currently i am displaying a set of users in a map with a info window. but the problem is due to too much data the browser gets stuck.
var infowindow;
var markersLongLat = {$markersLongLat};
var geocoder = new google.maps.Geocoder();
var markerImg = '{$markerImg}';
function initialize() {
if(hasFilter == 1){
var zoom = 2;
var myLatlng = new google.maps.LatLng(0, 0);
if('' != markersLongLat){
var myLatlng = new google.maps.LatLng(markersLongLat[0].lat, markersLongLat[0].long);
var zoom = 5;
}
var myOptions = {
zoom: zoom,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
else{
var myLatlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map(document.getElementById('googleMap'), myOptions);
console.log('map loaded successfully');
// Adding longLat markers
if ('' != markersLongLat) {
console.log('markersLongLat');
for (var x = 0; x < markersLongLat.length; x++) { var person = new Object();
person.id = markersLongLat[x].id
person.name = markersLongLat[x].name
person.lat = markersLongLat[x].lat
person.long = markersLongLat[x].long
person.address = markersLongLat[x].address
codeLongLat(person);
}
}
function codeLongLat(markersLongLat) {
var lat = markersLongLat.lat;
var long = markersLongLat.long;
var name = markersLongLat.name;
var info = markersLongLat.info;
var markerObj = new MarkerWithLabel({
map: map,
position: new google.maps.LatLng(lat, long),
title: name,
labelContent: name,
labelClass: 'marker-labels',
icon:markerImg
});
google.maps.event.addListener(markerObj, 'click', function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: info});
infowindow.open(map, markerObj);
});
}
google.maps.event.addDomListener(window, 'load', initialize);

I think you are looking for this..
google.maps.event.addListenerOnce(map, 'idle', function(){
//loadedFully
});
For more see this.

google map api V3 markers

I am having a problem with google maps, I cant put markers on some location. My idea was to find my location and to put marker on it, then to put markers on other locations but the markers on other locations are not showing on a map.
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
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: "Vasa lokacija"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}

The main problem with your function is that your marker adding loop is outside success function, so it never gets called. You also had an extra }at the end of your code. Here is a full solution jsfiddle
var map;
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
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
};
map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Vasa lokacija"
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
} //success fn ENDS
var position = {
coords: {
latitude: 44.766666699999990000,
longitude: 17.183333299999960000
}
};
success(position);

the main problem with your code is you are plotting the marker before the map is loaded because it is out side of your function success.try this:I have use static value for center you can change it as per your code.
$(document).ready(function () {
success(position);
});
var position = { // suppose this is your position
coords: {
latitude: 44.666666699999990000,
longitude: 17.183333299999960000
}
};
var map;
var marker, i;
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
document.getElementById('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 8,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapcontainer"), options);
marker = new google.maps.Marker({
position: coords,
map: map,
title: "Vasa lokacija"
});
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', function (marker, i) {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
});
}
}

how to center the map on current user location (geolocation

I have this code that I want to center on user location because now it centers it it under the coordinates that I have (above Copenhagen, Denmark) and it's fixed. I need to make my code to center the map on the user location and to show the points around it
function initialize() {
var locations = [
['kastelet', 55.6911, 12.5939],
['norebro', 55.6883, 12.5597],
['noreport', 55.6832, 12.5714],
['edisikvosi', 55.678272, 12.503643,],
['Sentosa', 55.713207, 12.526474,]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(55.6750, 12.5687),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
// Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var geolocpoint = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 8,
center: geolocpoint,
mapTypeId: google.maps.MapTypeId.HYBRID
}
// Place a marker
var geolocation = new google.maps.Marker({
position: geolocpoint,
map: map,
title: 'Your geolocation',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);

Use map.setCenter.
.....
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var geolocpoint = new google.maps.LatLng(latitude, longitude);
map.setCenter(geolocpoint );//line added for setting center
......

Google maps v3 array marker

Hy i am unable to display multiple markers in Google Maps V3, i am getting the coordinates correctly but not displays on map. Also no errors in console
map_items[0] = title
map_items[1] = 55.153766, 11.909180
map_items[2] = link
map_items[3] = text
all of them appear correctly if i do an alert.
example
"Title","51.00150763193481, -2.5659284999999272", "link", "text"
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(55.153766, 11.909180),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var x = 0; x < temp.length; x++) {
if(temp[x][1]){
var map_items = temp[x];
var myLatlng = new google.maps.LatLng(map_items[1]);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">'+map_items[0]+'<br /><p>'+map_items[3]+'</p></div>');
infowindow.open(map, marker);
});
}
}
}

google.maps.LatLng() takes two parameters, not one, so:
var latlon = map_items[1].split(',');
var myLatlng = new google.maps.LatLng(parseFloat(latlon[0]), parseFloat(latlon[1]));
though in fact, it would be better to use objects rather than an array in which each item contains different data types, for example:
marker_data[0] = {
"lat": 55.153766,
"lon": 11.909180,
"title": "My Title",
"link": "http://stackoverflow.com"
}
//etc...
and then you'd access it like this:
var myLatlng = new google.maps.LatLng(marker_data[0].lat, marker_data[0].lon);

Assuming map_items[1] is string
if (temp[x][1]) {
var map_items = temp[x];
var latlng = map_items[1].split(",");
var myLatlng = new google.maps.LatLng(parseFloat(latlng[0]), parseFloat(latlng[1]));
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">' + map_items[0] + '<br /><p>' + map_items[3] + '</p></div>');
infowindow.open(map, marker);
});
}

I think only last map_items would be available when you click on any marker. Creating a different context may solve your problem.
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(55.153766, 11.909180),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function AttachEventToMarker(marker, map_items){
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">'+map_items[0]+'<br /><p>'+map_items[3]+'</p></div>');
infowindow.open(map, marker);
});
}
for (var x = 0; x < temp.length; x++) {
if(temp[x][1]){
var map_items = temp[x];
var myLatlng = new google.maps.LatLng(map_items[1]);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
AttachEventToMarker(marker, map_items);
}
}
}

Develop Reference

JavaScript is the programming language of the Web.

create google maps marker from json in ionic - javascript

Related

Is there a way to add location to the label of a marker that is randomly placed in google maps with javascript?

Google Map after load make ajax request

google map api V3 markers

how to center the map on current user location (geolocation

Google maps v3 array marker

Categories

Resources