I have a php application that stores Lng-Lat Coordinates to my database.
I would like to show all these places to a google map.
Edit: I have 6000 coordinates, I would like to do this in some way automatically.
Thank you
There are articles for that, which you can find nice and easily on Google
https://developers.google.com/maps/articles/phpsqlajax_v3
If you have several locations, you can use the following code:
var coords = [
[40.980542, 55.111786],
[42.329036, 55.222452],
[44.280249, 54.333]
];
function initialize() {
var myLatlng = new google.maps.LatLng(coords[0][0], coords[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 < coords.length; i++) {
var latlng = new google.maps.LatLng(coords[i][0], coords[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "marker : " + (i + 1)
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Check out a working example in JSfiddle.
Also, take a look at Google Places API.
Its a service that returns information about Places using HTTP requests
Related
I've got a mysql-table with user data inside. Among them there are latitude/longitude position values. (as two separate values) To create a marker out of them this should work:
function initialize() {
var myLatlng = new google.maps.LatLng(**LATITUDE HERE**,**LONGITUDE HERE**);
var mapOptions = {
zoom: 4,
center: somewhere,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I'd now like to place a single marker for every user on a map. How can I get the lat/lng values from the table for all users and finally place all those markers? So basically, how does this loop work?
Thanks a lot!
Loop will work as follows, considering I have an array of users location of following form
locations[0] = new Array("latitude" => "lat", "longitude" => "lng");
then loop will be as follows
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i]["latitude"], locations[i]["longitude"]), map: map});
}
Here is the Initialise function.....
function initialize() {
Here the variables $Latitude,$Longitude are array values so how can i store them in Javascript Variables so that they can store the above array values....
var lat='<?php echo $Latitude?>';
var lon='<?php echo $Longitude?>';
var latlng = new google.maps.LatLng(lat,lon);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Here how can i loop the geocoder to show multiple areas using above array variables...
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hello World!"
});
}
Its my sample code to plot multiple areas in google map by using area name or lat,lng.
var map;
var geocoder;
var marker;
var people = new Array();
var latlng;
var infowindow;
$(document).ready(function() {
ViewCustInGoogleMap();
});
function ViewCustInGoogleMap() {
var mapOptions = {
center: new google.maps.LatLng(11.0168445, 76.9558321), // Coimbatore = (11.0168445, 76.9558321)
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Get data from database. It should be like below format or you can alter it.
var data = '[{ "DisplayText": "adcv", "ADDRESS": "Jamiya Nagar Kovaipudur Coimbatore-641042", "LatitudeLongitude": "10.9435131,76.9383790", "MarkerId": "Customer" },{ "DisplayText": "abcd", "ADDRESS": "Coimbatore-641042", "LatitudeLongitude": "11.0168445,76.9558321", "MarkerId": "Customer"}]';
people = JSON.parse(data);
for (var i = 0; i < people.length; i++) {
setMarker(people[i]);
}
}
function setMarker(people) {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
if ((people["LatitudeLongitude"] == null) || (people["LatitudeLongitude"] == 'null') || (people["LatitudeLongitude"] == '')) {
geocoder.geocode({ 'address': people["Address"] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: false,
html: people["DisplayText"],
icon: "images/marker/" + people["MarkerId"] + ".png"
});
//marker.setPosition(latlng);
//map.setCenter(latlng);
google.maps.event.addListener(marker, 'click', function(event) {
infowindow.setContent(this.html);
infowindow.setPosition(event.latLng);
infowindow.open(map, this);
});
}
else {
alert(people["DisplayText"] + " -- " + people["Address"] + ". This address couldn't be found");
}
});
}
else {
var latlngStr = people["LatitudeLongitude"].split(",");
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
latlng = new google.maps.LatLng(lat, lng);
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: false, // cant drag it
html: people["DisplayText"] // Content display on marker click
//icon: "images/marker.png" // Give ur own image
});
//marker.setPosition(latlng);
//map.setCenter(latlng);
google.maps.event.addListener(marker, 'click', function(event) {
infowindow.setContent(this.html);
infowindow.setPosition(event.latLng);
infowindow.open(map, this);
});
}
}
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7IZt-36CgqSGDFK8pChUdQXFyKIhpMBY&sensor=true" type="text/javascript"></script>
<div id="map-canvas" style="width: 800px; height: 500px;">
</div>
This should work for you assuming lat and lon are javascript arrays with the same length:
var map = null;
function initialize() {
var lat='<?php echo $Latitude?>';
var lon='<?php echo $Longitude?>';
// initialize map center on first point
var latlng = new google.maps.LatLng(lat[0],lon[0]);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds = new google.maps.LatLngBounds();
for (var i=0, i<lat.length; i++) {
var latlng = new google.maps.LatLng(lat[i],lon[i]);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hello World!"
});
}
// zoom and center the map to show all the markers
map.fitBounds(bounds);
}
<?php
/* lat/lng data will be added to this array */
try{$work=$_GET["service"];}catch(Exception $e){echo 'Authorization Failed.Map may Misbehave or Buggy.Click here to report this';}
$locations=array();
$uname="root";
$pass="";
$servername="localhost";
$dbname="bcremote";
$db=new mysqli($servername,$uname,$pass,$dbname);
$query = $db->query('SELECT * FROM location');
while( $row = $query->fetch_assoc() ){
$name = $row['uname'];
$longitude = $row['longitude'];
$latitude = $row['latitude'];
/* Each row is added as a new array */
$locations[]=array( 'name'=>$name, 'lat'=>$latitude, 'lng'=>$longitude );
}
//echo $locations[0]['name'].": In stock: ".$locations[0]['lat'].", sold: ".$locations[0]['lng'].".<br>";
//echo $locations[1]['name'].": In stock: ".$locations[1]['lat'].", sold: ".$locations[1]['lng'].".<br>";
?>
<script>
//var myLatLng = {lat: -25.363, lng: 131.044};
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
scrollwheel: false,
zoom: 4
});
<?php for($i=0;$i<sizeof($locations);$i++)
{ ?>
var marker = new google.maps.Marker({
map: map,
position: {lat: <?php echo $locations[$i]['lat']?>,lng: <?php echo $locations[$i]['lng']?>},
title: 'Service'
});
<?php } ?>
}
</script>
This code Snippet uses Dynamic Content without using JSON or XML. This below code is what we see in the Browser View Source tool. Hope this helps you...
<script>
//var myLatLng = {lat: -25.363, lng: 131.044};
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
scrollwheel: false,
zoom: 4
});
var marker = new google.maps.Marker({
map: map,
position: {lat: 192.652.231.25,lng: 192.652.231.25},
title: 'Service'
});
var marker = new google.maps.Marker({
map: map,
position: {lat: 192.652.231.25,lng: 192.652.231.25},
title: 'Service'
});
}
</script>
UPDATE 2017
Google maps now supports the creation of maps with multiple locations which you can embed via iframe! Source: https://www.create.net/support/218-how-to-pin-point-multiple-locations-on-google-maps.html
Go to https://www.google.com/maps
Make sure you're signed in - you can do so by clicking the Login button in the top-right corner.
In the top left corner, next to the search box, click the menu icon to expand the menu
Click "Your Places", "Maps" and then click "Create Map" to edit your map.
A new window will pop up. Give your map a title and description, then click "Save".
You can now pinpoint locations manually by clicking the marker icon and placing it directly onto the map, or search for locations using the search box at the top of the screen.
If you're adding locations manually, you can name the location and save to add it to the map. If you're searching and adding specific locations, a green marker will appear on the map and you can click the 'Add to map' link.
Repeat steps 6 and 7 for each location you wish to plot.
Once you have done that save your map again and refresh the page. Then, to get the code to embed your map on to your Create website, please follow these steps:
Make sure you map is public. You can do this by clicking 'Share' beneath the map name.
Under 'Who has access' click 'Change' and make turn it 'On - Public on the web' and save.
Next, click the menu icon and click on the link 'Embed on my site'
The code will then pop up in a new window.
To use this, you will need to paste the code into an HTML fragment on your Create account, and then place the HTML fragment on your chosen page.
Example:
<iframe src="https://www.google.com/maps/d/embed?mid=1tX88xmVMIFW9DQneDff_ZMJtekc" width="100%" height="480"></iframe>
I am using v2 API of Google maps and we are giving a suggested address depending on accuracy I am getting on the geocode request. But in v3 the response is totally different from v2 API. Any idea on how to get suggested locations from v3 API for the user?
This may help you : Just you need to pass latitude and longitude, by latitude and longitude you will get good location.
function initialize(latitude,longitude) {
var geocoder;
var map;
var markers;
geocoder = new google.maps.Geocoder();
var place;
var latlng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 21,
center: latlng,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map
});
for (i = 0; i < marker.length; i++) {
markers = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][0], markers[i][1]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
If you stack then reply me.
I'm using Google Maps V3 API and after creating several markers on the map, I am having difficulty getting the map to zoom out such that it shows all markers. Right now the code below just shows the markers without adjusting the zoom. Can you find the mistake in there? Thanks!
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(1.289566,103.847267);
var options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(1.289566,103.847267),
map: map,
icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ff776b"
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(1.301224,103.912949),
map: map,
icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ff776b"
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(1.293150,103.827164),
map: map,
icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=3|ff776b"
});
var LatLngList = array (
new google.maps.LatLng(1.289566,103.847267),
new google.maps.LatLng(1.301224,103.912949),
new google.maps.LatLng(1.293150,103.827164)
);
var bounds = new google.maps.LatLngBounds();
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
bounds.extend(LatLngList[i]);
}
map.fitBounds(bounds);
}
</script>
This:
var LatLngList = array (
new google.maps.LatLng(1.289566,103.847267),
new google.maps.LatLng(1.301224,103.912949),
new google.maps.LatLng(1.293150,103.827164)
);
is not how you create an array in JavaScript. Instead, try:
var LatLngList = [
new google.maps.LatLng(1.289566,103.847267),
new google.maps.LatLng(1.301224,103.912949),
new google.maps.LatLng(1.293150,103.827164)
];
Where you are defining LatLngList you have an error. The proper code should be:
var LatLngList = new Array();
Not:
var LatLngList = array();
Am having a problem showing a map.
I have a collection of markers (from a db via php and json) and i want the center and the zoom for the map applied relative to all of the markers; Thats why am not setting the center and the zoom on the map and using the LatLngBounds object. Thing is, its not working.
This is the javascript code:
var jsonURL="http://localhost/gpsdev/db2json.php";
var map;
function init(){
var options = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
scaleControl:true,
streetViewControl:false,
zoom:12,
center: new google.maps.LatLng(-25.973728,32.582745)
};
var mapBounds= new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById('map'), options);
$.getJSON(jsonURL,{cli:"1"}, function(data){
for (var i = 0; i < data.length; i++) {
var point = new google.maps.LatLng(data[i].Latitude,data[i].Longitude);
mapBounds.extend(point);
new google.maps.Marker({
position: point,
map: map,
title:data[i].PlateNR
});
}
});
map.fitBounds(mapBounds);
}
window.onload=init;
if i remove the zoom and center it doesnt work. this is the json am inputting on the javascript:
[
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.973728\",\"Longitude\":\"32.582745\",\"Velocity\":\"0.000\",\"Ignition\":\"0\",\"ClientName\":\"Sergio\"},
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.972456\",\"Longitude\":\"32.578968\",\"Velocity\":\"10.000\",\"Ignition\":\"1\",\"ClientName\":\"Sergio\"},
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.970083\",\"Longitude\":\"32.580879\",\"Velocity\":\"80.000\",\"Ignition\":\"1\",\"ClientName\":\"Sergio\"},
{\"VehicleID\":\"1\",\"ClientID\":\"1\",\"PlateNR\":\"MMA-01-01\",\"Type\":\"Ligeiro\",\"Latitude\":\"-25.968191\",\"Longitude\":\"32.577724\",\"Velocity\":\"90.000\",\"Ignition\":\"1\",\"ClientName\":\"Sergio\"}
]
What am doing wrong here?
$.getJSON(jsonURL,{cli:"1"}, function(data){
for (var i = 0; i < data.length; i++) {
var point = new google.maps.LatLng(data[i].Latitude,data[i].Longitude);
mapBounds.extend(point);
new google.maps.Marker({
position: point,
map: map,
title:data[i].PlateNR
});
}
// this is where you should call map.fitBounds()
map.fitBounds(mapBounds);
});
// move the following line from its existing location to inside $.getJSON call
// map.fitBounds(mapBounds);
Check this tutorial: http://www.svennerberg.com/2008/11/bounding-box-in-google-maps/, but be careful its not about the latest API (v3).