Jump to content

Question

Posted

hi can some one check this syntax of this cos i'm missing something it just dont work

The JS
[CODE]
downloadUrl("http://chsites.co.uk/track/inc/maploc.php?id='.$mapid.'&name='.$member['id'].'", function(data) {
var xml = data.responseXML;

var Center = xml.documentElement.getElementsByTagName("marker");
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(
parseFloat(Center.getAttribute("lat")),
parseFloat(Center.getAttribute("lon"))),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject("Microsoft.XMLHTTP") :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open("GET", url, true);
request.send(null);
}
[/CODE]

The XML

[CODE]
<markers>
<marker lat="51.5589355" lon="0.1463353" speed="1.255" time="17:12:39 - 2012/12/04"/>
</markers>
[/CODE]

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted

a couple of things Craig.. I just built a semi complex Google Maps module for company I'm involved with.

You can see it here:
[url="http://www.venture51.com/people/"]http://www.venture51.com/people/[/url]

A couple of notes here that might be very obvious:

Google Maps API and markers require Marker library loaded in addition to Google Maps api (not sure if you included it or not)

Take a look at the source code of that page I sent you. You will see what I do.. just go through it and see how I did it.

I am using JSON feed from my database for data and I add them to marker group. If you want to customize and have more functionality I strongly encorouage you to use GoogleMarkerPlus library. You can find it here:

[url="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/examples/events_example.html"]http://google-maps-u...ts_example.html[/url]

[url="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html"]http://google-maps-u.../reference.html[/url]


But the short of it.. your XML should contain your long / lat information and data you want, while you parse and add your markers this way:

[CODE]
var markers = [];

var marker = new google.maps.Marker({
position: latLng,
animation: google.maps.Animation.DROP,
title: markerCity,
visible: true
});

var markerCluster = new MarkerClusterer(map, markers, mcOptions );
[/CODE]

This way you can control the whole marker cluster and use Event handlers on the map with markerclustererplus

if you don't want to work with clusters, you can just define the map in your marker declaration as you loop through your marker xml like this:

[CODE]
var markers = [];

var marker = new google.maps.Marker({
position: latLng,
animation: google.maps.Animation.DROP,
[b]map: map[/b],
visible: true
});

var markerCluster = new MarkerClusterer(map, markers, mcOptions );
[/CODE]

you will notice that I added here the map attribute. That tells this marker when it's created which map it belongs to.

Share this post


Link to post
Share on other sites
  • 0

Posted

Thanks for taking the time to reply but the problem I have is not the markers I want to change the map center every 20 seconds but before I put a timer on it just center the map from the XML

Share this post


Link to post
Share on other sites
  • 0

Posted

sorry looking back i was vague. OK a simple Google map API V3 would be

HTML
[CODE]<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9drFQnsmuob_bO9wFITHv-5K2pM-lgD0&sensor=false">
</script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(LATITUDE,LONGITUDE), //THIS MUST BE A POSITION (you understand)
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
</script>[/CODE]



OK this will show a map with the center of the map whatever LATITUDE,LONGITUDE you put in i wish to update the map center every 10 seconds with new coordinates (the script in first post)

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='Craig Hopson' timestamp='1354723162' post='595370220']
sorry looking back i was vague. OK a simple Google map API V3 would be

HTML
[CODE]<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9drFQnsmuob_bO9wFITHv-5K2pM-lgD0&sensor=false">
</script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(LATITUDE,LONGITUDE), //THIS MUST BE A POSITION (you understand)
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
</script>[/CODE]



OK this will show a map with the center of the map whatever LATITUDE,LONGITUDE you put in i wish to update the map center every 10 seconds with new coordinates (the script in first post)
[/quote]

Ah..that's easy..

If you want to pan to (center the map on a specific lat/long) you do this:

[quote]
map.panTo(new google.maps.LatLng(latlngArr[0],latlngArr[1]));
[/quote]

My latingArr array is just holding values for lat/lng of new points but you can replace it with your new values.
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted

thanks soooooo much buddy how about this one my polyline is all over the place you can see it here http://chsites.co.uk/track/index.php?page=show_map&id=2
if you click on a flag the speed it not speed its MYSQL id entry (just for testing)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.