I created google maps with Json and used database postgresql
this is my code
<script type="text/javascript">
var map;
var national = [{"lng":"-6.173319","city":"JAKARTA","lat":"106.818672"}];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-0.789275,113.921327),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.getJSON('json_city.json', function(data) {
$.each( data.national, function(index, item) {
var myLatlng = new google.maps.LatLng(item.lat, item.lng);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "text "+item.city
});
});
});
// Initialize the map
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Lat and long used character type (Text). My maps can show, but my marker can't show.
Google Maps needs coordinates for the LatLng constructor to be Numbers, not strings. Try:
var myLatlng = new google.maps.LatLng(parseFloat(item.lat), parseFloat(item.lng));
Related
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 am using the gem "geocoder" to get the lang and long from a address but I cant seem to be able to get a marker on my map
- lat_long = Geocoder.coordinates(Mode.full_address).to_s.gsub('[', '').gsub(']', '')
%script{:src => "https://maps.googleapis.com/maps/api/js?v=3.exp"}
:javascript
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(#{lat_long})
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
This places the map where it should be but it does not give me a marker
Add a google.maps.Marker.
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(#{lat_long})
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Create a marker on map center
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I am working on google maps api on web
This is my code
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);
Just the map is shown but the marker is not, why please?
I have a second question please. What is the best action the user expect to click (or do) what they want to add a marker on the map?
Thanks
Maybe you used the ID wrong.
JS:
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);
Demo : http://jsfiddle.net/lotusgodkk/x8dSP/3523/
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);
I have the following Javascript that includes both the standard Google Maps API initialize() function and custom addMarker() function. The map will load fine however the marker does not get added to the map.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.779502, -73.967857);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
CentralPark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(CentralPark);
</script>
You have added the add marker method call outside the function and that causes it to execute before the initialize method which will be called when google maps script loads and thus the marker is not added because map is not initialized
Do as below....
Create separate method TestMarker and call it from initialize.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.779502, -73.967857);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
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() {
CentralPark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(CentralPark);
}
</script>
function initialize() {
var location = new google.maps.LatLng(44.5403, -78.5463);
var mapCanvas = document.getElementById('map_canvas');
var map_options = {
center: location,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
THis is other method
You can also use setCenter method with add new marker
check below code
$('#my_map').gmap3({
action: 'setCenter',
map:{
options:{
zoom: 10
}
},
marker:{
values:
[
{latLng:[position.coords.latitude, position.coords.longitude], data:"Netherlands !"}
]
}
});
<div id="map" style="width:100%;height:500px"></div>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 5};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
Below code works for me:
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(51.528308, -0.3817765);
function initialize() {
var mapProp = {
center:myCenter,
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
icon: {
url: '/images/marker.png',
size: new google.maps.Size(70, 86), //marker image size
origin: new google.maps.Point(0, 0), // marker origin
anchor: new google.maps.Point(35, 86) // X-axis value (35, half of marker width) and 86 is Y-axis value (height of the marker).
}
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
Reference link