I have working on Core PHP,I have created google maps marker for single static Address, I need pass dynamic multiple name and address from database where will write query getting data from database,single address is working fine but i need multiple address and multiple google markers, how to do this please help me.
Here my code:index.php
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var map;
//alert(map);
function getData() {
$.ajax({
url: "map_api.php",
async: true,
dataType: 'json',
success: function (data) {
console.log(data);
init_map(data);
}
});
}
function init_map(data) {
var map_options = {
zoom: 14,
center: new google.maps.LatLng(data['latitude'], data['longitude'])
}
map = new google.maps.Map(document.getElementById("map"), map_options);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(data['latitude'], data['longitude'])
});
infowindow = new google.maps.InfoWindow({
content: data['formatted_address']
});
google.maps.event.addListener(marker, "click", function () {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3cIb3aYyySipxodqNJgRDUpIC17VrnXY&callback=getData" async defer></script>
</html>
Here my map_api.php file:
<?php
function get_geocode($address){
$address = urlencode($address);
$url = "http://maps.google.com/maps/api/geocode/json?address={$address}";
$resp_json = file_get_contents($url);
$resp = json_decode($resp_json, true);
//response status will be 'OK'means if able to geocode given address
if($resp['status']=='OK'){
$data_arr = array();
$data_arr['latitude'] = isset($resp['results'][0]['geometry']['location']['lat']) ? $resp['results'][0]['geometry']['location']['lat'] :'';
$data_arr['longitude'] = isset($resp['results'][0]['geometry']['location']['lng']) ? $resp['results'][0]['geometry']['location']['lng'] : '';
$data_arr['formatted_address'] = isset($resp['results'][0]['formatted_address']) ? $resp['results'][0]['formatted_address'] :'';
if(!empty($data_arr) && !empty($data_arr['latitude']) && !empty($data_arr['longitude'])){
return $data_arr;
}else{
return false;
}
}else{
return false;
}
}
echo json_encode(get_geocode('4102/4C, SRK Arcade, Tavarkere Main Road, BTM 1st Stage,Bengaluru, Karnataka 560029'));
?>
Related
How i show multiple location in google map in Codeigniter. I have one array including latitude and longitude. I want to show all the location in map.
This is my $query array passed from controller to view page,
Array (
[0] => stdClass Object ([lat] => 37.45360256419911 [lng] => -122.16470718383789)
[1] => stdClass Object ([lat] => 37.45455646705577 [lng] => -122.1653938293457)
[2] => stdClass Object ([lat] => 37.451543303913226 [lng] => -122.16745376586914)
)
i want to show all this 3 location in my map,now it's only marking 1 location.
<script>
var map;
var marker;
var infowindow;
var messagewindow;
function initMap() {
<?php
foreach($query as $row){
$lat=$row->lat;
$lng=$row->lng;
?>
var location = {lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>};
map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 13
});
var marker = new google.maps.Marker({
position: location,
map: map,
});
infowindow = new google.maps.InfoWindow({
content: document.getElementById('form')
});
messagewindow = new google.maps.InfoWindow({
content: document.getElementById('message')
});
google.maps.event.addListener(map, 'click', function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
});
<?php
}
?>
}
It works fine for me...
In controller :
function latLanLocation()
{
if($this->session->userdata('logged_in'))
{
$session_data = $this->session->userdata('logged_in');
$data['title'] = 'Create client';
$ibo = $this->session->userdata['logged_in']['ibo'];
$latLanQuery = $this->db->query('select name,latitude,longitude from distributor_clients where sponsor='.$ibo.' AND status="A" AND latitude !=0 AND longitude !=0');
$userData = $latLanQuery->result_array();
$locations='[';
foreach ($userData as $key => $row) {
$name = $row['name'];
$longitude = $row['longitude'];
$latitude = $row['latitude'];
$locations .= '["'.$name.'","'.$latitude.'","'.$longitude.'"],';
}
$locations .= ']';
$data['markers'] = $locations;
$this->load->view('location', $data);
}
else
{
redirect('login', 'refresh');
}
}
//In View folder create location.php
// Html code for Google Map Javascript API
<!DOCTYPE html>
<html>
<head>
<style>
#mapCanvas {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="mapCanvas"></div>
<script>
function initMap() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
map.setTilt(50);
var markers = <?php echo $markers; ?>
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Place each marker on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Center the map to fit all markers on the screen
map.fitBounds(bounds);
}
// Set zoom level
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
</body>
</html>
The final output:
Not tested but you could try like this. Put the php code before and generate an array of lat,lng coordinates which you convert to json for use by the initmap function. Iterate through the object members and add a new marker.
<?php
$data=array();
foreach($query as $row){
$lat=$row->lat;
$lng=$row->lng;
$data[]=array('lat'=>$lat,'lng'=>$lng);
}
$json=json_encode( $data );
?>
<script>
var map;
var marker;
var infowindow;
var messagewindow;
<?php
echo "
var json={$json};
var lat={$lat};
var lng={$lng};
"
?>
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 13
});
infowindow = new google.maps.InfoWindow({
content: document.getElementById('form')
});
messagewindow = new google.maps.InfoWindow({
content: document.getElementById('message')
});
google.maps.event.addListener( map, 'click', function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
for( var n in json ){
var obj=json[ n ];
lat=obj.lat;
lng=obj.lng;
var location = { lat:lat, lng:lng };
var marker = new google.maps.Marker({
position: location,
map: map,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
}
</script>
Using the key you provided in the comment I get an error about an invalid key and the map refuses to load at all. Using a different key however worked fine with a couple of alterations.
My db connection is mysqli and the query and processing of recordset may or may not be the same method you chose. You need to edit this according to your needs as those details were ommited from the question.
<?php
/* emulated db connection */
include __DIR__. '/db.php';
/* get markers from a table */
$sql='select `name`,`lat`,`lng` from markers limit 20';
$result=$db->query( $sql );
?>
<!--
Original question:
https://stackoverflow.com/questions/48437784/how-i-show-multiple-location-in-google-map-codeigniter/48438084?noredirect=1#comment83871602_48438084
-->
<?php
/* generate data array & convert to json */
$data=array();
/*
foreach( $query as $row ){
}
*/
while( $row=$result->fetch_object() ){
$lat=$row->lat;
$lng=$row->lng;
$name=$row->name;
$data[]=array('name'=>$name,'lat'=>$lat,'lng'=>$lng);
}
$json=json_encode( $data );
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Google maps - display markers</title>
<script>
var map;
var marker;
var infowindow;
var messagewindow;
<?php
echo "
var json={$json};
var lat={$lat};
var lng={$lng};
"
?>
function initMap() {
var location=new google.maps.LatLng( lat,lng );
map = new google.maps.Map( document.getElementById('map'), {
center: location,
zoom: 13
});
infowindow = new google.maps.InfoWindow({
content: document.getElementById('form')
});
messagewindow = new google.maps.InfoWindow({
content: document.getElementById('message')
});
google.maps.event.addListener( map, 'click', function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
for( var n in json ){
var obj=json[ n ];
lat=obj.lat;
lng=obj.lng;
name=obj.name;
var location = new google.maps.LatLng( lat, lng );
var marker = new google.maps.Marker({
position: location,
title:name,
map: map,
});
google.maps.event.addListener( marker, 'click', function() {
var content=infowindow.getContent();
content.querySelector('input[name="lat"]').value=e.latLng.lat();
content.querySelector('input[name="lng"]').value=e.latLng.lng();
content.querySelector('input[name="name"]').value=this.title;
infowindow.open( map, this );
}.bind( marker )); /* bind to THIS marker */
}
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=<API KEY>&callback=initMap'></script>
<style>
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
</style>
</head>
<body>
<div id='map'></div>
<form id='form'>
<input type='text' name='lat' />
<input type='text' name='lng' />
<input type='submit' />
</form>
<div id='message'>unknown content</div>
</body>
</html>
This code can display multi different markers. Hope this help you.
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [
// do looping here and replace LatLng value using foreach PHP.
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91539, 151.22820),
type: 'library'
},
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
source : https://developers.google.com/maps/documentation/javascript/custom-markers
using PHP & MYSQL on WordPress and Google Map API in order to retrieve data from MYSQL database and display markers with info windows on Google Map.
the problem is that i am not able to display inside the infoWindow the retrieved data from the database as the siteID WHERE it is a field in the selected table.
using the below code Markers are not showed on the Map
code :
<?php
/*
Template Name: MAP2
*/
get_header();
?>
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCquey2tCZ32jLJJDEEi2D7_RnXXyj9RTI&callback=initMap">
</script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 600px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map,currentPopup;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(33.888630, 35.495480),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
//icon: icons[feature.type].icon,
map: map
});
var popup = new google.maps.InfoWindow({
// content: feature.position.toString(),
// this line that makes the error
content: feature.info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
var features = [
<?php
global $wpdb;
$prependStr ="";
foreach( $wpdb->get_results("SELECT siteID, latitude, longitude FROM site_coordinates2", OBJECT) as $key => $row) {
$latitude = $row->latitude;
$longitude = $row->longitude;
$info = $row->siteID;
echo $prependStr;
?>
{
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
info:(<?php echo $info;?>),
}
<?php
$prependStr =",";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
</body>
</html>
<?php
get_footer();
?>
Replace round brackets with single quote against info parameter. Thanks.
i am using PHP MYSQL on WordPress with Google Map API where the code retrieve data from the MYSQL database and display markers on the map based on the existing coordinates in the database. also it display a infowindow on click Listener.
the problem is that the infow window doesn't shows any data inside of it.
can anyone one tel me where is the error?
code:
<?php
/*
Template Name: MAP2
*/
get_header();
?>
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=**********&callback=initMap">
</script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 600px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map,currentPopup;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(33.888630, 35.495480),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
//icon: icons[feature.type].icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: feature,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
var features = [
<?php
global $wpdb;
$prependStr ="";
foreach( $wpdb->get_results("SELECT siteID, latitude, longitude FROM site_coordinates2", OBJECT) as $key => $row) {
$latitude = $row->latitude;
$longitude = $row->longitude;
$info = $row->siteID;
echo $prependStr;
?>
{
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
}
<?php
$prependStr =",";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
</body>
</html>
<?php
get_footer();
?>
If I'm reading your code right, you've got an array of features that looks like:
features = [
{position: new google.maps.LatLng(1, 2)},
{position: new google.maps.LatLng(3, 4)},
// etc...
];
i.e. the array contains objects with just a position property. So you correctly refer to that when you do:
position: feature.position,
However when you try and set your infowindow content using:
new google.maps.InfoWindow({
content: feature,
maxWidth: 300
})
That won't work, because the content property is meant to be a string, not a JS object. You need to specify some text there. If you're just wanting to display the coordinates, you could do:
new google.maps.InfoWindow({
content: feature.position.toString(),
maxWidth: 300
})
to put map in my site i follow one example and it will display static markers like.
var locations = [
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
['Cronulla Beach', -34.028249, 151.157507],
['Manly Beach', -33.80010128657071, 151.28747820854187],
['Maroubra Beach', -33.950198, 151.259302]
];
i want it dynamic from mysql table. it has lat and lng. i tried this but not working
<?php
$host = "localhost";
$db_name = "aarya";
$user = "root";
$password = "";
$con = mysql_connect($host,$user,$password) or die("connection error");
mysql_select_db($db_name) or die("could't connect to database");
$query="SELECT * FROM detail";
$result=mysql_query($query);
while ($row=mysql_fetch_array($result)) {
?>
var locations = [
['<?php echo $row['name'];?>','<?php echo $row['lat'];?>','<?php echo $row['lng'];?>'],
<?php
}
?>
];
i think problem in locations array and i am new in google maps please help me.
Here is a rough example of doing this:
Your locations array:
<?php
$locations[0] = array("lat"=>"-33.890542", "long"=>"151.274856", "info" => "Bondi Beach");
$locations[1] = array("lat"=>"-33.923036", "long"=>"151.259052", "info" => "Coogee Beach");
$locations[2] = array("lat"=>"-34.028249", "long"=>"151.157507", "info" => "Cronulla Beach");
$locations[3] = array("lat"=>"-33.80010128657071", "long"=>"151.28747820854187", "info" => "Manly Beach");
$locations[4] = array("lat"=>"-33.950198", "long"=>"151.259302", "info" => "Maroubra Beach");
?>
Or you could query the database like:
<?php
$query="SELECT * FROM detail";
$result=mysql_query($query);
while ($row=mysql_fetch_array($result)) {
$locations[] = array("lat"=>$row['lat'], "long"=>$row['lng'], "info" => $row['name']);
}
?>
You can modify the above array with the values from your database.
The map:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 350px; height: 300px; border: 0px; padding: 0px; }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info)
{
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker(
{
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow(
{
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function()
{
if (currentPopup != null)
{
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function()
{
map.panTo(center);
currentPopup = null;
});
}
function initMap()
{
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 0,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
}
});
<?php foreach($locations AS $loc) { //you could replace this with your while loop query ?>
addMarker(<?php echo $loc["lat"]; ?>, <?php echo $loc["long"]; ?>, '<?php echo $loc["info"]; ?>');
<?php } ?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</html>
Hope that helps :)
You are initialising var locations everytime your while loop is running . In that aspect you will have the value of only the last iteration.Please initialise locations outside and push the values inside the javascript array.Also you should consider json_encode way .It is much cleaner.
if you new at google maps you can use gmaps.js it allows you to use the potential of Google Maps in a simple way.
https://hpneo.github.io/gmaps/
and its marker example:
https://hpneo.github.io/gmaps/examples/markers.html
I think you need to use objects:
var locations = {
{
title: '<?= $row['name'] ?>',
lat: '<?= $row['lat'] ?>',
lng: '<?= $row['lng'] ?>'
}
}
And you can use json_encode instead
In your code you already have following locations available globally:
var locations = [
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
['Cronulla Beach', -34.028249, 151.157507],
['Manly Beach', -33.80010128657071, 151.28747820854187],
['Maroubra Beach', -33.950198, 151.259302]
];
Now add the following HTML and Javascript in your file and refresh the page. This will show you the Google map.
HTML:
<div id="map_canvas" style="width:700px;height:500px;"></div>;
Javascript
function loadMap()
{
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for( i = 0; i < locations.length; i++ ) {
var loc = locations[i];
var position = new google.maps.LatLng(loc[1], loc[2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: loc[0]
});
map.fitBounds(bounds);
}
}
google.maps.event.addDomListener(window, 'load', loadMap);
If you want to dynamically use your database please check this example.
Create the file map3.php. File same as here
$conn = mysql_connect("localhost","root","");
mysql_select_db('yourdatabase');
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
$query = mysql_query("select * from yourtable");
//header("Content-type: text/html");
/* Get lat and Lan using table query */
$i=0;
while($row = mysql_fetch_assoc($query)){
$reposnse['markers'][$i]['lat']= $row['lat'];
$reposnse['markers'][$i]['lag']= $row['lag'];
$i++;
}
echo json_encode($reposnse);
?>
After create map2.php same as here
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="application/javascript">
$(document).ready(function(e) {
$.ajax({
url:"map3.php",
dataType: 'json',
success: function(result){
var html = '<markers>';
for (var prop in result['markers']) {
var value = result['markers'][prop];
//alert(value.lat);
html += '<marker ';
html += 'lat="';
html += value.lat+'"';
html += 'lng="';
html += value.lag+'"';
html += '/>';
}
html += '</markers>';
$('#test').html(html);
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(15.317277,75.71389),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker;
var location = {};
var markers = document.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
//alert(markers[i].getAttribute("lat"));
location = {
name : 'test'+i,
address : 'baglore',
city : 'bangalore',
state : 'Karnataka',
zip : '560017',
pointlat : parseFloat(markers[i].getAttribute("lat")),
pointlng : parseFloat(markers[i].getAttribute("lng"))
};
console.log(location);
marker = new google.maps.Marker({
position: new google.maps.LatLng(location.pointlat, location.pointlng),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker,location) {
return function() {
infowindow.setContent(location.name);
infowindow.open(map, marker);
};
})(marker, location));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
},
});
});
</script>
</head>
<body>
<div id="test">
</div>
<div id="map" style="width: 500px; height: 400px;"></div>
</body>
</html>
Please check the link below Adding multiple markers to google maps using javascript and php
I am creating a php page that loads cordinates from a mysql table and use them to create markers on a google map. It works fine. I also added Info Window but the problem is that the content on the info window for all the markers is showing the content meant for the last marker in the table. Below is the code:
<?php
include("php/db.php");
$db = new dbAccess($db_host,$db_user,$db_pass, $db_db, true);
$db->query("select * from tbl_gps;", false);
while($row_gps = $db->fetchrow()){
$gps_list .= "['".$row_gps['gps_title']."', ".$row_gps['lat_dec'].", ".$row_gps['long_dec'].", ".$row_gps['gps_order']."],\n";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Aerial View Of Federal Polytechnic Bauchi</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 17,
center: new google.maps.LatLng(10.256817, 9.771996),
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, struct);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var struct = [
<?php echo $gps_list; ?>
];
var markers = new Array();
function setMarkers(map, locations) {
var infowindow = null;
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: location[0],
zIndex: location[3]
});
/* now inside your initialise function */
infowindow = new google.maps.InfoWindow({
content: "holding..."
});
google.maps.event.addListener(marker, 'click', function () {
// where I have added .html to the marker object.
infowindow.setContent(location[0]);
infowindow.open(map, this);
});
}
}
</script>
</head>
<body style="background-color:#000" onload="initialize()">
<div id="map_canvas" style="height:95%; width:100%"></div>
</body>
</html>
Well, your code has the problem with javascript closure. It's the common problem when attaching event listeners in the loop. Try to understand and follow http://code.google.com/apis/maps/documentation/javascript/examples/event-closure.html.